tor-browser

commit 8c0ac27a0237121e89f488151c162cf31172cfa2
parent 2c941048716c99e7f7f01c0815815a800d265026
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Tue, 14 Oct 2025 13:57:51 +0000

Bug 1994181 - [devtools] Check for highlighted declarations in checkRuleViewContent. r=devtools-reviewers,jdescottes.

This should make tests easier to follow and more consistent.
We're using it only in browser_rules_search-filter_01.js for now,
but this will also be used in patches for Bug 1719461.

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

Diffstat:
M
devtools/client/inspector/rules/test/browser_rules_search-filter_01.js
 | 
72
+++++++++++++++++++++++++++++++++++++++++++++++++-----------------------
M
devtools/client/inspector/rules/test/head.js
 | 
15
++++++++++++++-

2 files changed, 63 insertions(+), 24 deletions(-)
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js
@@ -48,10 +48,10 @@ add_task(async function () {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
   await selectNode("#testid", inspector);
-  await testAddTextInFilter(inspector, view);
+  await testAddTextInFilter(view);
 });
 
-async function testAddTextInFilter(inspector, view) {
+async function testAddTextInFilter(view) {
   for (const data of TEST_DATA) {
     info(data.desc);
     await setSearchFilter(view, data.search);
@@ -60,26 +60,29 @@ async function testAddTextInFilter(inspector, view) {
   }
 }
 
-function checkRules(view) {
-  info("Check that the correct rules are visible");
-  is(view.element.children.length, 2, "Should have 2 rules.");
-  is(
-    getRuleViewRuleEditor(view, 0).rule.selectorText,
-    "element",
-    "First rule is inline element."
-  );
-
-  const rule = getRuleViewRuleEditor(view, 1).rule;
-
-  is(rule.selectorText, "#testid, h1", "Second rule is #testid, h1.");
-  ok(
-    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
-    "background-color text property is correctly highlighted."
+async function checkRules(view) {
+  info(
+    "Check that the expected rules are visible and expected declarations are highlighted"
   );
+  await checkRuleViewContent(view, [
+    {
+      selector: "element",
+      declarations: [],
+    },
+    {
+      selector: "#testid, h1",
+      declarations: [
+        {
+          name: "background-color",
+          value: "#00F !important",
+          highlighted: true,
+        },
+      ],
+    },
+  ]);
 }
 
 async function clearSearchAndCheckRules(view) {
-  const doc = view.styleDocument;
   const win = view.styleWindow;
   const searchField = view.searchField;
   const searchClearButton = view.searchClearButton;
@@ -90,10 +93,33 @@ async function clearSearchAndCheckRules(view) {
   await onRuleviewFiltered;
 
   info("Check the search filter is cleared and no rules are highlighted");
-  is(view.element.children.length, 3, "Should have 3 rules.");
   ok(!searchField.value, "Search filter is cleared.");
-  ok(
-    !doc.querySelectorAll(".ruleview-highlight").length,
-    "No rules are higlighted."
-  );
+
+  info("Check that all rules are displayed and no declaration is highlighted");
+  await checkRuleViewContent(view, [
+    {
+      selector: "element",
+      declarations: [],
+    },
+    {
+      selector: "#testid, h1",
+      declarations: [
+        {
+          name: "background-color",
+          value: "#00F !important",
+          highlighted: false,
+        },
+      ],
+    },
+    {
+      selector: ".testclass",
+      declarations: [
+        {
+          name: "width",
+          value: "100%",
+          highlighted: false,
+        },
+      ],
+    },
+  ]);
 }
diff --git a/devtools/client/inspector/rules/test/head.js b/devtools/client/inspector/rules/test/head.js
@@ -1384,6 +1384,8 @@ function getSmallIncrementKey() {
  * @param {Boolean|undefined} expectedElements[].declarations[].dirty - Is the declaration dirty,
  *        i.e. was it added/modified by the user (should have a left green border).
  *        Defaults to false
+ * @param {Boolean|undefined} expectedElements[].declarations[].highlighted - Is the declaration
+ *        highlighted by a search.
  * @param {String} expectedElements[].header - If we're expecting a header (Inherited from,
  *        Pseudo-elements, …), the text of said header.
  */
@@ -1441,7 +1443,7 @@ function checkRuleViewContent(view, expectedElements) {
     is(
       declarations.length,
       expectedElement.declarations.length,
-      "Got the expected number of declarations"
+      `Got the expected number of declarations for expected element #${i} (${selector})`
     );
     for (let j = 0; j < declarations.length; j++) {
       const expectedDeclaration = expectedElement.declarations[j];
@@ -1456,6 +1458,12 @@ function checkRuleViewContent(view, expectedElements) {
         expectedDeclaration?.name,
         "Got expected property name"
       );
+      if (propName.innerText !== expectedDeclaration?.name) {
+        // We don't have the expected property name, don't run the other assertions to
+        // avoid spamming the output
+        continue;
+      }
+
       is(
         propValue.innerText,
         expectedDeclaration?.value,
@@ -1478,6 +1486,11 @@ function checkRuleViewContent(view, expectedElements) {
         !!expectedDeclaration?.dirty,
         `"${selector}" ${propName.innerText} is ${expectedDeclaration?.dirty ? "dirty" : "not dirty"}`
       );
+      is(
+        ruleViewPropertyElement.querySelector(".ruleview-highlight") !== null,
+        !!expectedDeclaration?.highlighted,
+        `"${selector}" ${propName.innerText} is ${expectedDeclaration?.highlighted ? "highlighted" : "not highlighted"} `
+      );
     }
   }
 }