Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 # Writing Layout Tests | 1 # Writing Layout Tests |
| 2 | 2 |
| 3 _Layout tests_ is a bit of a misnomer. This term is | 3 _Layout tests_ is a bit of a misnomer. This term is |
| 4 [a part of our WebKit heritage](https://webkit.org/blog/1452/layout-tests-theory /), | 4 [a part of our WebKit heritage](https://webkit.org/blog/1452/layout-tests-theory /), |
| 5 and we use it to refer to every test that is written as a Web page (HTML, SVG, | 5 and we use it to refer to every test that is written as a Web page (HTML, SVG, |
| 6 or XHTML) and lives in | 6 or XHTML) and lives in |
| 7 [third_party/WebKit/LayoutTests/](../../third_party/WebKit/LayoutTests). | 7 [third_party/WebKit/LayoutTests/](../../third_party/WebKit/LayoutTests). |
| 8 | 8 |
| 9 [TOC] | 9 [TOC] |
| 10 | 10 |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 61 [quite cumbersome to manage](./layout_test_expectations.md). You | 61 [quite cumbersome to manage](./layout_test_expectations.md). You |
| 62 should only write a pixel test if you cannot use a reference test. By default | 62 should only write a pixel test if you cannot use a reference test. By default |
| 63 a pixel test will also dump the layout tree as text output, so they are | 63 a pixel test will also dump the layout tree as text output, so they are |
| 64 similar to ... | 64 similar to ... |
| 65 * *Layout tree tests*, which output a textual representation of the layout | 65 * *Layout tree tests*, which output a textual representation of the layout |
| 66 tree, which is the key data structure in Blink's page rendering system. The | 66 tree, which is the key data structure in Blink's page rendering system. The |
| 67 test passes if the output matches a baseline text file in the repository. | 67 test passes if the output matches a baseline text file in the repository. |
| 68 Layout tree tests are used as a last resort to test the internal quirks of | 68 Layout tree tests are used as a last resort to test the internal quirks of |
| 69 the implementation, and they should be avoided in favor of one of the earlier | 69 the implementation, and they should be avoided in favor of one of the earlier |
| 70 options. | 70 options. |
| 71 | |
| 71 ## General Principles | 72 ## General Principles |
| 72 | 73 |
| 73 The principles below are adapted from | |
| 74 [Test the Web Forward's Test Format Guidelines](http://testthewebforward.org/doc s/test-format-guidelines.html) | |
| 75 and | |
| 76 [WebKit's Wiki page on Writing good test cases](https://trac.webkit.org/wiki/Wri ting%20Layout%20Tests%20for%20DumpRenderTree). | |
| 77 | |
| 78 *** note | |
| 79 This document intentionally uses _should_ a lot more than _must_, as defined in | |
| 80 [RFC 2119](https://www.ietf.org/rfc/rfc2119.txt). Writing layout tests is a | |
| 81 careful act of balancing many concerns, and this humble document cannot possibly | |
| 82 capture the context that rests in the head of an experienced Blink engineer. | |
| 83 *** | |
| 84 | |
| 85 ### Concise | |
| 86 | |
| 87 Tests should be **concise**, without compromising on the principles below. Every | |
| 88 element and piece of code on the page should be necessary and relevant to what | |
| 89 is being tested. For example, don't build a fully functional signup form if you | |
| 90 only need a text field or a button. | |
| 91 | |
| 92 Content needed to satisfy the principles below is considered necessary. For | |
| 93 example, it is acceptable and desirable to add elements that make the test | |
| 94 self-describing (see below), and to add code that makes the test more reliable | |
| 95 (see below). | |
| 96 | |
| 97 Content that makes test failures easier to debug is considered necessary (to | |
| 98 maintaining a good development speed), and is both acceptable and desirable. | |
| 99 | |
| 100 *** promo | |
| 101 Conciseness is particularly important for reference tests and pixel tests, as | |
| 102 the test pages are rendered in an 800x600px viewport. Having content outside the | |
| 103 viewport is undesirable because the outside content does not get compared, and | |
| 104 because the resulting scrollbars are platform-specific UI widgets, making the | |
| 105 test results less reliable. | |
| 106 *** | |
| 107 | |
| 108 ### Fast | |
| 109 | |
| 110 Tests should be as **fast** as possible, without compromising on the principles | |
| 111 below. Blink has several thousand layout tests that are run in parallel, and | |
| 112 avoiding unnecessary delays is crucial to keeping our Commit Queue in good | |
| 113 shape. | |
| 114 | |
| 115 Avoid | |
| 116 [window.setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimer s/setTimeout), | |
| 117 as it wastes time on the testing infrastructure. Instead, use specific event | |
| 118 handlers, such as | |
| 119 [window.onload](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHand lers/onload), | |
| 120 to decide when to advance to the next step in a test. | |
| 121 | |
| 122 ### Reliable | |
| 123 | |
| 124 Tests should be **reliable** and yield consistent results for a given | |
| 125 implementation. Flaky tests slow down your fellow developers' debugging efforts | |
| 126 and the Commit Queue. | |
| 127 | |
| 128 `window.setTimeout` is again a primary offender here. Asides from wasting time | |
| 129 on a fast system, tests that rely on fixed timeouts can fail when on systems | |
| 130 that are slower than expected. | |
| 131 | |
| 132 Follow the guidelines in this | |
| 133 [PSA on writing reliable layout tests](https://docs.google.com/document/d/1Yl4Sn TLBWmY1O99_BTtQvuoffP8YM9HZx2YPkEsaduQ/edit). | |
| 134 | |
| 135 ### Self-Describing | |
| 136 | |
| 137 Tests should be **self-describing**, so that a project member can recognize | |
| 138 whether a test passes or fails without having to read the specification of the | |
| 139 feature being tested. `testharness.js` makes a test self-describing when used | |
| 140 correctly, but tests that degrade to manual tests | |
| 141 [must be carefully designed](http://testthewebforward.org/docs/test-style-guidel ines.html) | |
| 142 to be self-describing. | |
| 143 | |
| 144 ### Minimal | |
| 145 | |
| 146 Tests should require a **minimal** amount of cognitive effort to read and | |
| 147 maintain. | |
| 148 | |
| 149 Avoid depending on edge case behavior of features that aren't explicitly covered | |
| 150 by the test. For example, except where testing parsing, tests should contain | |
| 151 valid markup (no parsing errors). | |
| 152 | |
| 153 Tests should provide as much relevant information as possible when failing. | |
| 154 `testharness.js` tests should prefer | |
| 155 [rich assert_ functions](https://github.com/w3c/testharness.js/blob/master/docs/ api.md#list-of-assertions) | |
| 156 to combining `assert_true()` with a boolean operator. Using appropriate | |
| 157 `assert_` functions results in better diagnostic output when the assertion | |
| 158 fails. | |
| 159 | |
| 160 🚧 Prefer JavaScript's | |
| 161 [===](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Comp arison_Operators#Identity_strict_equality_()) | |
| 162 operator to | |
| 163 [==](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Compa rison_Operators#Equality_()) | |
| 164 so that readers don't have to reason about | |
| 165 [type conversion](http://www.ecma-international.org/ecma-262/6.0/#sec-abstract-e quality-comparison). | |
| 166 | |
| 167 *** promo | |
| 168 The === vs == recommendation is still being discussed on | |
| 169 [blink-dev](https://groups.google.com/a/chromium.org/d/topic/blink-dev/XsR6PKRrS 1E/discussion). | |
| 170 However, please keep in mind that a fellow developer who has to debug a failing | |
| 171 test may have to consider the | |
| 172 [special cases for ==](http://dorey.github.io/JavaScript-Equality-Table/) when | |
| 173 the types of the two values being compared aren't immediately obvious. | |
| 174 *** | |
| 175 | |
| 176 ### Cross-Platform | |
| 177 | |
| 178 Tests should be as **cross-platform** as reasonably possible. Avoid assumptions | |
| 179 about device type, screen resolution, etc. Unavoidable assumptions should be | |
| 180 documented. | |
| 181 | |
| 182 When possible, tests should only use Web platform features, as specified | |
| 183 in the relevant standards. When the Web platform's APIs are insufficient, | |
| 184 tests should prefer to use WPT extended testing APIs, such as | |
| 185 `wpt_automation`, over Blink-specific testing APIs. | |
| 186 | |
| 187 🚧 Tests that use testing APIs should feature-test for the presence of | |
| 188 those APIs, and gracefully degrade to manual tests (see below) when the testing | |
| 189 APIs are not available. | |
| 190 | |
| 191 Test pages should use the HTML5 doctype (`<!doctype html>`) unless they | |
| 192 specifically cover | |
| 193 [quirks mode](https://developer.mozilla.org/docs/Quirks_Mode_and_Standards_Mode) | |
| 194 behavior. | |
| 195 | 74 |
| 196 Tests should be written under the assumption that they will be upstreamed | 75 Tests should be written under the assumption that they will be upstreamed |
| 197 to the WPT project. For example, tests should follow the | 76 to the WPT project. To this end, tests should follow the |
| 198 [WPT guidelines](http://testthewebforward.org/docs/writing-tests.html). | 77 [WPT guidelines](http://testthewebforward.org/docs/writing-tests.html). |
| 199 | 78 |
| 200 Tests should avoid using features that haven't been shipped by the | |
| 201 actively-developed major rendering engines (Blink, WebKit, Gecko, Edge). When | |
| 202 unsure, check [caniuse.com](http://caniuse.com/). By necessity, this | |
| 203 recommendation does not apply to the feature targeted by the test. | |
| 204 | 79 |
| 205 *** note | 80 There is no style guide that applies to all layout tests. However, some projects |
| 206 It may be tempting have a test for a bleeding-edge feature X depend on feature | 81 have adopted style guides, such as the |
| 207 Y, which has only shipped in beta / development versions of various browsers. | 82 [ServiceWorker Tests Style guide](https://www.chromium.org/blink/serviceworker/t esting). |
| 208 The reasoning would be that all browsers that implement X will have implemented | |
| 209 Y. Please keep in mind that Chrome has un-shipped features that made it to the | |
| 210 Beta channel in the past. | |
| 211 *** | |
| 212 | 83 |
| 213 Tests that use Blink-specific testing APIs should feature-test for the | 84 Our [document on layout tests tips](./layout_tests_tips.md) summarizes the most |
| 214 presence of the testing APIs and degrade to | 85 important WPT guidelines and highlights some JavaScript concepts that are worth |
| 215 [manual tests](http://testthewebforward.org/docs/manual-test.html) when | 86 paying attention to when trying to infer style rules from existing tests. If |
| 216 the testing APIs are not present. | 87 you're unopinionated and looking for a style guide to follow, the document also |
| 217 | 88 suggests some defaults. |
| 218 *** promo | |
| 219 The recommendation to degrade to manual tests is still being discussed on | |
| 220 [blink-dev](https://groups.google.com/a/chromium.org/d/topic/blink-dev/XsR6PKRrS 1E/discussion). | |
| 221 However, please keep in mind that a manual test can be debugged in the browser, | |
| 222 whereas a test that does not degrade gracefully can only be debugged in the test | |
| 223 runner. Fellow project members and future you will thank you for having your | |
| 224 test work as a manual test. | |
| 225 *** | |
| 226 | |
| 227 ### Self-Contained | |
| 228 | |
| 229 Tests must be **self-contained** and not depend on external network resources. | |
| 230 | |
| 231 Unless used by multiple test files, CSS and JavaScript should be inlined using | |
| 232 `<style>` and `<script>` tags. Content shared by multiple tests should be | |
| 233 placed in a `resources/` directory near the tests that share it. See below for | |
| 234 using multiple origins in a test. | |
| 235 | |
| 236 ### File Names | |
| 237 | |
| 238 Test **file names** should describe what is being tested. | |
| 239 | |
| 240 File names should use `snake-case`, but preserve the case of any embedded API | |
| 241 names. For example, prefer `document-createElement.html` to | |
| 242 `document-create-element.html`. | |
| 243 | |
| 244 ### Modern Features | |
| 245 | |
| 246 Tests should prefer **modern features** in JavaScript and in the Web Platform, | |
| 247 provided that they meet the recommendations above for cross-platform tests. | |
| 248 | |
| 249 Tests should use | |
| 250 [strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Strict_mode) | |
| 251 for all JavaScript, except when specifically testing sloppy mode behavior. | |
| 252 Strict mode flags deprecated features and helps catch some errors, such as | |
| 253 forgetting to declare variables. | |
| 254 | |
| 255 🚧 JavaScript code should prefer | |
| 256 [const](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/c onst) | |
| 257 and | |
| 258 [let](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/let ) | |
| 259 over `var`, | |
| 260 [classes](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Classes) | |
| 261 over other OOP constructs, and | |
| 262 [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Ob jects/Promise) | |
| 263 over other mechanisms for structuring asynchronous code. | |
| 264 | |
| 265 *** promo | |
| 266 The recommendation to prefer `const` and `let` over `var` is currently being | |
| 267 discussed on | |
| 268 [blink-dev](https://groups.google.com/a/chromium.org/d/topic/blink-dev/XsR6PKRrS 1E/discussion). | |
| 269 *** | |
| 270 | |
| 271 ### Character Encoding | |
| 272 | |
| 273 🚧 Tests should use the UTF-8 **character encoding**, which should be | |
| 274 declared by `<meta charset=utf-8>`. This does not apply when specifically | |
| 275 testing encodings. | |
| 276 | |
| 277 The `<meta>` tag must be the first child of the document's `<head>` element. In | |
| 278 documents that do not have an explicit `<head>`, the `<meta>` tag must follow | |
| 279 the doctype. | |
| 280 | |
| 281 When HTML pages do not explicitly declare a character encoding, browsers | |
| 282 determine the encoding using an | |
| 283 [encoding sniffing algorithm](https://html.spec.whatwg.org/multipage/syntax.html #determining-the-character-encoding) | |
| 284 that will surprise most modern Web developers. Highlights include a default | |
| 285 encoding that depends on the user's locale, and non-standardized | |
| 286 browser-specific heuristics. | |
| 287 | |
| 288 *** promo | |
| 289 The WPT guidelines state that test files that only contain ASCII characters may | |
| 290 omit the `<meta>` tag. This exception is currently discussed on | |
| 291 [blink-dev](https://groups.google.com/a/chromium.org/d/topic/blink-dev/XsR6PKRrS 1E/discussion). | |
| 292 If taking that route, please keep in mind that Firefox currently issues a | |
| 293 [development tools](https://developer.mozilla.org/en-US/docs/Tools) warning for | |
| 294 pages without a declared encoding. | |
| 295 *** | |
| 296 | |
| 297 ### Coding Style | |
| 298 | |
| 299 Tests should aim to have a **coding style** that is consistent with | |
| 300 [Google's JavaScript Style Guide](https://google.github.io/styleguide/jsguide.ht ml), | |
| 301 and | |
| 302 [Google's HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide .xml), | |
| 303 with the following exceptions. | |
| 304 | |
| 305 * Rules related to Google Closure and JSDoc do not apply. | |
| 306 * Modern Web Platform and JavaScript features should be preferred to legacy | |
| 307 constructs that target old browsers. | |
| 308 * Per the JavaScript guide, new tests should also follow any per-project | |
| 309 style guide, such as the | |
| 310 [ServiceWorker Tests Style guide](https://www.chromium.org/blink/serviceworker /testing). | |
| 311 | 89 |
| 312 ## JavaScript Tests | 90 ## JavaScript Tests |
| 313 | 91 |
| 314 Whenever possible, the testing criteria should be expressed in JavaScript. The | 92 Whenever possible, the testing criteria should be expressed in JavaScript. The |
| 315 alternatives, which will be described in future sections, result in slower and | 93 alternatives, which will be described in future sections, result in slower and |
| 316 less reliable tests. | 94 less reliable tests. |
| 317 | 95 |
| 318 All new JavaScript tests should be written using the | 96 All new JavaScript tests should be written using the |
| 319 [testharness.js](https://github.com/w3c/testharness.js/) testing framework. This | 97 [testharness.js](https://github.com/w3c/testharness.js/) testing framework. This |
| 320 framework is used by the tests in the | 98 framework is used by the tests in the |
| (...skipping 10 matching lines...) Expand all Loading... | |
| 331 specification URL (in `<link rel="help">`) is almost always relevant, and is | 109 specification URL (in `<link rel="help">`) is almost always relevant, and is |
| 332 incredibly helpful to a developer who needs to understand the test quickly. | 110 incredibly helpful to a developer who needs to understand the test quickly. |
| 333 | 111 |
| 334 Below is a skeleton for a JavaScript test embedded in an HTML page. Note that, | 112 Below is a skeleton for a JavaScript test embedded in an HTML page. Note that, |
| 335 in order to follow the minimality guideline, the test omits the tags `<html>`, | 113 in order to follow the minimality guideline, the test omits the tags `<html>`, |
| 336 `<head>`, and `<body>`, as they can be inferred by the HTML parser. | 114 `<head>`, and `<body>`, as they can be inferred by the HTML parser. |
| 337 | 115 |
| 338 ```html | 116 ```html |
| 339 <!doctype html> | 117 <!doctype html> |
| 340 <meta charset="utf-8"> | 118 <meta charset="utf-8"> |
| 341 <title>JavaScript: the true literal</title> | 119 <title>JavaScript: the true literal is immutable and equal to itself</title> |
| 342 <link rel="help" href="https://tc39.github.io/ecma262/#sec-boolean-literals"> | 120 <link rel="help" href="https://tc39.github.io/ecma262/#sec-boolean-literals"> |
| 343 <meta name="assert" value="The true literal is equal to itself and immutable"> | |
| 344 <script src="/resources/testharness.js"></script> | 121 <script src="/resources/testharness.js"></script> |
| 345 <script src="/resources/testharnessreport.js"></script> | 122 <script src="/resources/testharnessreport.js"></script> |
| 346 <script> | 123 <script> |
| 347 'use strict'; | 124 'use strict'; |
| 348 | 125 |
| 349 // Synchronous test example. | 126 // Synchronous test example. |
| 350 test(() => { | 127 test(() => { |
| 351 const value = true; | 128 const value = true; |
| 352 assert_true(value, 'true literal'); | 129 assert_true(value, 'true literal'); |
| 353 assert_equals(value.toString(), 'true', 'the string representation of true'); | 130 assert_equals(value.toString(), 'true', 'the string representation of true'); |
| (...skipping 14 matching lines...) Expand all Loading... | |
| 368 }).then(value => { | 145 }).then(value => { |
| 369 assert_true(value); | 146 assert_true(value); |
| 370 }); | 147 }); |
| 371 }, 'The literal true used to resolve a Promise'); | 148 }, 'The literal true used to resolve a Promise'); |
| 372 | 149 |
| 373 </script> | 150 </script> |
| 374 ``` | 151 ``` |
| 375 | 152 |
| 376 Some points that are not immediately obvious from the example: | 153 Some points that are not immediately obvious from the example: |
| 377 | 154 |
| 378 * The `<meta name="assert">` describes the purpose of the entire file, and | 155 * This example only uses ASCII characters, so `<meta charset="utf-8">` is not |
| 379 is not redundant to `<title>`. Don't add a `<meta name="assert">` when the | 156 strictly necessary. The `<meta charset>` is always allowed though, so you |
| 380 information in the `<title>` is sufficient. | 157 can't go wrong by having it in! |
|
ojan
2017/01/26 01:05:49
This is not what I see as standard practice. I thi
pwnall
2017/01/26 23:14:15
Done.
| |
| 381 * When calling an `assert_` function that compares two values, the first | 158 * When calling an `assert_` function that compares two values, the first |
| 382 argument is the actual value (produced by the functionality being tested), and | 159 argument is the actual value (produced by the functionality being tested), and |
| 383 the second argument is the expected value (known good, golden). The order | 160 the second argument is the expected value (known good, golden). The order |
| 384 is important, because the testing harness relies on it to generate expressive | 161 is important, because the testing harness relies on it to generate expressive |
| 385 error messages that are relied upon when debugging test failures. | 162 error messages that are relied upon when debugging test failures. |
| 386 * The assertion description (the string argument to `assert_` methods) conveys | 163 * The assertion description (the string argument to `assert_` methods) conveys |
| 387 the way the actual value was obtained. | 164 the way the actual value was obtained. |
| 388 * If the expected value doesn't make it clear, the assertion description | 165 * If the expected value doesn't make it clear, the assertion description |
| 389 should explain the desired behavior. | 166 should explain the desired behavior. |
| 390 * Test cases with a single assertion should omit the assertion's description | 167 * Test cases with a single assertion should omit the assertion's description |
| (...skipping 30 matching lines...) Expand all Loading... | |
| 421 imported from the [WPT repository](https://github.com/w3c/web-platform-tests). | 198 imported from the [WPT repository](https://github.com/w3c/web-platform-tests). |
| 422 *** | 199 *** |
| 423 | 200 |
| 424 ### WPT Supplemental Testing APIs | 201 ### WPT Supplemental Testing APIs |
| 425 | 202 |
| 426 Some tests simply cannot be expressed using the Web Platform APIs. For example, | 203 Some tests simply cannot be expressed using the Web Platform APIs. For example, |
| 427 some tests that require a user to perform a gesture, such as a mouse click, | 204 some tests that require a user to perform a gesture, such as a mouse click, |
| 428 cannot be implemented using Web APIs. The WPT project covers some of these cases | 205 cannot be implemented using Web APIs. The WPT project covers some of these cases |
| 429 via supplemental testing APIs. | 206 via supplemental testing APIs. |
| 430 | 207 |
| 208 When writing tests that rely on supplemental testing APIs, please consider the | |
| 209 cost and benefits of having the tests | |
| 210 [gracefully degrade to manual tests](./layout_tests_with_manual_fallback.md) in | |
| 211 the absence of the testing APIs. | |
| 212 | |
| 431 *** promo | 213 *** promo |
| 432 In many cases, the user gesture is not actually necessary. For example, many | 214 In many cases, the user gesture is not actually necessary. For example, many |
| 433 event handling tests can use | 215 event handling tests can use |
| 434 [synthetic events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_ and_triggering_events). | 216 [synthetic events](https://developer.mozilla.org/docs/Web/Guide/Events/Creating_ and_triggering_events). |
| 435 *** | 217 *** |
| 436 | 218 |
| 437 *** note | 219 *** note |
| 438 TODO: document wpt_automation. Manual tests might end up moving here. | 220 TODO: document wpt_automation. Manual tests might end up moving here. |
| 439 *** | 221 *** |
| 440 | 222 |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 481 ([components/test_runner/event_sender.h](../../components/test_runner/event_send er.h) | 263 ([components/test_runner/event_sender.h](../../components/test_runner/event_send er.h) |
| 482 and | 264 and |
| 483 [components/test_runner/event_sender.cpp](../../components/test_runner/event_sen der.cpp)) | 265 [components/test_runner/event_sender.cpp](../../components/test_runner/event_sen der.cpp)) |
| 484 has methods that simulate events input such as keyboard / mouse input and | 266 has methods that simulate events input such as keyboard / mouse input and |
| 485 drag-and-drop. | 267 drag-and-drop. |
| 486 | 268 |
| 487 Here is a UML diagram of how the `testRunner` bindings fit into Chromium. | 269 Here is a UML diagram of how the `testRunner` bindings fit into Chromium. |
| 488 | 270 |
| 489 [](https://docs.google .com/drawings/d/1KNRNjlxK0Q3Tp8rKxuuM5mpWf4OJQZmvm9_kpwu_Wwg/edit) | 271 [](https://docs.google .com/drawings/d/1KNRNjlxK0Q3Tp8rKxuuM5mpWf4OJQZmvm9_kpwu_Wwg/edit) |
| 490 | 272 |
| 491 ### Manual Tests | |
| 492 | |
| 493 🚧 Whenever possible, tests that rely on (WPT's or Blink's) testing APIs | |
| 494 should also be usable as | |
| 495 [manual tests](http://testthewebforward.org/docs/manual-test.html). This makes | |
| 496 it easy to debug the test, and to check whether our behavior matches other | |
| 497 browsers. | |
| 498 | |
| 499 *** promo | |
| 500 The recommendation to degrade to manual tests is still being discussed on | |
| 501 [blink-dev](https://groups.google.com/a/chromium.org/d/topic/blink-dev/XsR6PKRrS 1E/discussion). | |
| 502 However, please keep in mind that a manual test can be debugged in the browser, | |
| 503 whereas a test that does not degrade gracefully can only be debugged in the test | |
| 504 runner. Fellow project members and future you will thank you for having your | |
| 505 test work as a manual test. | |
| 506 *** | |
| 507 | |
| 508 Manual tests should minimize the chance of user error. This implies keeping the | |
| 509 manual steps to a minimum, and having simple and clear instructions that | |
| 510 describe all the configuration changes and user gestures that match the effect | |
| 511 of the Blink-specific APIs used by the test. | |
| 512 | |
| 513 Below is an example of a fairly minimal test that uses a Blink-Specific API | |
| 514 (`window.eventSender`), and gracefully degrades to a manual test. | |
| 515 | |
| 516 ```html | |
| 517 <!doctype html> | |
| 518 <meta charset="utf-8"> | |
| 519 <title>DOM: Event.isTrusted for UI events</title> | |
| 520 <link rel="help" href="https://dom.spec.whatwg.org/#dom-event-istrusted"> | |
| 521 <link rel="help" href="https://dom.spec.whatwg.org/#constructing-events"> | |
| 522 <meta name="assert" | |
| 523 content="Event.isTrusted is true for events generated by user interaction"> | |
| 524 <script src="../../resources/testharness.js"></script> | |
| 525 <script src="../../resources/testharnessreport.js"></script> | |
| 526 | |
| 527 <p>Please click on the button below.</p> | |
| 528 <button>Click Me!</button> | |
| 529 | |
| 530 <script> | |
| 531 'use strict'; | |
| 532 | |
| 533 setup({ explicit_timeout: true }); | |
| 534 | |
| 535 promise_test(() => { | |
| 536 const button = document.querySelector('button'); | |
| 537 return new Promise((resolve, reject) => { | |
| 538 const button = document.querySelector('button'); | |
| 539 button.addEventListener('click', (event) => { | |
| 540 resolve(event); | |
| 541 }); | |
| 542 | |
| 543 if (window.eventSender) { | |
| 544 eventSender.mouseMoveTo(button.offsetLeft, button.offsetTop); | |
| 545 eventSender.mouseDown(); | |
| 546 eventSender.mouseUp(); | |
| 547 } | |
| 548 }).then((clickEvent) => { | |
| 549 assert_true(clickEvent.isTrusted); | |
| 550 }); | |
| 551 | |
| 552 }, 'Click generated by user interaction'); | |
| 553 | |
| 554 </script> | |
| 555 ``` | |
| 556 | |
| 557 The test exhibits the following desirable features: | |
| 558 | |
| 559 * It has a second specification URL (`<link rel="help">`), because the paragraph | |
| 560 that documents the tested feature (referenced by the primary URL) is not very | |
| 561 informative on its own. | |
| 562 * It links to the | |
| 563 [WHATWG Living Standard](https://wiki.whatwg.org/wiki/FAQ#What_does_.22Living_ Standard.22_mean.3F), | |
| 564 rather than to a frozen version of the specification. | |
| 565 * It contains clear instructions for manually triggering the test conditions. | |
| 566 The test starts with a paragraph (`<p>`) that tells the tester exactly what to | |
| 567 do, and the `<button>` that needs to be clicked is clearly labeled. | |
| 568 * It disables the timeout mechanism built into `testharness.js` by calling | |
| 569 `setup({ explicit_timeout: true });` | |
| 570 * It checks for the presence of the Blink-specific testing APIs | |
| 571 (`window.eventSender`) before invoking them. The test does not automatically | |
| 572 fail when the APIs are not present. | |
| 573 * It uses [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference /Global_Objects/Promise) | |
| 574 to separate the test setup from the assertions. This is particularly helpful | |
| 575 for manual tests that depend on a sequence of events to occur, as Promises | |
| 576 offer a composable way to express waiting for asynchronous events that avoids | |
| 577 [callback hell](http://stackabuse.com/avoiding-callback-hell-in-node-js/). | |
| 578 | |
| 579 Notice that the test is pretty heavy compared to a minimal JavaScript test that | |
| 580 does not rely on testing APIs. Only use testing APIs when the desired testing | |
| 581 conditions cannot be set up using Web Platform APIs. | |
| 582 | |
| 583 ### Text Test Baselines | 273 ### Text Test Baselines |
| 584 | 274 |
| 585 By default, all the test cases in a file that uses `testharness.js` are expected | 275 By default, all the test cases in a file that uses `testharness.js` are expected |
| 586 to pass. However, in some cases, we prefer to add failing test cases to the | 276 to pass. However, in some cases, we prefer to add failing test cases to the |
| 587 repository, so that we can be notified when the failure modes change (e.g., we | 277 repository, so that we can be notified when the failure modes change (e.g., we |
| 588 want to know if a test starts crashing rather than returning incorrect output). | 278 want to know if a test starts crashing rather than returning incorrect output). |
| 589 In these situations, a test file will be accompanied by a baseline, which is an | 279 In these situations, a test file will be accompanied by a baseline, which is an |
| 590 `-expected.txt` file that contains the test's expected output. | 280 `-expected.txt` file that contains the test's expected output. |
| 591 | 281 |
| 592 The baselines are generated automatically when appropriate by | 282 The baselines are generated automatically when appropriate by |
| (...skipping 303 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 896 * The `http/` directory hosts tests that require an HTTP server (see above). | 586 * The `http/` directory hosts tests that require an HTTP server (see above). |
| 897 * The `resources/` subdirectory in every directory contains binary files, such | 587 * The `resources/` subdirectory in every directory contains binary files, such |
| 898 as media files, and code that is shared by multiple test files. | 588 as media files, and code that is shared by multiple test files. |
| 899 | 589 |
| 900 *** note | 590 *** note |
| 901 Some layout tests consist of a minimal HTML page that references a JavaScript | 591 Some layout tests consist of a minimal HTML page that references a JavaScript |
| 902 file in `resources/`. Please do not use this pattern for new tests, as it goes | 592 file in `resources/`. Please do not use this pattern for new tests, as it goes |
| 903 against the minimality principle. JavaScript and CSS files should only live in | 593 against the minimality principle. JavaScript and CSS files should only live in |
| 904 `resources/` if they are shared by at least two test files. | 594 `resources/` if they are shared by at least two test files. |
| 905 *** | 595 *** |
| OLD | NEW |