1 files changed, 67 insertions, 0 deletions
diff --git a/devtools/client/inspector/changes/test/xpcshell/mocks.js b/devtools/client/inspector/changes/test/xpcshell/mocks.js
new file mode 100644
index 0000000000..52f175beb8
--- /dev/null
+++ b/devtools/client/inspector/changes/test/xpcshell/mocks.js
@@ -0,0 +1,67 @@
+/* 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: {
+        selectors: ["@media (min-width: 50em)"],
+        ruleId: "rule1",
+        add: [],
+        remove: [],
+        children: ["rule2"],
+      },
+      rule2: {
+        selectors: ["@supports (display: grid)"],
+        ruleId: "rule2",
+        add: [],
+        remove: [],
+        children: ["rule3"],
+        parent: "rule1",
+      },
+      rule3: {
+        selectors: ["body"],
+        ruleId: "rule3",
+        add: [
+          {
+            property: "background-color",
+            value: "red",
+            index: 0,
+          },
+        ],
+        remove: [
+          {
+            property: "background-color",
+            value: "royalblue",
+            index: 0,
+          },
+        ],
+        children: [],
+        parent: "rule2",
+      },
+    },
+  },
+};