diff options
Diffstat (limited to 'devtools/client/webconsole/test/browser/browser_webconsole_custom_formatters.js')
-rw-r--r-- | devtools/client/webconsole/test/browser/browser_webconsole_custom_formatters.js | 205 |
1 files changed, 205 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_custom_formatters.js b/devtools/client/webconsole/test/browser/browser_webconsole_custom_formatters.js new file mode 100644 index 0000000000..7fd026fe80 --- /dev/null +++ b/devtools/client/webconsole/test/browser/browser_webconsole_custom_formatters.js @@ -0,0 +1,205 @@ +/* Any copyright is dedicated to the Public Domain. + * http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Check display of custom formatters. +const TEST_URI = + "https://example.com/browser/devtools/client/webconsole/" + + "test/browser/test-console-custom-formatters.html"; + +add_task(async function () { + await pushPref("devtools.custom-formatters.enabled", true); + + const hud = await openNewTabAndConsole(TEST_URI); + + // Reload the browser to ensure the custom formatters are picked up + await reloadBrowser(); + + await testString(hud); + await testNumber(hud); + await testObjectWithoutFormatting(hud); + await testObjectWithFormattedHeader(hud); + await testObjectWithFormattedHeaderAndBody(hud); + await testCustomFormatterWithObjectTag(hud); + await testProxyObject(hud); +}); + +async function testString(hud) { + info("Test for string not being custom formatted"); + await testCustomFormatting(hud, { + hasCustomFormatter: false, + messageText: "string", + }); +} + +async function testNumber(hud) { + info("Test for number not being custom formatted"); + await testCustomFormatting(hud, { + hasCustomFormatter: false, + messageText: 1337, + }); +} + +async function testObjectWithoutFormatting(hud) { + info("Test for object not being custom formatted"); + await testCustomFormatting(hud, { + hasCustomFormatter: false, + messageText: "Object { noFormat: true }", + }); +} + +async function testObjectWithFormattedHeader(hud) { + info("Simple test for custom formatted header"); + await testCustomFormatting(hud, { + hasCustomFormatter: true, + messageText: "custom formatted header", + headerStyles: "font-size: 3rem;", + }); +} + +async function testObjectWithFormattedHeaderAndBody(hud) { + info("Simple test for custom formatted header with body"); + await testCustomFormatting(hud, { + hasCustomFormatter: true, + messageText: "custom formatted body", + headerStyles: "font-style: italic;", + bodyText: "body", + bodyStyles: "font-size: 2rem; font-family: serif;", + }); +} + +async function testCustomFormatterWithObjectTag(hud) { + info(`Test for custom formatted object with "object" tag in the jsonMl`); + const node = await waitFor(() => { + return findConsoleAPIMessage(hud, "object tag"); + }); + + const headerJsonMlNode = node.querySelector(".objectBox-jsonml"); + is( + headerJsonMlNode.getAttribute("style"), + "color: purple;", + "The custom formatting of the header is correct" + ); + const [buttonEl, child1, child2, child3, child4] = + headerJsonMlNode.childNodes; + is(child1.textContent, "object tag", "Got expected first item"); + is( + child2.textContent, + `~[1,"a"]~`, + "Got expected second item, the replaced object, custom formatted" + ); + ok( + child3.classList.contains("objectBox-null"), + "Got expected third item, an actual NullRep" + ); + is(child3.textContent, `null`, "third item has expected content"); + + is( + child4.textContent, + ` | serialized: 42n undefined null Infinity [object Object]`, + "Got expected fourth item, serialized values" + ); + + buttonEl.click(); + const bodyLevel1 = await waitFor(() => + node.querySelector(".objectBox-jsonml-body-wrapper .objectBox-jsonml") + ); + const [bodyChild1, bodyChild2] = bodyLevel1.childNodes; + is(bodyChild1.textContent, "body"); + + const bodyCustomFormattedChild = await waitFor(() => + bodyChild2.querySelector(".objectBox-jsonml") + ); + const [subButtonEl, subChild1, subChild2, subChild3] = + bodyCustomFormattedChild.childNodes; + ok(!!subButtonEl, "The body child can also be expanded"); + is(subChild1.textContent, "object tag", "Got expected first item"); + is( + subChild2.textContent, + `~[2,"b"]~`, + "Got expected body second item, the replaced object, custom formatted" + ); + ok( + subChild3.classList.contains("object-inspector"), + "Got expected body third item, an actual ObjectInspector" + ); + is( + subChild3.textContent, + `Array [ 2, "b" ]`, + "body third item has expected content" + ); +} + +async function testProxyObject(hud) { + info("Test that Proxy objects can be handled by custom formatter"); + await testCustomFormatting(hud, { + hasCustomFormatter: true, + messageText: "Formatted Proxy", + headerStyles: "font-weight: bold;", + }); +} + +async function testCustomFormatting( + hud, + { hasCustomFormatter, messageText, headerStyles, bodyText, bodyStyles } +) { + const node = await waitFor(() => { + return findMessageVirtualizedByType({ + hud, + text: messageText, + typeSelector: ".console-api", + }); + }); + + const headerJsonMlNode = node.querySelector(".objectBox-jsonml"); + if (hasCustomFormatter) { + ok(headerJsonMlNode, "The message is custom formatted"); + + if (!headerJsonMlNode) { + return; + } + + is( + headerJsonMlNode.getAttribute("style"), + headerStyles, + "The custom formatting of the header is correct" + ); + + if (bodyText) { + const arrow = node.querySelector(".collapse-button"); + + ok(arrow, "There must be a toggle arrow for the header"); + + info("Expanding the Object"); + const onBodyRendered = waitFor( + () => + !!node.querySelector( + ".objectBox-jsonml-body-wrapper .objectBox-jsonml" + ) + ); + + arrow.click(); + await onBodyRendered; + + ok( + node.querySelector(".collapse-button").classList.contains("expanded"), + "The arrow of the node has the expected class after clicking on it" + ); + + const bodyJsonMlNode = node.querySelector( + ".objectBox-jsonml-body-wrapper > .objectBox-jsonml" + ); + ok(bodyJsonMlNode, "The body is custom formatted"); + + is(bodyJsonMlNode?.textContent, bodyText, "The body text is correct"); + is( + bodyJsonMlNode.getAttribute("style"), + bodyStyles, + "The custom formatting of the body is correct" + ); + } + } else { + ok(!headerJsonMlNode, "The message is not custom formatted"); + } +} |