Bug 1476395 - Add mochitests for the flexbox inspector sidebar. r=pbro
authorGabriel Luong <gabriel.luong@gmail.com>
Tue, 13 Nov 2018 14:02:49 -0500
changeset 502574 86005ec774e68a1dd584fe4f9d642170641f20d8
parent 502573 0d856ddbfc64419a01bad6bf673348e4d72469b7
child 502575 79148f9b36487274b734e30b48a18608e250cc99
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1476395
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1476395 - Add mochitests for the flexbox inspector sidebar. r=pbro
devtools/client/inspector/flexbox/test/browser.ini
devtools/client/inspector/flexbox/test/browser_flexbox_accordion_state.js
devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item.js
devtools/client/inspector/flexbox/test/browser_flexbox_container_element_rep.js
devtools/client/inspector/flexbox/test/browser_flexbox_empty_state.js
devtools/client/inspector/flexbox/test/browser_flexbox_item_list_01.js
devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js
devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_01.js
devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_02.js
devtools/client/inspector/flexbox/test/head.js
--- a/devtools/client/inspector/flexbox/test/browser.ini
+++ b/devtools/client/inspector/flexbox/test/browser.ini
@@ -12,25 +12,33 @@ support-files =
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/shared-head.js
   !/devtools/client/shared/test/shared-redux-head.js
   !/devtools/client/shared/test/telemetry-test-helpers.js
   !/devtools/client/shared/test/test-actor.js
   !/devtools/client/shared/test/test-actor-registry.js
 
+[browser_flexbox_accordion_state.js]
+[browser_flexbox_container_and_item.js]
+[browser_flexbox_container_element_rep.js]
+[browser_flexbox_empty_state.js]
 [browser_flexbox_highlighter_color_picker_on_ESC.js]
 [browser_flexbox_highlighter_color_picker_on_RETURN.js]
+[browser_flexbox_item_list_01.js]
+[browser_flexbox_item_list_02.js]
 [browser_flexbox_item_outline_exists.js]
 [browser_flexbox_item_outline_has_correct_layout.js]
 [browser_flexbox_item_outline_hidden_when_useless.js]
 [browser_flexbox_item_outline_renders_basisfinal_points_correctly.js]
 [browser_flexbox_item_outline_rotates_for_column.js]
 [browser_flexbox_pseudo_elements_are_listed.js]
 [browser_flexbox_sizing_flexibility_not_displayed_when_useless.js]
 [browser_flexbox_sizing_info_do_not_show_unspecified_min_dimension.js]
 [browser_flexbox_sizing_info_exists.js]
 [browser_flexbox_sizing_info_for_different_writing_modes.js]
 [browser_flexbox_sizing_info_for_pseudos.js]
 [browser_flexbox_sizing_info_for_text_nodes.js]
 [browser_flexbox_sizing_info_has_correct_sections.js]
 [browser_flexbox_sizing_wanted_to_grow_but_was_clamped.js]
 [browser_flexbox_text_nodes_are_listed.js]
+[browser_flexbox_toggle_flexbox_highlighter_01.js]
+[browser_flexbox_toggle_flexbox_highlighter_02.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_accordion_state.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flexbox's accordion state is persistent through hide/show in the layout
+// view.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+const FLEXBOX_OPENED_PREF = "devtools.layout.flexbox.opened";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector, toolbox } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  await testAccordionStateAfterClickingHeader(doc);
+  await testAccordionStateAfterSwitchingSidebars(inspector, doc);
+  await testAccordionStateAfterReopeningLayoutView(toolbox);
+
+  Services.prefs.clearUserPref(FLEXBOX_OPENED_PREF);
+});
+
+function testAccordionStateAfterClickingHeader(doc) {
+  const header = doc.querySelector(".flexbox-pane ._header");
+  const content = doc.querySelector(".flexbox-pane ._content");
+
+  info("Checking initial state of the flexbox panel.");
+  is(content.style.display, "block", "The flexbox panel content is 'display: block'.");
+  ok(Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
+    `${FLEXBOX_OPENED_PREF} is pref on by default.`);
+
+  info("Clicking the flexbox header to hide the flexbox panel.");
+  header.click();
+
+  info("Checking the new state of the flexbox panel.");
+  is(content.style.display, "none", "The flexbox panel content is 'display: none'.");
+  ok(!Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
+    `${FLEXBOX_OPENED_PREF} is pref off.`);
+}
+
+function testAccordionStateAfterSwitchingSidebars(inspector, doc) {
+  info("Checking the flexbox accordion state is persistent after switching sidebars.");
+
+  const content = doc.querySelector(".flexbox-pane ._content");
+
+  info("Selecting the computed view.");
+  inspector.sidebar.select("computedview");
+
+  info("Selecting the layout view.");
+  inspector.sidebar.select("layoutview");
+
+  info("Checking the state of the flexbox panel.");
+  is(content.style.display, "none", "The flexbox panel content is 'display: none'.");
+  ok(!Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
+    `${FLEXBOX_OPENED_PREF} is pref off.`);
+}
+
+async function testAccordionStateAfterReopeningLayoutView(toolbox) {
+  info("Checking the flexbox accordion state is persistent after closing and re-opening "
+    + "the layout view.");
+
+  info("Closing the toolbox.");
+  await toolbox.destroy();
+
+  info("Re-opening the layout view.");
+  const { flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const content = doc.querySelector(".flexbox-pane ._content");
+
+  info("Checking the state of the flexbox panel.");
+  ok(!content, "The flexbox panel content is not rendered.");
+  ok(!Services.prefs.getBoolPref(FLEXBOX_OPENED_PREF),
+    `${FLEXBOX_OPENED_PREF} is pref off.`);
+}
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_container_and_item.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex container accordion and flex item accordion are both rendered when
+// the selected element is both a flex container and item.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .container {
+      display: flex;
+    }
+  </style>
+  <div id="container" class="container">
+    <div id="item" class="container">
+      <div></div>
+    </div>
+  </div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  const onAccordionsRendered = waitForDOM(doc, ".accordion > div", 4);
+  await selectNode("#item", inspector);
+  const [flexItemPane, flexContainerPane] = await onAccordionsRendered;
+
+  ok(flexItemPane, "The flex item accordion pane is rendered.");
+  ok(flexContainerPane, "The flex container accordion pane is rendered.");
+  is(flexItemPane.children[0].textContent, "Flex Item of div#container.container",
+    "Got the correct header for the flex item pane.");
+  is(flexContainerPane.children[0].textContent, "Flex Container",
+    "Got the correct header for the flex container pane.");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_container_element_rep.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex container's element rep will display the box model highlighter on
+// hover.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector, toolbox } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  const onFlexContainerRepRendered = waitForDOM(doc, ".flex-header-content .objectBox");
+  await selectNode("#container", inspector);
+  const [flexContainerRep] = await onFlexContainerRepRendered;
+
+  ok(flexContainerRep, "The flex container element rep is rendered.");
+
+  info("Listen to node-highlight event and mouse over the rep");
+  const onHighlight = toolbox.once("node-highlight");
+  EventUtils.synthesizeMouse(flexContainerRep, 10, 5, {type: "mouseover"},
+    doc.defaultView);
+  const nodeFront = await onHighlight;
+
+  ok(nodeFront, "nodeFront was returned from highlighting the node.");
+  is(nodeFront.tagName, "DIV", "The highlighted node has the correct tagName.");
+  is(nodeFront.attributes[0].name, "id",
+    "The highlighted node has the correct attributes.");
+  is(nodeFront.attributes[0].value, "container",
+    "The highlighted node has the correct id.");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_empty_state.js
@@ -0,0 +1,23 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a message is displayed when no flex container is selected.
+
+const TEST_URI = `
+  <div></div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { highlighters } = inspector;
+
+  info("Checking the initial state of the Flexbox Inspector.");
+  ok(doc.querySelector(".flexbox-pane .devtools-sidepanel-no-result",
+    "A message is displayede when no flex container is selected."));
+  ok(!highlighters.flexboxHighlighterShown,
+    "No flexbox highlighter exists in the highlighters overlay.");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_01.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the flex item list is empty when there are no flex items for the selected flex
+// container.
+
+const TEST_URI = `
+  <div id="container" style="display:flex">
+  </div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { highlighters } = inspector;
+
+  const onFlexHeaderRendered = waitForDOM(doc, ".flex-header");
+  await selectNode("#container", inspector);
+  const [flexHeader] = await onFlexHeaderRendered;
+  const flexHighlighterToggle = flexHeader.querySelector("#flexbox-checkbox-toggle");
+  const flexItemList = doc.querySelector(".flex-item-list");
+
+  info("Checking the state of the Flexbox Inspector.");
+  ok(flexHeader, "The flex container header is rendered.");
+  ok(flexHighlighterToggle, "The flexbox highlighter toggle is rendered.");
+  ok(!flexItemList, "The flex item list is not rendered.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_item_list_02.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the flex item list can be used to navigated to the selected flex item.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+
+  const onFlexItemListRendered = waitForDOM(doc, ".flex-item-list");
+  await selectNode("#container", inspector);
+  const [flexItemList] = await onFlexItemListRendered;
+
+  info("Checking the initial state of the flex item list.");
+  ok(flexItemList, "The flex item list is rendered.");
+  is(flexItemList.children.length, 1,
+    "Got the correct number of flex items in the list.");
+
+  info("Clicking on the first flex item to navigate to the flex item.");
+  const onFlexItemOutlineRendered = waitForDOM(doc, ".flex-outline-container");
+  flexItemList.querySelector("button").click();
+  const [flexOutlineContainer] = await onFlexItemOutlineRendered;
+
+  info("Checking the selected flex item state.");
+  ok(flexOutlineContainer, "The flex outline is rendered.");
+  ok(!doc.querySelector(".flex-item-list"), "The flex item list is not shown.");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_01.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling ON/OFF the flexbox highlighter from the flexbox inspector panel.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { highlighters, store } = inspector;
+
+  const onFlexHighlighterToggleRendered = waitForDOM(doc, "#flexbox-checkbox-toggle");
+  await selectNode("#container", inspector);
+  const [flexHighlighterToggle] = await onFlexHighlighterToggleRendered;
+
+  info("Checking the initial state of the Flexbox Inspector.");
+  ok(flexHighlighterToggle, "The flexbox highlighter toggle is rendered.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+
+  await toggleHighlighterON(flexHighlighterToggle, highlighters, store);
+
+  info("Checking the flexbox highlighter is created.");
+  ok(highlighters.flexboxHighlighterShown, "Flexbox highlighter is shown.");
+  ok(flexHighlighterToggle.checked, "The flexbox highlighter toggle is checked.");
+
+  await toggleHighlighterOFF(flexHighlighterToggle, highlighters, store);
+
+  info("Checking the flexbox highlighter is not shown.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/flexbox/test/browser_flexbox_toggle_flexbox_highlighter_02.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling ON/OFF the flexbox highlighter on different flex containers from the
+// flexbox inspector panel.
+
+const TEST_URI = URL_ROOT + "doc_flexbox_specific_cases.html";
+
+add_task(async function() {
+  await addTab(TEST_URI);
+  const { inspector, flexboxInspector } = await openLayoutView();
+  const { document: doc } = flexboxInspector;
+  const { highlighters, store } = inspector;
+
+  const onFlexHighlighterToggleRendered = waitForDOM(doc, "#flexbox-checkbox-toggle");
+  await selectNode("#container", inspector);
+  const [flexHighlighterToggle] = await onFlexHighlighterToggleRendered;
+
+  info("Checking the #container state of the Flexbox Inspector.");
+  ok(flexHighlighterToggle, "The flexbox highlighter toggle is rendered.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+
+  info("Toggling ON the flexbox highlighter for #container from the layout panel.");
+  await toggleHighlighterON(flexHighlighterToggle, highlighters, store);
+
+  info("Checking the flexbox highlighter is created for #container.");
+  const highlightedNodeFront = store.getState().flexbox.flexContainer.nodeFront;
+  is(highlighters.flexboxHighlighterShown, highlightedNodeFront,
+    "Flexbox highlighter is shown for #container.");
+  ok(flexHighlighterToggle.checked, "The flexbox highlighter toggle is checked.");
+
+  info("Switching the selected flex container to .container.column");
+  const onToggleChange = waitUntilState(store, state => !state.flexbox.highlighted);
+  await selectNode(".container.column", inspector);
+  await onToggleChange;
+
+  info("Checking the .container.column state of the Flexbox Inspector.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+  is(highlighters.flexboxHighlighterShown, highlightedNodeFront,
+    "Flexbox highlighter is still shown for #container.");
+
+  info("Toggling ON the flexbox highlighter for .container.column from the layout "
+    + "panel.");
+  await toggleHighlighterON(flexHighlighterToggle, highlighters, store);
+
+  info("Checking the flexbox highlighter is created for .container.column");
+  is(highlighters.flexboxHighlighterShown,
+    store.getState().flexbox.flexContainer.nodeFront,
+    "Flexbox highlighter is shown for .container.column.");
+  ok(flexHighlighterToggle.checked, "The flexbox highlighter toggle is checked.");
+
+  await toggleHighlighterOFF(flexHighlighterToggle, highlighters, store);
+
+  info("Checking the flexbox highlighter is not shown.");
+  ok(!highlighters.flexboxHighlighterShown, "No flexbox highlighter is shown.");
+  ok(!flexHighlighterToggle.checked, "The flexbox highlighter toggle is unchecked.");
+});
--- a/devtools/client/inspector/flexbox/test/head.js
+++ b/devtools/client/inspector/flexbox/test/head.js
@@ -25,8 +25,48 @@ Services.prefs.setBoolPref("devtools.lay
 
 // Clear all set prefs.
 registerCleanupFunction(() => {
   Services.prefs.clearUserPref("devtools.flexboxinspector.enabled");
   Services.prefs.clearUserPref("devtools.layout.flexbox.opened");
   Services.prefs.clearUserPref("devtools.layout.boxmodel.opened");
   Services.prefs.clearUserPref("devtools.layout.grid.opened");
 });
+
+/**
+ * Toggles ON the flexbox highlighter given the flexbox highlighter button from the
+ * layout panel.
+ *
+ * @param  {DOMNode} button
+ *         The flexbox highlighter toggle button in the flex container panel.
+ * @param  {HighlightersOverlay} highlighters
+ *         The HighlightersOverlay instance.
+ * @param  {Store} store
+ *         The Redux store instance.
+ */
+async function toggleHighlighterON(button, highlighters, store) {
+  info("Toggling ON the flexbox highlighter from the layout panel.");
+  const onHighlighterShown = highlighters.once("flexbox-highlighter-shown");
+  const onToggleChange = waitUntilState(store, state => state.flexbox.highlighted);
+  button.click();
+  await onHighlighterShown;
+  await onToggleChange;
+}
+
+/**
+ * Toggles OFF the flexbox highlighter given the flexbox highlighter button from the
+ * layout panel.
+ *
+ * @param  {DOMNode} button
+ *         The flexbox highlighter toggle button in the flex container panel.
+ * @param  {HighlightersOverlay} highlighters
+ *         The HighlightersOverlay instance.
+ * @param  {Store} store
+ *         The Redux store instance.
+ */
+async function toggleHighlighterOFF(button, highlighters, store) {
+  info("Toggling OFF the flexbox highlighter from the layout panel.");
+  const onHighlighterHidden = highlighters.once("flexbox-highlighter-hidden");
+  const onToggleChange = waitUntilState(store, state => !state.flexbox.highlighted);
+  button.click();
+  await onHighlighterHidden;
+  await onToggleChange;
+}