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