Bug 1524548 - (Part 4) Add unit test to check stylesheets generated from tracked changes. r=pbro

Depends on D18706

Follow up for D18704. Adds xpcshell unit test to check that stylesheets are genereated in the expected formats for single or deeply nested CSS rules.

Differential Revision: https://phabricator.services.mozilla.com/D18860

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/changes/moz.build

@@ -19,6 +19,7 @@ DevToolsModules(
 )
 
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
+XPCSHELL_TESTS_MANIFESTS += ['test/unit/xpcshell.ini']
 
 with Files('**'):
     BUG_COMPONENT = ('DevTools', 'Inspector: Changes')

devtools/client/inspector/changes/test/unit/.eslintrc.js

@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+  // Extend from the common devtools xpcshell eslintrc config.
+  "extends": "../../../../../.eslintrc.xpcshell.js"
+};

devtools/client/inspector/changes/test/unit/head.js

@@ -0,0 +1,6 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");

devtools/client/inspector/changes/test/unit/mocks.js

@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint-disable comma-dangle */
+
+"use strict";
+
+/**
+ * Snapshot of the Redux state for the Changes panel.
+ *
+ * It corresponds to the tracking of a single property value change (background-color)
+ * within a deeply nested CSS at-rule structure from an inline stylesheet:
+ *
+ * @media (min-width: 50em) {
+ *   @supports (display: grid) {
+ *     body {
+ *       - background-color: royalblue;
+ *       + background-color: red;
+ *     }
+ *   }
+ * }
+ */
+module.exports.CHANGES_STATE = {
+  "source1": {
+    "type": "inline",
+    "href": "http://localhost:5000/at-rules-nested.html",
+    "id": "source1",
+    "index": 0,
+    "isFramed": false,
+    "rules": {
+      "rule1": {
+        "selector": "@media (min-width: 50em)",
+        "ruleId": "rule1",
+        "add": [],
+        "remove": [],
+        "children": [
+          "rule2"
+        ]
+      },
+      "rule2": {
+        "selector": "@supports (display: grid)",
+        "ruleId": "rule2",
+        "add": [],
+        "remove": [],
+        "children": [
+          "rule3"
+        ],
+        "parent": "rule1"
+      },
+      "rule3": {
+        "selector": "body",
+        "ruleId": "rule3",
+        "add": [
+          {
+            "property": "background-color",
+            "value": "red",
+            "index": 0
+          }
+        ],
+        "remove": [
+          {
+            "property": "background-color",
+            "value": "royalblue",
+            "index": 0
+          }
+        ],
+        "children": [],
+        "parent": "rule2"
+      }
+    }
+  }
+};

devtools/client/inspector/changes/test/unit/test_changes_stylesheet.js

@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that getChangesStylesheet() serializes tracked changes from nested CSS rules
+// into the expected stylesheet format.
+
+const { getChangesStylesheet } = require("devtools/client/inspector/changes/selectors/changes");
+
+const { CHANGES_STATE } = require("resource://test/mocks");
+
+// Wrap multi-line string in backticks and trim to ensure exact string check in test.
+const STYLESHEET_FOR_ANCESTOR = `
+/* Inline #0 | http://localhost:5000/at-rules-nested.html */
+
+@media (min-width: 50em) {
+  @supports (display: grid) {
+    body {
+      /* background-color: royalblue; */
+      background-color: red;
+    }
+  }
+}
+`.trim();
+
+// Wrap multi-line string in backticks and trim to ensure exact string check in test.
+const STYLESHEET_FOR_DESCENDANT = `
+/* Inline #0 | http://localhost:5000/at-rules-nested.html */
+
+body {
+  /* background-color: royalblue; */
+  background-color: red;
+}
+`.trim();
+
+add_test(() => {
+  info("Check stylesheet generated for the first ancestor in the CSS rule tree.");
+  equal(getChangesStylesheet(CHANGES_STATE), STYLESHEET_FOR_ANCESTOR,
+    "Stylesheet includes all ancestors.");
+
+  info("Check stylesheet generated for the last descendant in the CSS rule tree.");
+  const filter = { sourceIds: ["source1"], ruleIds: ["rule3"] };
+  equal(getChangesStylesheet(CHANGES_STATE, filter), STYLESHEET_FOR_DESCENDANT,
+    "Stylesheet includes just descendant.");
+
+  run_next_test();
+});

devtools/client/inspector/changes/test/unit/xpcshell.ini

@@ -0,0 +1,8 @@
+[DEFAULT]
+tags = devtools
+firefox-appdir = browser
+head = head.js
+support-files =
+  ./mocks.js
+
+[test_changes_stylesheet.js]