Bug 1292051 - Part 2: Add unit tests for properties under the box model. r=gl

MozReview-Commit-ID: K99iGuucH1I

devtools/client/inspector/boxmodel/components/ComputedProperty.js

@@ -28,6 +28,7 @@ module.exports = createClass({
     return dom.div(
       {
         className: "property-view",
+        "data-property-name": name,
         tabIndex: "0",
         ref: container => {
           this.container = container;

devtools/client/inspector/boxmodel/test/browser.ini

@@ -22,6 +22,7 @@ support-files =
 [browser_boxmodel_guides.js]
 [browser_boxmodel_navigation.js]
 skip-if = true # Bug 1336198
+[browser_boxmodel_properties.js]
 [browser_boxmodel_rotate-labels-on-sides.js]
 [browser_boxmodel_sync.js]
 [browser_boxmodel_tooltips.js]

devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js

@@ -0,0 +1,120 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model properties list displays the right values
+// and that it updates when the node's style is changed.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      box-sizing: border-box;
+      display: block;
+      float: left;
+      line-height: 20px;
+      position: relative;
+      z-index: 2;
+      height: 100px;
+      width: 100px;
+      border: 10px solid black;
+      padding: 20px;
+      margin: 30px auto;
+    }
+  </style>
+  <div>Test Node</div>
+`;
+
+const res1 = [
+  {
+    property: "box-sizing",
+    value: "border-box"
+  },
+  {
+    property: "display",
+    value: "block"
+  },
+  {
+    property: "float",
+    value: "left"
+  },
+  {
+    property: "line-height",
+    value: "20px"
+  },
+  {
+    property: "position",
+    value: "relative"
+  },
+  {
+    property: "z-index",
+    value: 2
+  },
+];
+
+const res2 = [
+  {
+    property: "box-sizing",
+    value: "content-box"
+  },
+  {
+    property: "display",
+    value: "block"
+  },
+  {
+    property: "float",
+    value: "right"
+  },
+  {
+    property: "line-height",
+    value: "10px"
+  },
+  {
+    property: "position",
+    value: "static"
+  },
+  {
+    property: "z-index",
+    value: 5
+  },
+];
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let { inspector, boxmodel, testActor } = yield openLayoutView();
+  yield selectNode("div", inspector);
+
+  yield testInitialValues(inspector, boxmodel);
+  yield testChangingValues(inspector, boxmodel, testActor);
+});
+
+function* testInitialValues(inspector, boxmodel) {
+  info("Test that the initial values of the box model are correct");
+  let doc = boxmodel.document;
+
+  for (let { property, value } of res1) {
+    let elt = doc.querySelector(getPropertySelector(property));
+    is(elt.textContent, value, property + " has the right value.");
+  }
+}
+
+function* testChangingValues(inspector, boxmodel, testActor) {
+  info("Test that changing the document updates the box model");
+  let doc = boxmodel.document;
+
+  let onUpdated = waitForUpdate(inspector);
+  yield testActor.setAttribute("div", "style",
+                               "box-sizing:content-box;float:right;" +
+                               "line-height:10px;position:static;z-index:5;");
+  yield onUpdated;
+
+  for (let { property, value } of res2) {
+    let elt = doc.querySelector(getPropertySelector(property));
+    is(elt.textContent, value, property + " has the right value after style update.");
+  }
+}
+
+function getPropertySelector(propertyName) {
+  return `.boxmodel-properties-wrapper .property-view` +
+  `[data-property-name=${propertyName}] .property-value`;
+}

devtools/client/inspector/boxmodel/test/head.js

@@ -11,8 +11,10 @@ Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
   this);
 
+Services.prefs.setBoolPref("devtools.layoutview.enabled", true);
 Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
 registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.layoutview.enabled");
   Services.prefs.clearUserPref("devtools.toolbox.footer.height");
 });
 
@@ -66,6 +68,36 @@ function openBoxModelView() {
   });
 }
 
+/**
+ * Open the toolbox, with the inspector tool visible, and the layout view
+ * sidebar tab selected to display the box model view with properties.
+ *
+ * @return {Promise} a promise that resolves when the inspector is ready and the box model
+ *         view is visible and ready.
+ */
+function openLayoutView() {
+  return openInspectorSidebarTab("layoutview").then(data => {
+    // The actual highligher show/hide methods are mocked in box model tests.
+    // The highlighter is tested in devtools/inspector/test.
+    function mockHighlighter({highlighter}) {
+      highlighter.showBoxModel = function () {
+        return promise.resolve();
+      };
+      highlighter.hideBoxModel = function () {
+        return promise.resolve();
+      };
+    }
+    mockHighlighter(data.toolbox);
+
+    return {
+      toolbox: data.toolbox,
+      inspector: data.inspector,
+      boxmodel: data.inspector.boxmodel,
+      testActor: data.testActor
+    };
+  });
+}
+
 /**
  * Wait for the boxmodel-view-updated event.
  *

devtools/client/inspector/inspector.js

@@ -926,10 +926,18 @@ Inspector.prototype = {
       this.ruleview.destroy();
     }
 
+    if (this.boxmodel) {
+      this.boxmodel.destroy();
+    }
+
     if (this.computedview) {
       this.computedview.destroy();
     }
 
+    if (this.gridInspector) {
+      this.gridInspector.destroy();
+    }
+
     if (this.layoutview) {
       this.layoutview.destroy();
     }