Bug 1353380 - Add tests for hiding/showing columns. r=rickychien draft
authorTim Nguyen <ntim.bugs@gmail.com>
Wed, 05 Apr 2017 15:52:47 +0200
changeset 556151 71771e8c5c3bd0f5b2a9a42c9d539056d7cf462e
parent 556062 755052c137434b10b5bc5bd6017e6399d49d6921
child 622814 05457ec37cd045c0db4efe6b97a882232cb88a41
push id52470
push userbmo:ntim.bugs@gmail.com
push dateWed, 05 Apr 2017 13:53:07 +0000
reviewersrickychien
bugs1353380
milestone55.0a1
Bug 1353380 - Add tests for hiding/showing columns. r=rickychien MozReview-Commit-ID: 6kPgCYsmCMN
devtools/client/netmonitor/src/request-list-header-context-menu.js
devtools/client/netmonitor/test/browser.ini
devtools/client/netmonitor/test/browser_net_columns_last_column.js
devtools/client/netmonitor/test/browser_net_columns_pref.js
devtools/client/netmonitor/test/browser_net_columns_reset.js
devtools/client/netmonitor/test/browser_net_columns_showhide.js
--- 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`);
+}