diff options
Diffstat (limited to 'devtools/client/webconsole/test/browser/browser_webconsole_context_menu_copy_message_with_framework_stacktrace.js')
-rw-r--r-- | devtools/client/webconsole/test/browser/browser_webconsole_context_menu_copy_message_with_framework_stacktrace.js | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_context_menu_copy_message_with_framework_stacktrace.js b/devtools/client/webconsole/test/browser/browser_webconsole_context_menu_copy_message_with_framework_stacktrace.js new file mode 100644 index 0000000000..66649020fb --- /dev/null +++ b/devtools/client/webconsole/test/browser/browser_webconsole_context_menu_copy_message_with_framework_stacktrace.js @@ -0,0 +1,132 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const httpServer = createTestHTTPServer(); +httpServer.registerPathHandler(`/`, function (request, response) { + response.setStatusLine(request.httpVersion, 200, "OK"); + response.write(` + <meta charset=utf8> + <h1>Test "copy message" context menu entry on message with framework stacktrace</h1> + <script type="text/javascript" src="react.js"></script> + <script type="text/javascript" src="test.js"></script>`); +}); + +httpServer.registerPathHandler("/test.js", function (_, response) { + response.setHeader("Content-Type", "application/javascript"); + response.write(` + window.myFunc = () => wrapper(); + const wrapper = () => console.trace("wrapperTrace"); + `); +}); + +httpServer.registerPathHandler("/react.js", function (_, response) { + response.setHeader("Content-Type", "application/javascript"); + response.write(` + window.render = function() { + const renderFinal = () => window.myFunc(); + renderFinal(); + }; + `); +}); + +const TEST_URI = `http://localhost:${httpServer.identity.primaryPort}/`; + +// Test the Copy menu item of the webconsole copies the expected clipboard text for +// a message with a "framework" stacktrace (i.e. with grouped frames). + +add_task(async function () { + const hud = await openNewTabAndConsole(TEST_URI); + + info("Call the log function defined in the test page"); + const onMessage = waitForMessageByType(hud, "wrapperTrace", ".console-api"); + await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { + content.wrappedJSObject.render(); + }); + const message = await onMessage; + const messageEl = message.node; + await waitFor(() => messageEl.querySelector(".frames")); + + let clipboardText = await copyMessageContent(hud, messageEl); + ok(true, "Clipboard text was found and saved"); + + const newLineString = "\n"; + info("Check copied text for the console.trace message"); + let lines = clipboardText.split(newLineString); + is(lines.length, 5, "Correct number of lines in the copied text"); + is(lines[lines.length - 1], "", "The last line is an empty new line"); + is( + lines[0], + `console.trace() wrapperTrace test.js:3:35`, + "Message first line has the expected text" + ); + is( + lines[1], + ` wrapper ${TEST_URI}test.js:3`, + "Stacktrace first line has the expected text" + ); + is( + lines[2], + ` myFunc ${TEST_URI}test.js:2`, + "Stacktrace second line has the expected text" + ); + is(lines[3], ` React 2`, "Stacktrace third line has the expected text"); + + info("Expand the React group"); + const getFrames = () => messageEl.querySelectorAll(".frame"); + const frames = getFrames().length; + messageEl.querySelector(".frames .group").click(); + // Let's wait until all React frames are displayed. + await waitFor(() => getFrames().length > frames); + + clipboardText = await copyMessageContent(hud, messageEl); + ok(true, "Clipboard text was found and saved"); + + info( + "Check copied text for the console.trace message with expanded React frames" + ); + lines = clipboardText.split(newLineString); + is(lines.length, 7, "Correct number of lines in the copied text"); + is(lines[lines.length - 1], "", "The last line is an empty new line"); + is( + lines[0], + `console.trace() wrapperTrace test.js:3:35`, + "Message first line has the expected text" + ); + is( + lines[1], + ` wrapper ${TEST_URI}test.js:3`, + "Stacktrace first line has the expected text" + ); + is( + lines[2], + ` myFunc ${TEST_URI}test.js:2`, + "Stacktrace second line has the expected text" + ); + is(lines[3], ` React 2`, "Stacktrace third line has the expected text"); + is( + lines[4], + ` renderFinal`, + "Stacktrace fourth line has the expected text" + ); + is(lines[5], ` render`, "Stacktrace fifth line has the expected text"); +}); + +/** + * Simple helper method to open the context menu on a given message, and click on the copy + * menu item. + */ +async function copyMessageContent(hud, messageEl) { + const menuPopup = await openContextMenu(hud, messageEl); + const copyMenuItem = menuPopup.querySelector("#console-menu-copy"); + ok(copyMenuItem, "copy menu item is enabled"); + + const text = await waitForClipboardPromise( + () => copyMenuItem.click(), + data => data + ); + + menuPopup.hidePopup(); + return text; +} |