Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.