diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/netmonitor/test/browser_net_columns_showhide.js | 181 |
1 files changed, 181 insertions, 0 deletions
diff --git a/devtools/client/netmonitor/test/browser_net_columns_showhide.js b/devtools/client/netmonitor/test/browser_net_columns_showhide.js new file mode 100644 index 0000000000..7213d2c5f7 --- /dev/null +++ b/devtools/client/netmonitor/test/browser_net_columns_showhide.js @@ -0,0 +1,181 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/** + * Test showing/hiding columns. + */ +add_task(async function () { + const { monitor } = await initNetMonitor(HTTPS_SIMPLE_URL, { + requestCount: 1, + }); + info("Starting test... "); + + const { document, store, connector, windowRequire } = monitor.panelWin; + const { requestData } = connector; + const { getSortedRequests } = windowRequire( + "devtools/client/netmonitor/src/selectors/index" + ); + + const wait = waitForNetworkEvents(monitor, 1); + await navigateTo(HTTPS_SIMPLE_URL); + await wait; + + const item = getSortedRequests(store.getState())[0]; + ok( + item.responseHeadersAvailable, + "headers are available for lazily fetching" + ); + + if (item.responseHeadersAvailable && !item.responseHeaders) { + await requestData(item.id, "responseHeaders"); + } + + const requestsContainer = document.querySelector(".requests-list-row-group"); + ok(requestsContainer, "Container element exists as expected."); + const headers = document.querySelector(".requests-list-headers"); + + let columns = store.getState().ui.columns; + for (const column in columns) { + if (columns[column]) { + await testVisibleColumnContextMenuItem(column, document, monitor); + testColumnsAlignment(headers, requestsContainer); + await testHiddenColumnContextMenuItem(column, document, monitor); + } else { + await testHiddenColumnContextMenuItem(column, document, monitor); + testColumnsAlignment(headers, requestsContainer); + await testVisibleColumnContextMenuItem(column, document, monitor); + } + } + + columns = store.getState().ui.columns; + for (const column in columns) { + if (columns[column]) { + await testVisibleColumnContextMenuItem(column, document, monitor); + // Right click on the white-space for the context menu to appear + // and toggle column visibility + await testWhiteSpaceContextMenuItem(column, document, monitor); + } + } +}); + +async function testWhiteSpaceContextMenuItem(column, document, monitor) { + ok( + !document.querySelector(`#requests-list-${column}-button`), + `Column ${column} should be hidden` + ); + + info(`Right clicking on white-space in the header to get the context menu`); + EventUtils.sendMouseEvent( + { type: "contextmenu" }, + document.querySelector(".requests-list-headers") + ); + + // Wait for next tick to do stuff async and force repaint. + await waitForTick(); + await toggleAndCheckColumnVisibility(column, document, monitor); +} + +async function testVisibleColumnContextMenuItem(column, document, monitor) { + ok( + document.querySelector(`#requests-list-${column}-button`), + `Column ${column} should be visible` + ); + + info(`Clicking context-menu item for ${column}`); + + EventUtils.sendMouseEvent( + { type: "contextmenu" }, + document.querySelector("#requests-list-status-button") || + document.querySelector("#requests-list-waterfall-button") + ); + + await waitForTick(); + + const id = `request-list-header-${column}-toggle`; + const menuItem = getContextMenuItem(monitor, id); + + is( + menuItem.getAttribute("type"), + "checkbox", + `${column} menu item should have type="checkbox" attribute` + ); + is( + menuItem.getAttribute("checked"), + "true", + `checked state of ${column} menu item should be correct` + ); + ok( + !menuItem.disabled, + `disabled state of ${column} menu item should be correct` + ); + + const onHeaderRemoved = waitForDOM( + document, + `#requests-list-${column}-button`, + 0 + ); + + await selectContextMenuItem(monitor, id); + + await onHeaderRemoved; + await waitForTick(); + + ok( + !document.querySelector(`#requests-list-${column}-button`), + `Column ${column} should be hidden` + ); +} + +async function testHiddenColumnContextMenuItem(column, document, monitor) { + ok( + !document.querySelector(`#requests-list-${column}-button`), + `Column ${column} should be hidden` + ); + + info(`Clicking context-menu item for ${column}`); + EventUtils.sendMouseEvent( + { type: "contextmenu" }, + document.querySelector("#requests-list-status-button") || + document.querySelector("#requests-list-waterfall-button") + ); + + await waitForTick(); + await toggleAndCheckColumnVisibility(column, document, monitor); +} + +async function toggleAndCheckColumnVisibility(column, document, monitor) { + const id = `request-list-header-${column}-toggle`; + const menuItem = getContextMenuItem(monitor, id); + + is( + menuItem.getAttribute("type"), + "checkbox", + `${column} menu item should have type="checkbox" attribute` + ); + ok( + !menuItem.getAttribute("checked"), + `checked state of ${column} menu item should be correct` + ); + ok( + !menuItem.disabled, + `disabled state of ${column} menu item should be correct` + ); + + const onHeaderAdded = waitForDOM( + document, + `#requests-list-${column}-button`, + 1 + ); + + await selectContextMenuItem(monitor, id); + + await onHeaderAdded; + await waitForTick(); + + ok( + document.querySelector(`#requests-list-${column}-button`), + `Column ${column} should be visible` + ); +} |