Bug 1353380 - Add tests for hiding/showing columns. r=rickychien
MozReview-Commit-ID: 6kPgCYsmCMN
--- a/devtools/client/netmonitor/src/request-list-header-context-menu.js
+++ b/devtools/client/netmonitor/src/request-list-header-context-menu.js
@@ -30,28 +30,30 @@ class RequestListHeaderContextMenu {
* Handle the context menu opening.
*/
open({ screenX = 0, screenY = 0 } = {}) {
let menu = new Menu();
let onlyOneColumn = this.visibleColumns.length === 1;
for (let [column, shown] of this.columns) {
menu.append(new MenuItem({
+ id: `request-list-header-${column}-toggle`,
label: L10N.getStr(`netmonitor.toolbar.${stringMap[column] || column}`),
type: "checkbox",
checked: shown,
click: () => this.toggleColumn(column),
// We don't want to allow hiding the last visible column
disabled: onlyOneColumn && shown,
}));
}
menu.append(new MenuItem({ type: "separator" }));
menu.append(new MenuItem({
+ id: "request-list-header-reset-columns",
label: L10N.getStr("netmonitor.toolbar.resetColumns"),
click: () => this.resetColumns(),
}));
menu.popup(screenX, screenY, { doc: window.parent.document });
return menu;
}
}
--- a/devtools/client/netmonitor/test/browser.ini
+++ b/devtools/client/netmonitor/test/browser.ini
@@ -64,16 +64,20 @@ skip-if = (toolkit == "cocoa" && e10s) #
[browser_net_charts-01.js]
[browser_net_charts-02.js]
[browser_net_charts-03.js]
[browser_net_charts-04.js]
[browser_net_charts-05.js]
[browser_net_charts-06.js]
[browser_net_charts-07.js]
[browser_net_clear.js]
+[browser_net_columns_last_column.js]
+[browser_net_columns_pref.js]
+[browser_net_columns_reset.js]
+[browser_net_columns_showhide.js]
[browser_net_complex-params.js]
[browser_net_content-type.js]
[browser_net_brotli.js]
[browser_net_curl-utils.js]
[browser_net_copy_image_as_data_uri.js]
subsuite = clipboard
skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32 debug devtools for timeouts
[browser_net_copy_svg_image_as_data_uri.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_columns_last_column.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests that last visible column can't be hidden
+ */
+
+add_task(function* () {
+ let { monitor } = yield initNetMonitor(SIMPLE_URL);
+ info("Starting test... ");
+
+ let { document, gStore, parent } = monitor.panelWin;
+
+ for (let [column, shown] of gStore.getState().ui.columns) {
+ let visibleColumns = [...gStore.getState().ui.columns]
+ .filter(([_, visible]) => visible);
+
+ if (visibleColumns.length === 1) {
+ yield testLastMenuItem(column);
+ break;
+ }
+
+ if (shown) {
+ yield hideColumn(column);
+ }
+ }
+
+ yield teardown(monitor);
+
+ function* hideColumn(column) {
+ info(`Clicking context-menu item for ${column}`);
+ EventUtils.sendMouseEvent({ type: "contextmenu" },
+ document.querySelector("#requests-list-status-button") ||
+ document.querySelector("#requests-list-waterfall-button"));
+
+ let onHeaderRemoved = waitForDOM(document, `#requests-list-${column}-button`, 0);
+ parent.document.querySelector(`#request-list-header-${column}-toggle`).click();
+
+ yield onHeaderRemoved;
+ ok(!document.querySelector(`#requests-list-${column}-button`),
+ `Column ${column} should be hidden`);
+ }
+
+ function* testLastMenuItem(column) {
+ EventUtils.sendMouseEvent({ type: "contextmenu" },
+ document.querySelector(`#requests-list-${column}-button`));
+
+ let menuItem = parent.document.querySelector(`#request-list-header-${column}-toggle`);
+ ok(menuItem.disabled, "Last visible column menu item should be disabled.");
+ }
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_columns_pref.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests if hidden columns are properly saved
+ */
+
+add_task(function* () {
+ Services.prefs.setCharPref("devtools.netmonitor.hiddenColumns",
+ '["status", "contentSize"]');
+
+ let { monitor } = yield initNetMonitor(SIMPLE_URL);
+ info("Starting test... ");
+
+ let { document, windowRequire, parent } = monitor.panelWin;
+
+ ok(!document.querySelector("#requests-list-status-button"),
+ "Status column should be hidden");
+ ok(!document.querySelector("#requests-list-contentSize-button"),
+ "Content size column should be hidden");
+
+ let { Prefs } = windowRequire("devtools/client/netmonitor/src/utils/prefs");
+
+ yield showColumn("status");
+ yield showColumn("contentSize");
+
+ ok(!Prefs.hiddenColumns.includes("status"), "Pref should be synced for status");
+ ok(!Prefs.hiddenColumns.includes("contentSize"),
+ "Pref should be synced for contentSize");
+
+ yield hideColumn("status");
+
+ ok(Prefs.hiddenColumns.includes("status"), "Pref should be synced for status");
+
+ yield showColumn("status");
+
+ function* hideColumn(column) {
+ info(`Clicking context-menu item for ${column}`);
+ EventUtils.sendMouseEvent({ type: "contextmenu" },
+ document.querySelector("#requests-list-status-button") ||
+ document.querySelector("#requests-list-waterfall-button"));
+
+ let onHeaderRemoved = waitForDOM(document, `#requests-list-${column}-button`, 0);
+ parent.document.querySelector(`#request-list-header-${column}-toggle`).click();
+
+ yield onHeaderRemoved;
+ ok(!document.querySelector(`#requests-list-${column}-button`),
+ `Column ${column} should be hidden`);
+ }
+
+ function* showColumn(column) {
+ info(`Clicking context-menu item for ${column}`);
+ EventUtils.sendMouseEvent({ type: "contextmenu" },
+ document.querySelector("#requests-list-status-button") ||
+ document.querySelector("#requests-list-waterfall-button"));
+
+ let onHeaderAdded = waitForDOM(document, `#requests-list-${column}-button`, 1);
+ parent.document.querySelector(`#request-list-header-${column}-toggle`).click();
+
+ yield onHeaderAdded;
+ ok(document.querySelector(`#requests-list-${column}-button`),
+ `Column ${column} should be visible`);
+ }
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_columns_reset.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests reset column menu item
+ */
+
+add_task(function* () {
+ let { monitor } = yield initNetMonitor(SIMPLE_URL);
+ info("Starting test... ");
+
+ let { document, parent, windowRequire } = monitor.panelWin;
+ let { Prefs } = windowRequire("devtools/client/netmonitor/src/utils/prefs");
+
+ let prefBefore = Prefs.hiddenColumns;
+
+ hideColumn("status");
+ hideColumn("waterfall");
+
+ EventUtils.sendMouseEvent({ type: "contextmenu" },
+ document.querySelector("#requests-list-contentSize-button"));
+
+ parent.document.querySelector("#request-list-header-reset-columns").click();
+
+ is(JSON.stringify(prefBefore), JSON.stringify(Prefs.hiddenColumns),
+ "Reset columns item should reset columns pref");
+
+ function* hideColumn(column) {
+ info(`Clicking context-menu item for ${column}`);
+ EventUtils.sendMouseEvent({ type: "contextmenu" },
+ document.querySelector("#requests-list-contentSize-button"));
+
+ let onHeaderRemoved = waitForDOM(document, `#requests-list-${column}-button`, 0);
+ parent.document.querySelector(`#request-list-header-${column}-toggle`).click();
+
+ yield onHeaderRemoved;
+ ok(!document.querySelector(`#requests-list-${column}-button`),
+ `Column ${column} should be hidden`);
+ }
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/test/browser_net_columns_showhide.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test showing/hiding columns.
+ */
+
+add_task(function* () {
+ let { monitor } = yield initNetMonitor(SIMPLE_URL);
+ info("Starting test... ");
+
+ let { document, gStore, parent } = monitor.panelWin;
+
+ for (let [column, shown] of gStore.getState().ui.columns) {
+ if (shown) {
+ yield testVisibleColumnContextMenuItem(column, document, parent);
+ yield testHiddenColumnContextMenuItem(column, document, parent);
+ } else {
+ yield testHiddenColumnContextMenuItem(column, document, parent);
+ yield testVisibleColumnContextMenuItem(column, document, parent);
+ }
+ }
+});
+
+function* testVisibleColumnContextMenuItem(column, document, parent) {
+ 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"));
+
+ let menuItem = parent.document.querySelector(`#request-list-header-${column}-toggle`);
+
+ 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`);
+
+ let onHeaderRemoved = waitForDOM(document, `#requests-list-${column}-button`, 0);
+ menuItem.click();
+
+ yield onHeaderRemoved;
+
+ ok(!document.querySelector(`#requests-list-${column}-button`),
+ `Column ${column} should be hidden`);
+}
+
+function* testHiddenColumnContextMenuItem(column, document, parent) {
+ 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"));
+
+ let menuItem = parent.document.querySelector(`#request-list-header-${column}-toggle`);
+
+ 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`);
+
+ let onHeaderAdded = waitForDOM(document, `#requests-list-${column}-button`, 1);
+ menuItem.click();
+
+ yield onHeaderAdded;
+
+ ok(document.querySelector(`#requests-list-${column}-button`),
+ `Column ${column} should be visible`);
+}