diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /devtools/client/netmonitor/test/browser_net_ws-json-action-cable-payload.js | |
parent | Initial commit. (diff) | |
download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/netmonitor/test/browser_net_ws-json-action-cable-payload.js')
-rw-r--r-- | devtools/client/netmonitor/test/browser_net_ws-json-action-cable-payload.js | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/test/browser_net_ws-json-action-cable-payload.js b/devtools/client/netmonitor/test/browser_net_ws-json-action-cable-payload.js new file mode 100644 index 0000000000..7ad45a2030 --- /dev/null +++ b/devtools/client/netmonitor/test/browser_net_ws-json-action-cable-payload.js @@ -0,0 +1,109 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Test that WebSocket payloads containing action cable messages are parsed + * correctly and displayed in a user friendly way + */ + +add_task(async function () { + const { tab, monitor } = await initNetMonitor(WS_PAGE_URL, { + requestCount: 1, + }); + info("Starting test... "); + + const { document, store, windowRequire } = monitor.panelWin; + const Actions = windowRequire("devtools/client/netmonitor/src/actions/index"); + + store.dispatch(Actions.batchEnable(false)); + + // Wait for WS connections to be established + send messages + const onNetworkEvents = waitForNetworkEvents(monitor, 1); + await SpecialPowers.spawn(tab.linkedBrowser, [], async () => { + await content.wrappedJSObject.openConnection(0); + content.wrappedJSObject.sendData(`{"data":"{\\"x\\":2}"}`); + }); + await onNetworkEvents; + + const requests = document.querySelectorAll(".request-list-item"); + is(requests.length, 1, "There should be one request"); + + // Wait for all sent/received messages to be displayed in DevTools + let wait = waitForDOM( + document, + "#messages-view .message-list-table .message-list-item", + 2 + ); + + // Select the first request + EventUtils.sendMouseEvent({ type: "mousedown" }, requests[0]); + + // Click on the "Response" panel + await clickOnSidebarTab(document, "response"); + await wait; + + // Get all messages present in the "Response" panel + const frames = document.querySelectorAll( + "#messages-view .message-list-table .message-list-item" + ); + + // Check expected results + is(frames.length, 2, "There should be two frames"); + + // Wait for next tick to do async stuff (The MessagePayload component uses the async function getMessagePayload) + await waitForTick(); + const waitForData = waitForDOM(document, "#messages-view .properties-view"); + const [requestFrame] = frames; + EventUtils.sendMouseEvent({ type: "mousedown" }, requestFrame); + + await waitForData; + + is( + document.querySelector("#messages-view .data-label").innerText, + "Action Cable", + "The Action Cable payload panel should be displayed" + ); + + ok( + document.querySelector("#messages-view .treeTable"), + "A tree table should be used to display the formatted payload" + ); + + ok( + document.getElementById("/data"), + "The 'data' property should be displayed" + ); + ok( + document.getElementById("/data/x"), + "The 'x' property in the 'data' object should be displayed" + ); + + // Toggle raw data display + wait = waitForDOM(document, "#messages-view .message-rawData-payload"); + const rawDataToggle = document.querySelector( + "#messages-view .devtools-checkbox-toggle" + ); + clickElement(rawDataToggle, monitor); + await wait; + + is( + document.querySelector("#messages-view .data-label").innerText, + "Raw Data (20 B)", + "The raw data payload info should be displayed" + ); + + is( + document.querySelector("#messages-view .message-rawData-payload").value, + `{"data":"{\\"x\\":2}"}`, + "The raw data must be shown correctly" + ); + + // Close WS connection + await SpecialPowers.spawn(tab.linkedBrowser, [], async () => { + await content.wrappedJSObject.closeConnection(); + }); + + await teardown(monitor); +}); |