commit 95112dc0345dc697fccc7839db9678af6bba5424
parent 6f55e56805069d7bff1b43a82e97662079254677
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Wed, 15 Oct 2025 07:13: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:
3 files changed, 70 insertions(+), 25 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/browser_rules_variables-jump-to-definition.js b/devtools/client/inspector/rules/test/browser_rules_variables-jump-to-definition.js
@@ -320,7 +320,13 @@ add_task(async function checkClearSearch() {
{ selector: "element", declarations: [] },
{
selector: "h1",
- declarations: [{ name: "--my-unique-var", value: "var(--my-color-1)" }],
+ declarations: [
+ {
+ name: "--my-unique-var",
+ value: "var(--my-color-1)",
+ highlighted: true,
+ },
+ ],
},
]);
const rule = getRuleViewRuleEditor(view, 1).rule;
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"} `
+ );
}
}
}
