diff options
Diffstat (limited to 'devtools/client/webconsole/new-console-output/test/mochitest')
16 files changed, 911 insertions, 0 deletions
diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser.ini b/devtools/client/webconsole/new-console-output/test/mochitest/browser.ini new file mode 100644 index 000000000..9881d0559 --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser.ini @@ -0,0 +1,21 @@ +[DEFAULT] +tags = devtools +subsuite = devtools +support-files = + head.js + test-batching.html + test-console.html + test-console-filters.html + test-console-group.html + test-console-table.html + !/devtools/client/framework/test/shared-head.js + +[browser_webconsole_batching.js] +[browser_webconsole_console_group.js] +[browser_webconsole_console_table.js] +[browser_webconsole_filters.js] +[browser_webconsole_init.js] +[browser_webconsole_input_focus.js] +[browser_webconsole_keyboard_accessibility.js] +[browser_webconsole_observer_notifications.js] +[browser_webconsole_vview_close_on_esc_key.js] diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_batching.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_batching.js new file mode 100644 index 000000000..0bfdccc3c --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_batching.js @@ -0,0 +1,51 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Check adding console calls as batch keep the order of the message. + +const TEST_URI = "http://example.com/browser/devtools/client/webconsole/new-console-output/test/mochitest/test-batching.html"; +const { l10n } = require("devtools/client/webconsole/new-console-output/utils/messages"); + +add_task(function* () { + let hud = yield openNewTabAndConsole(TEST_URI); + const messageNumber = 100; + yield testSimpleBatchLogging(hud, messageNumber); + yield testBatchLoggingAndClear(hud, messageNumber); +}); + +function* testSimpleBatchLogging(hud, messageNumber) { + yield ContentTask.spawn(gBrowser.selectedBrowser, messageNumber, + function (numMessages) { + content.wrappedJSObject.batchLog(numMessages); + } + ); + + for (let i = 0; i < messageNumber; i++) { + let node = yield waitFor(() => findMessageAtIndex(hud, i, i)); + is(node.textContent, i.toString(), `message at index "${i}" is the expected one`); + } +} + +function* testBatchLoggingAndClear(hud, messageNumber) { + yield ContentTask.spawn(gBrowser.selectedBrowser, messageNumber, + function (numMessages) { + content.wrappedJSObject.batchLogAndClear(numMessages); + } + ); + yield waitFor(() => findMessage(hud, l10n.getStr("consoleCleared"))); + ok(true, "console cleared message is displayed"); + + // Passing the text argument as an empty string will returns all the message, + // whatever their content is. + const messages = findMessages(hud, ""); + is(messages.length, 1, "console was cleared as expected"); +} + +function findMessageAtIndex(hud, text, index) { + const selector = `.message:nth-of-type(${index + 1}) .message-body`; + return findMessage(hud, text, selector); +} diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_group.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_group.js new file mode 100644 index 000000000..94de78f13 --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_group.js @@ -0,0 +1,91 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Check console.group, console.groupCollapsed and console.groupEnd calls +// behave as expected. + +const TEST_URI = "http://example.com/browser/devtools/client/webconsole/new-console-output/test/mochitest/test-console-group.html"; +const { INDENT_WIDTH } = require("devtools/client/webconsole/new-console-output/components/message-indent"); + +add_task(function* () { + let toolbox = yield openNewTabAndToolbox(TEST_URI, "webconsole"); + let hud = toolbox.getCurrentPanel().hud; + + const store = hud.ui.newConsoleOutput.getStore(); + // Adding loggin each time the store is modified in order to check + // the store state in case of failure. + store.subscribe(() => { + const messages = store.getState().messages.messagesById.toJS() + .map(message => { + return { + id: message.id, + type: message.type, + parameters: message.parameters, + messageText: message.messageText + }; + } + ); + info("messages : " + JSON.stringify(messages)); + }); + + yield ContentTask.spawn(gBrowser.selectedBrowser, null, function () { + content.wrappedJSObject.doLog(); + }); + + info("Test a group at root level"); + let node = yield waitFor(() => findMessage(hud, "group-1")); + testClass(node, "startGroup"); + testIndent(node, 0); + + info("Test a message in a 1 level deep group"); + node = yield waitFor(() => findMessage(hud, "log-1")); + testClass(node, "log"); + testIndent(node, 1); + + info("Test a group in a 1 level deep group"); + node = yield waitFor(() => findMessage(hud, "group-2")); + testClass(node, "startGroup"); + testIndent(node, 1); + + info("Test a message in a 2 level deep group"); + node = yield waitFor(() => findMessage(hud, "log-2")); + testClass(node, "log"); + testIndent(node, 2); + + info("Test a message in a 1 level deep group, after closing a 2 level deep group"); + node = yield waitFor(() => findMessage(hud, "log-3")); + testClass(node, "log"); + testIndent(node, 1); + + info("Test a message at root level, after closing all the groups"); + node = yield waitFor(() => findMessage(hud, "log-4")); + testClass(node, "log"); + testIndent(node, 0); + + info("Test a collapsed group at root level"); + node = yield waitFor(() => findMessage(hud, "group-3")); + testClass(node, "startGroupCollapsed"); + testIndent(node, 0); + + info("Test a message at root level, after closing a collapsed group"); + node = yield waitFor(() => findMessage(hud, "log-6")); + testClass(node, "log"); + testIndent(node, 0); + + let nodes = hud.ui.experimentalOutputNode.querySelectorAll(".message"); + is(nodes.length, 8, "expected number of messages are displayed"); +}); + +function testClass(node, className) { + ok(node.classList.contains(className), `message has the expected "${className}" class`); +} + +function testIndent(node, indent) { + indent = `${indent * INDENT_WIDTH}px`; + is(node.querySelector(".indent").style.width, indent, + "message has the expected level of indentation"); +} diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_table.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_table.js new file mode 100644 index 000000000..a90ae1af1 --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_console_table.js @@ -0,0 +1,173 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Check console.table calls with all the test cases shown +// in the MDN doc (https://developer.mozilla.org/en-US/docs/Web/API/Console/table) + +const TEST_URI = "http://example.com/browser/devtools/client/webconsole/new-console-output/test/mochitest/test-console-table.html"; + +add_task(function* () { + let toolbox = yield openNewTabAndToolbox(TEST_URI, "webconsole"); + let hud = toolbox.getCurrentPanel().hud; + + function Person(firstName, lastName) { + this.firstName = firstName; + this.lastName = lastName; + } + + const testCases = [{ + info: "Testing when data argument is an array", + input: ["apples", "oranges", "bananas"], + expected: { + columns: ["(index)", "Values"], + rows: [ + ["0", "apples"], + ["1", "oranges"], + ["2", "bananas"], + ] + } + }, { + info: "Testing when data argument is an object", + input: new Person("John", "Smith"), + expected: { + columns: ["(index)", "Values"], + rows: [ + ["firstName", "John"], + ["lastName", "Smith"], + ] + } + }, { + info: "Testing when data argument is an array of arrays", + input: [["Jane", "Doe"], ["Emily", "Jones"]], + expected: { + columns: ["(index)", "0", "1"], + rows: [ + ["0", "Jane", "Doe"], + ["1", "Emily", "Jones"], + ] + } + }, { + info: "Testing when data argument is an array of objects", + input: [ + new Person("Jack", "Foo"), + new Person("Emma", "Bar"), + new Person("Michelle", "Rax"), + ], + expected: { + columns: ["(index)", "firstName", "lastName"], + rows: [ + ["0", "Jack", "Foo"], + ["1", "Emma", "Bar"], + ["2", "Michelle", "Rax"], + ] + } + }, { + info: "Testing when data argument is an object whose properties are objects", + input: { + father: new Person("Darth", "Vader"), + daughter: new Person("Leia", "Organa"), + son: new Person("Luke", "Skywalker"), + }, + expected: { + columns: ["(index)", "firstName", "lastName"], + rows: [ + ["father", "Darth", "Vader"], + ["daughter", "Leia", "Organa"], + ["son", "Luke", "Skywalker"], + ] + } + }, { + info: "Testing when data argument is a Set", + input: new Set(["a", "b", "c"]), + expected: { + columns: ["(iteration index)", "Values"], + rows: [ + ["0", "a"], + ["1", "b"], + ["2", "c"], + ] + } + }, { + info: "Testing when data argument is a Map", + input: new Map([["key-a", "value-a"], ["key-b", "value-b"]]), + expected: { + columns: ["(iteration index)", "Key", "Values"], + rows: [ + ["0", "key-a", "value-a"], + ["1", "key-b", "value-b"], + ] + } + }, { + info: "Testing restricting the columns displayed", + input: [ + new Person("Sam", "Wright"), + new Person("Elena", "Bartz"), + ], + headers: ["firstName"], + expected: { + columns: ["(index)", "firstName"], + rows: [ + ["0", "Sam"], + ["1", "Elena"], + ] + } + }]; + + yield ContentTask.spawn(gBrowser.selectedBrowser, testCases, function (tests) { + tests.forEach((test) => { + content.wrappedJSObject.doConsoleTable(test.input, test.headers); + }); + }); + + let nodes = []; + for (let testCase of testCases) { + let node = yield waitFor( + () => findConsoleTable(hud.ui.experimentalOutputNode, testCases.indexOf(testCase)) + ); + nodes.push(node); + } + + let consoleTableNodes = hud.ui.experimentalOutputNode.querySelectorAll( + ".message .new-consoletable"); + + is(consoleTableNodes.length, testCases.length, + "console has the expected number of consoleTable items"); + + testCases.forEach((testCase, index) => { + info(testCase.info); + + let node = nodes[index]; + let columns = Array.from(node.querySelectorAll("thead th")); + let rows = Array.from(node.querySelectorAll("tbody tr")); + + is( + JSON.stringify(testCase.expected.columns), + JSON.stringify(columns.map(column => column.textContent)), + "table has the expected columns" + ); + + is(testCase.expected.rows.length, rows.length, + "table has the expected number of rows"); + + testCase.expected.rows.forEach((expectedRow, rowIndex) => { + let row = rows[rowIndex]; + let cells = row.querySelectorAll("td"); + is(expectedRow.length, cells.length, "row has the expected number of cells"); + + expectedRow.forEach((expectedCell, cellIndex) => { + let cell = cells[cellIndex]; + is(expectedCell, cell.textContent, "cell has the expected content"); + }); + }); + }); +}); + +function findConsoleTable(node, index) { + let condition = node.querySelector( + `.message:nth-of-type(${index + 1}) .new-consoletable`); + return condition; +} diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters.js new file mode 100644 index 000000000..8eb536926 --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_filters.js @@ -0,0 +1,72 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Tests filters. + +"use strict"; + +const { MESSAGE_LEVEL } = require("devtools/client/webconsole/new-console-output/constants"); + +const TEST_URI = "http://example.com/browser/devtools/client/webconsole/new-console-output/test/mochitest/test-console-filters.html"; + +add_task(function* () { + let hud = yield openNewTabAndConsole(TEST_URI); + const outputNode = hud.ui.experimentalOutputNode; + + const toolbar = yield waitFor(() => { + return outputNode.querySelector(".webconsole-filterbar-primary"); + }); + ok(toolbar, "Toolbar found"); + + // Show the filter bar + toolbar.querySelector(".devtools-filter-icon").click(); + const filterBar = yield waitFor(() => { + return outputNode.querySelector(".webconsole-filterbar-secondary"); + }); + ok(filterBar, "Filter bar is shown when filter icon is clicked."); + + // Check defaults. + Object.values(MESSAGE_LEVEL).forEach(level => { + ok(filterIsEnabled(filterBar.querySelector(`.${level}`)), + `Filter button for ${level} is on by default`); + }); + ["net", "netxhr"].forEach(category => { + ok(!filterIsEnabled(filterBar.querySelector(`.${category}`)), + `Filter button for ${category} is off by default`); + }); + + // Check that messages are shown as expected. This depends on cached messages being + // shown. + ok(findMessages(hud, "").length == 5, + "Messages of all levels shown when filters are on."); + + // Check that messages are not shown when their filter is turned off. + filterBar.querySelector(".error").click(); + yield waitFor(() => findMessages(hud, "").length == 4); + ok(true, "When a filter is turned off, its messages are not shown."); + + // Check that the ui settings were persisted. + yield closeTabAndToolbox(); + yield testFilterPersistence(); +}); + +function filterIsEnabled(button) { + return button.classList.contains("checked"); +} + +function* testFilterPersistence() { + let hud = yield openNewTabAndConsole(TEST_URI); + const outputNode = hud.ui.experimentalOutputNode; + const filterBar = yield waitFor(() => { + return outputNode.querySelector(".webconsole-filterbar-secondary"); + }); + ok(filterBar, "Filter bar ui setting is persisted."); + + // Check that the filter settings were persisted. + ok(!filterIsEnabled(filterBar.querySelector(".error")), + "Filter button setting is persisted"); + ok(findMessages(hud, "").length == 4, + "Messages of all levels shown when filters are on."); +} diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_init.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_init.js new file mode 100644 index 000000000..4280270dd --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_init.js @@ -0,0 +1,35 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = "http://example.com/browser/devtools/client/webconsole/new-console-output/test/mochitest/test-console.html"; + +add_task(function* () { + let toolbox = yield openNewTabAndToolbox(TEST_URI, "webconsole"); + let hud = toolbox.getCurrentPanel().hud; + let {ui} = hud; + + ok(ui.jsterm, "jsterm exists"); + ok(ui.newConsoleOutput, "newConsoleOutput exists"); + + // @TODO: fix proptype errors + let receievedMessages = waitForMessages({ + hud, + messages: [{ + text: '0', + }, { + text: '1', + }, { + text: '2', + }], + }); + + yield ContentTask.spawn(gBrowser.selectedBrowser, {}, function() { + content.wrappedJSObject.doLogs(3); + }); + + yield receievedMessages; +}); diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_focus.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_focus.js new file mode 100644 index 000000000..7660df238 --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_input_focus.js @@ -0,0 +1,57 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Tests that the input field is focused when the console is opened. + +"use strict"; + +const TEST_URI = + `data:text/html;charset=utf-8,Test input focused + <script> + console.log("console message 1"); + </script>`; + +add_task(function* () { + let hud = yield openNewTabAndConsole(TEST_URI); + hud.jsterm.clearOutput(); + + let inputNode = hud.jsterm.inputNode; + ok(inputNode.getAttribute("focused"), "input node is focused after output is cleared"); + + ContentTask.spawn(gBrowser.selectedBrowser, {}, function* () { + content.wrappedJSObject.console.log("console message 2"); + }); + let msg = yield waitFor(() => findMessage(hud, "console message 2")); + let outputItem = msg.querySelector(".message-body"); + + inputNode = hud.jsterm.inputNode; + ok(inputNode.getAttribute("focused"), "input node is focused, first"); + + yield waitForBlurredInput(inputNode); + + EventUtils.sendMouseEvent({type: "click"}, hud.outputNode); + ok(inputNode.getAttribute("focused"), "input node is focused, second time"); + + yield waitForBlurredInput(inputNode); + + info("Setting a text selection and making sure a click does not re-focus"); + let selection = hud.iframeWindow.getSelection(); + selection.selectAllChildren(outputItem); + + EventUtils.sendMouseEvent({type: "click"}, hud.outputNode); + ok(!inputNode.getAttribute("focused"), + "input node focused after text is selected"); +}); + +function waitForBlurredInput(inputNode) { + return new Promise(resolve => { + let lostFocus = () => { + ok(!inputNode.getAttribute("focused"), "input node is not focused"); + resolve(); + }; + inputNode.addEventListener("blur", lostFocus, { once: true }); + document.getElementById("urlbar").click(); + }); +} diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_keyboard_accessibility.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_keyboard_accessibility.js new file mode 100644 index 000000000..1038194b9 --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_keyboard_accessibility.js @@ -0,0 +1,71 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Check that basic keyboard shortcuts work in the web console. + +"use strict"; + +const TEST_URI = + `data:text/html;charset=utf-8,<p>Test keyboard accessibility</p> + <script> + for (let i = 1; i <= 100; i++) { + console.log("console message " + i); + } + </script> + `; + +add_task(function* () { + let hud = yield openNewTabAndConsole(TEST_URI); + info("Web Console opened"); + + const outputScroller = hud.ui.outputScroller; + + yield waitFor(() => findMessages(hud, "").length == 100); + + let currentPosition = outputScroller.scrollTop; + const bottom = currentPosition; + + EventUtils.sendMouseEvent({type: "click"}, hud.jsterm.inputNode); + + // Page up. + EventUtils.synthesizeKey("VK_PAGE_UP", {}); + isnot(outputScroller.scrollTop, currentPosition, + "scroll position changed after page up"); + + // Page down. + currentPosition = outputScroller.scrollTop; + EventUtils.synthesizeKey("VK_PAGE_DOWN", {}); + ok(outputScroller.scrollTop > currentPosition, + "scroll position now at bottom"); + + // Home + EventUtils.synthesizeKey("VK_HOME", {}); + is(outputScroller.scrollTop, 0, "scroll position now at top"); + + // End + EventUtils.synthesizeKey("VK_END", {}); + let scrollTop = outputScroller.scrollTop; + ok(scrollTop > 0 && Math.abs(scrollTop - bottom) <= 5, + "scroll position now at bottom"); + + // Clear output + info("try ctrl-l to clear output"); + let clearShortcut; + if (Services.appinfo.OS === "Darwin") { + clearShortcut = WCUL10n.getStr("webconsole.clear.keyOSX"); + } else { + clearShortcut = WCUL10n.getStr("webconsole.clear.key"); + } + synthesizeKeyShortcut(clearShortcut); + yield waitFor(() => findMessages(hud, "").length == 0); + is(hud.jsterm.inputNode.getAttribute("focused"), "true", "jsterm input is focused"); + + // Focus filter + info("try ctrl-f to focus filter"); + synthesizeKeyShortcut(WCUL10n.getStr("webconsole.find.key")); + ok(!hud.jsterm.inputNode.getAttribute("focused"), "jsterm input is not focused"); + is(hud.ui.filterBox, outputScroller.ownerDocument.activeElement, + "filter input is focused"); +}); diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_observer_notifications.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_observer_notifications.js new file mode 100644 index 000000000..5225a6ac1 --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_observer_notifications.js @@ -0,0 +1,47 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = "data:text/html;charset=utf-8,<p>Web Console test for " + + "obeserver notifications"; + +let created = false; +let destroyed = false; + +add_task(function* () { + setupObserver(); + yield openNewTabAndConsole(TEST_URI); + yield waitFor(() => created); + + yield closeTabAndToolbox(gBrowser.selectedTab); + yield waitFor(() => destroyed); +}); + +function setupObserver() { + const observer = { + QueryInterface: XPCOMUtils.generateQI([Ci.nsIObserver]), + + observe: function observe(subject, topic) { + subject = subject.QueryInterface(Ci.nsISupportsString); + + switch (topic) { + case "web-console-created": + ok(HUDService.getHudReferenceById(subject.data), "We have a hud reference"); + Services.obs.removeObserver(observer, "web-console-created"); + created = true; + break; + case "web-console-destroyed": + ok(!HUDService.getHudReferenceById(subject.data), "We do not have a hud reference"); + Services.obs.removeObserver(observer, "web-console-destroyed"); + destroyed = true; + break; + } + }, + }; + + Services.obs.addObserver(observer, "web-console-created", false); + Services.obs.addObserver(observer, "web-console-destroyed", false); +} diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_vview_close_on_esc_key.js b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_vview_close_on_esc_key.js new file mode 100644 index 000000000..712a990b4 --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_vview_close_on_esc_key.js @@ -0,0 +1,46 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +// Check that the variables view sidebar can be closed by pressing Escape in the +// web console. + +"use strict"; + +const TEST_URI = + "data:text/html;charset=utf8,<script>let fooObj = {testProp: 'testValue'}</script>"; + +add_task(function* () { + let hud = yield openNewTabAndConsole(TEST_URI); + let jsterm = hud.jsterm; + let vview; + + yield openSidebar("fooObj", 'testProp: "testValue"'); + vview.window.focus(); + + let sidebarClosed = jsterm.once("sidebar-closed"); + EventUtils.synthesizeKey("VK_ESCAPE", {}); + yield sidebarClosed; + + function* openSidebar(objName, expectedText) { + yield jsterm.execute(objName); + info("JSTerm executed"); + + let msg = yield waitFor(() => findMessage(hud, "Object")); + ok(msg, "Message found"); + + let anchor = msg.querySelector("a"); + let body = msg.querySelector(".message-body"); + ok(anchor, "object anchor"); + ok(body, "message body"); + ok(body.textContent.includes(expectedText), "message text check"); + + msg.scrollIntoView(); + yield EventUtils.synthesizeMouse(anchor, 2, 2, {}, hud.iframeWindow); + + let vviewVar = yield jsterm.once("variablesview-fetched"); + vview = vviewVar._variablesView; + ok(vview, "variables view object exists"); + } +}); diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/head.js b/devtools/client/webconsole/new-console-output/test/mochitest/head.js new file mode 100644 index 000000000..b71eaec4f --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/head.js @@ -0,0 +1,137 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ +/* import-globals-from ../../../../framework/test/shared-head.js */ + +"use strict"; + +// shared-head.js handles imports, constants, and utility functions +// Load the shared-head file first. +Services.scriptloader.loadSubScript( + "chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js", + this); + +var {Utils: WebConsoleUtils} = require("devtools/client/webconsole/utils"); +const WEBCONSOLE_STRINGS_URI = "devtools/client/locales/webconsole.properties"; +var WCUL10n = new WebConsoleUtils.L10n(WEBCONSOLE_STRINGS_URI); + +Services.prefs.setBoolPref("devtools.webconsole.new-frontend-enabled", true); +registerCleanupFunction(function* () { + Services.prefs.clearUserPref("devtools.webconsole.new-frontend-enabled"); + + let browserConsole = HUDService.getBrowserConsole(); + if (browserConsole) { + if (browserConsole.jsterm) { + browserConsole.jsterm.clearOutput(true); + } + yield HUDService.toggleBrowserConsole(); + } +}); + +/** + * Add a new tab and open the toolbox in it, and select the webconsole. + * + * @param string url + * The URL for the tab to be opened. + * @return Promise + * Resolves when the tab has been added, loaded and the toolbox has been opened. + * Resolves to the toolbox. + */ +var openNewTabAndConsole = Task.async(function* (url) { + let toolbox = yield openNewTabAndToolbox(TEST_URI, "webconsole"); + let hud = toolbox.getCurrentPanel().hud; + hud.jsterm._lazyVariablesView = false; + return hud; +}); + +/** + * Wait for messages in the web console output, resolving once they are receieved. + * + * @param object options + * - hud: the webconsole + * - messages: Array[Object]. An array of messages to match. Current supported options: + * - text: Exact text match in .message-body + */ +function waitForMessages({ hud, messages }) { + return new Promise(resolve => { + let numMatched = 0; + let receivedLog = hud.ui.on("new-messages", function messagesReceieved(e, newMessages) { + for (let message of messages) { + if (message.matched) { + continue; + } + + for (let newMessage of newMessages) { + if (newMessage.node.querySelector(".message-body").textContent == message.text) { + numMatched++; + message.matched = true; + info("Matched a message with text: " + message.text + ", still waiting for " + (messages.length - numMatched) + " messages"); + break; + } + } + + if (numMatched === messages.length) { + hud.ui.off("new-messages", messagesReceieved); + resolve(receivedLog); + return; + } + } + }); + }); +} + +/** + * Wait for a predicate to return a result. + * + * @param function condition + * Invoked once in a while until it returns a truthy value. This should be an + * idempotent function, since we have to run it a second time after it returns + * true in order to return the value. + * @param string message [optional] + * A message to output if the condition failes. + * @param number interval [optional] + * How often the predicate is invoked, in milliseconds. + * @return object + * A promise that is resolved with the result of the condition. + */ +function* waitFor(condition, message = "waitFor", interval = 10, maxTries = 500) { + return new Promise(resolve => { + BrowserTestUtils.waitForCondition(condition, message, interval, maxTries) + .then(() => resolve(condition())); + }); +} + +/** + * Find a message in the output. + * + * @param object hud + * The web console. + * @param string text + * A substring that can be found in the message. + * @param selector [optional] + * The selector to use in finding the message. + */ +function findMessage(hud, text, selector = ".message") { + const elements = findMessages(hud, text, selector); + return elements.pop(); +} + +/** + * Find multiple messages in the output. + * + * @param object hud + * The web console. + * @param string text + * A substring that can be found in the message. + * @param selector [optional] + * The selector to use in finding the message. + */ +function findMessages(hud, text, selector = ".message") { + const messages = hud.ui.experimentalOutputNode.querySelectorAll(selector); + const elements = Array.prototype.filter.call( + messages, + (el) => el.textContent.includes(text) + ); + return elements; +} diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/test-batching.html b/devtools/client/webconsole/new-console-output/test/mochitest/test-batching.html new file mode 100644 index 000000000..9d122387a --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/test-batching.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Webconsole batch console calls test page</title> + </head> + <body> + <p>batch console calls test page</p> + <script> + "use strict"; + + function batchLog(numMessages = 0) { + for (let i = 0; i < numMessages; i++) { + console.log(i); + } + } + + function batchLogAndClear(numMessages = 0) { + for (let i = 0; i < numMessages; i++) { + console.log(i); + if (i === numMessages - 1) { + console.clear(); + } + } + } + </script> + </body> +</html> diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/test-console-filters.html b/devtools/client/webconsole/new-console-output/test/mochitest/test-console-filters.html new file mode 100644 index 000000000..293421549 --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/test-console-filters.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Webconsole filters test page</title> + </head> + <body> + <p>Webconsole filters test page</p> + <script> + console.log("console log"); + console.warn("console warn"); + console.error("console error"); + console.info("console info"); + console.count("console debug"); + </script> + </body> +</html> diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/test-console-group.html b/devtools/client/webconsole/new-console-output/test/mochitest/test-console-group.html new file mode 100644 index 000000000..47373d3b9 --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/test-console-group.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Webconsole console.group test page</title> + </head> + <body> + <p>console.group() & console.groupCollapsed() test page</p> + <script> + "use strict"; + + function doLog() { + console.group("group-1"); + console.log("log-1"); + console.group("group-2"); + console.log("log-2"); + console.groupEnd("group-2"); + console.log("log-3"); + console.groupEnd("group-1"); + console.log("log-4"); + console.groupCollapsed("group-3"); + console.log("log-5"); + console.groupEnd("group-3"); + console.log("log-6"); + } + </script> + </body> +</html> diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/test-console-table.html b/devtools/client/webconsole/new-console-output/test/mochitest/test-console-table.html new file mode 100644 index 000000000..b7666e50b --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/test-console-table.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Simple webconsole test page</title> + </head> + <body> + <p>console.table() test page</p> + <script> + function doConsoleTable(data, constrainedHeaders = null) { + if (constrainedHeaders) { + console.table(data, constrainedHeaders); + } else { + console.table(data); + } + } + </script> + </body> +</html> diff --git a/devtools/client/webconsole/new-console-output/test/mochitest/test-console.html b/devtools/client/webconsole/new-console-output/test/mochitest/test-console.html new file mode 100644 index 000000000..7ef09d9a1 --- /dev/null +++ b/devtools/client/webconsole/new-console-output/test/mochitest/test-console.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Simple webconsole test page</title> + </head> + <body> + <p>Simple webconsole test page</p> + <script> + function doLogs(num) { + num = num || 1; + for (var i = 0; i < num; i++) { + console.log(i); + } + } + </script> + </body> +</html> |