/console-search-reveals-messages.html
Created Oct 27, 2014
Developer Tools layout test explained
| <!-- | |
| Developer Tools has a lot of different tests. Here we'll go through the most | |
| common type which tests Developer Tools front-end. | |
| Every front-end test is just a webpage. The testing system (which is essentially a special | |
| lightweight browser, content_shell) opens this page, and then opens Developer Tools to inspect | |
| it. | |
| --> | |
| <html> | |
| <head> | |
| <!-- inspector-test.js defines important functions for test writing, it is imported in every test. --> | |
| <script src="../../http/tests/inspector/inspector-test.js"></script> | |
| <!-- console-test.js defines helper functions for console test writing. --> | |
| <script src="../../http/tests/inspector/console-test.js"></script> | |
| <script> | |
| function populateConsoleWithMessages() | |
| { | |
| /** | |
| * Generate some sample console messages. | |
| */ | |
| for (var i = 0; i < 200; ++i) | |
| console.log("Message #" + i); | |
| console.log("LAST MESSAGE"); | |
| /** | |
| * Launch testing code. | |
| */ | |
| runTest(); | |
| } | |
| /** | |
| * This one is important: test-specific logic should be placed into the function called "test". | |
| * | |
| * Function "test" is stringified and evaluated in the context of Developer Tools frontend. The | |
| * same happens to all the functions in the page global scope with the "initialize_" prefix, e.g | |
| * initialize_consoleTest defined in console-test.js | |
| */ | |
| function test() | |
| { | |
| /** | |
| * TIME-SAVER TIP | |
| * The test doesn't produce any output if it timeouts, which makes it very hard to debug. | |
| * One popular way of solving this issue is adding setTimeout(InspectorTest.competeTest.bind(InspectorTest), 2000) | |
| * in the very beginning of the function to force-complete the test after 2 seconds. | |
| */ | |
| /** | |
| * The following code is executed in the Developer Tools front-end context, so its trivial to reach all the | |
| * components we want to test. | |
| */ | |
| var consoleView = WebInspector.ConsolePanel._view(); | |
| var viewport = consoleView._viewport; | |
| const maximumViewportMessagesCount = 150; | |
| /** | |
| * The convention is to call InspectorTest.completeTest to report test completion. | |
| * InspectorTest.runTestSuite runs a bunch of functions in the specified order and | |
| * calls InspectorTest.completeTest after the last. | |
| */ | |
| InspectorTest.runTestSuite([ | |
| /** | |
| * Pay attention to the "next" argument - its a callback function which should be called to proceed | |
| * to the next function. Forgetting to call "next" always results in the test timeout. | |
| */ | |
| function verifyViewportIsTallEnough(next) | |
| { | |
| viewport.invalidate(); | |
| var viewportMessagesCount = viewport._lastVisibleIndex - viewport._firstVisibleIndex; | |
| if (viewportMessagesCount > maximumViewportMessagesCount) { | |
| InspectorTest.addResult(String.sprintf("Test cannot be run because viewport could fit %d messages which is more then maxiumum of %d.", viewportMessagesCount, maximumViewportMessagesCount)); | |
| InspectorTest.completeTest(); | |
| return; | |
| } | |
| next(); | |
| }, | |
| function scrollConsoleToTop(next) | |
| { | |
| viewport.forceScrollItemToBeFirst(0); | |
| dumpTop(); | |
| next(); | |
| }, | |
| function testFindLastMessage(next) | |
| { | |
| consoleView._searchableView._searchInputElement.value = "LAST MESSAGE"; | |
| consoleView._searchableView.showSearchField(); | |
| consoleView._searchableView.handleFindNextShortcut(); | |
| dumpBottom(); | |
| next(); | |
| } | |
| ]); | |
| /** | |
| * Just a few helper functions. | |
| */ | |
| function dumpTop() | |
| { | |
| viewport.refresh(); | |
| InspectorTest.addResult("first visible message index: " + viewport.firstVisibleIndex()); | |
| } | |
| function dumpBottom() | |
| { | |
| viewport.refresh(); | |
| InspectorTest.addResult("last visible message index: " + viewport.lastVisibleIndex()); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body onload="populateConsoleWithMessages()"> | |
| <p> | |
| Tests that console viewport reveals messages on searching. | |
| </p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment