Bug 1507476 - Update Changes panel tests to use helpers for rendered declarations. r=pbro
authorRazvan Caliman <rcaliman@mozilla.com>
Wed, 21 Nov 2018 08:16:06 +0000
changeset 503886 658cd029a6a1f60ef28a273803439a3f3b1be0b0
parent 503885 67ae9d05389679fed9f5f3b1a681402c719a90f7
child 503887 95902e82a59eef77a3f5cde7014419e1f13ed763
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1507476
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1507476 - Update Changes panel tests to use helpers for rendered declarations. r=pbro Depends on D12434 Differential Revision: https://phabricator.services.mozilla.com/D12445
devtools/client/inspector/changes/test/browser_changes_declaration_disable.js
devtools/client/inspector/changes/test/browser_changes_declaration_duplicate.js
devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js
devtools/client/inspector/changes/test/browser_changes_declaration_remove.js
devtools/client/inspector/changes/test/browser_changes_declaration_remove_ahead.js
--- a/devtools/client/inspector/changes/test/browser_changes_declaration_disable.js
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_disable.js
@@ -14,34 +14,33 @@ const TEST_URI = `
   </style>
   <div></div>
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view: ruleView } = await openRuleView();
   const { document: doc, store } = selectChangesView(inspector);
-  const panel = doc.querySelector("#sidebar-panel-changes");
 
   await selectNode("div", inspector);
   const rule = getRuleViewRuleEditor(ruleView, 1).rule;
   const prop = rule.textProps[0];
 
   let onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   info("Disable the first declaration");
   await togglePropStatus(ruleView, prop);
   info("Wait for change to be tracked");
   await onTrackChange;
 
-  let removedDeclarations = panel.querySelectorAll(".diff-remove");
+  let removedDeclarations = getRemovedDeclarations(doc);
   is(removedDeclarations.length, 1, "Only one declaration was tracked as removed");
 
   onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   info("Re-enable the first declaration");
   await togglePropStatus(ruleView, prop);
   info("Wait for change to be tracked");
   await onTrackChange;
 
-  const addedDeclarations = panel.querySelectorAll(".diff-add");
-  removedDeclarations = panel.querySelectorAll(".diff-remove");
+  const addedDeclarations = getAddedDeclarations(doc);
+  removedDeclarations = getRemovedDeclarations(doc);
   is(addedDeclarations.length, 0, "No declarations were tracked as added");
   is(removedDeclarations.length, 0, "No declarations were tracked as removed");
 });
--- a/devtools/client/inspector/changes/test/browser_changes_declaration_duplicate.js
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_duplicate.js
@@ -13,84 +13,78 @@ const TEST_URI = `
   </style>
   <div></div>
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view: ruleView } = await openRuleView();
   const { document: doc, store } = selectChangesView(inspector);
-  const panel = doc.querySelector("#sidebar-panel-changes");
 
   await selectNode("div", inspector);
-  await testAddDuplicateDeclarations(ruleView, store, panel);
-  await testChangeDuplicateDeclarations(ruleView, store, panel);
-  await testRemoveDuplicateDeclarations(ruleView, store, panel);
+  await testAddDuplicateDeclarations(ruleView, store, doc);
+  await testChangeDuplicateDeclarations(ruleView, store, doc);
+  await testRemoveDuplicateDeclarations(ruleView, store, doc);
 });
 
-async function testAddDuplicateDeclarations(ruleView, store, panel) {
+async function testAddDuplicateDeclarations(ruleView, store, doc) {
   info(`Test that adding declarations with the same property name and value
         are both tracked.`);
 
   let onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   info("Add CSS declaration");
   await addProperty(ruleView, 1, "color", "red");
   info("Wait for the change to be tracked");
   await onTrackChange;
 
   onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   info("Add duplicate CSS declaration");
   await addProperty(ruleView, 1, "color", "red");
   info("Wait for the change to be tracked");
   await onTrackChange;
 
-  const addDecl = panel.querySelectorAll(".declaration.diff-add");
+  const addDecl = getAddedDeclarations(doc);
   is(addDecl.length, 2, "Two declarations were tracked as added");
-  is(addDecl.item(0).querySelector(".declaration-value").textContent, "red",
+  is(addDecl[0].value, "red",
      "First declaration has correct property value"
   );
-  is(addDecl.item(0).querySelector(".declaration-value").textContent,
-     addDecl.item(1).querySelector(".declaration-value").textContent,
+  is(addDecl[0].value, addDecl[1].value,
      "First and second declarations have identical property values"
   );
 }
 
-async function testChangeDuplicateDeclarations(ruleView, store, panel) {
+async function testChangeDuplicateDeclarations(ruleView, store, doc) {
   info("Test that changing one of the duplicate declarations won't change the other");
   const rule = getRuleViewRuleEditor(ruleView, 1).rule;
   const prop = rule.textProps[0];
 
   info("Change the value of the first of the duplicate declarations");
   const onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   await setProperty(ruleView, prop, "black");
   info("Wait for the change to be tracked");
   await onTrackChange;
 
-  const addDecl = panel.querySelectorAll(".declaration.diff-add");
-  is(addDecl.item(0).querySelector(".declaration-value").textContent, "black",
-     "First declaration has changed property value"
-  );
-  is(addDecl.item(1).querySelector(".declaration-value").textContent, "red",
-     "Second declaration has not changed property value"
-  );
+  const addDecl = getAddedDeclarations(doc);
+  is(addDecl[0].value, "black", "First declaration has changed property value");
+  is(addDecl[1].value, "red", "Second declaration has not changed property value");
 }
 
-async function testRemoveDuplicateDeclarations(ruleView, store, panel) {
+async function testRemoveDuplicateDeclarations(ruleView, store, doc) {
   info(`Test that removing the first of the duplicate declarations
         will not remove the second.`);
   const rule = getRuleViewRuleEditor(ruleView, 1).rule;
   const prop = rule.textProps[0];
 
   info("Remove first declaration");
   const onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   await removeProperty(ruleView, prop);
   info("Wait for the change to be tracked");
   await onTrackChange;
 
-  const addDecl = panel.querySelectorAll(".declaration.diff-add");
-  const removeDecl = panel.querySelectorAll(".declaration.diff-remove");
+  const addDecl = getAddedDeclarations(doc);
+  const removeDecl = getRemovedDeclarations(doc);
   // Expect no remove operation tracked because it cancels out the original add operation.
   is(removeDecl.length, 0, "No declaration was tracked as removed");
   is(addDecl.length, 1, "Just one declaration left tracked as added");
-  is(addDecl.item(0).querySelector(".declaration-value").textContent, "red",
+  is(addDecl[0].value, "red",
      "Leftover declaration has property value of the former second declaration"
   );
 }
--- a/devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_edit_value.js
@@ -48,48 +48,46 @@ const VALUE_CHANGE_ITERATIONS = [
     remove: null,
   },
 ];
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view: ruleView } = await openRuleView();
   const { document: doc, store } = selectChangesView(inspector);
-  const panel = doc.querySelector("#sidebar-panel-changes");
 
   await selectNode("div", inspector);
   const rule = getRuleViewRuleEditor(ruleView, 1).rule;
   const prop = rule.textProps[0];
 
   let onTrackChange;
-  let removeValue;
-  let addValue;
+  let removeDecl;
+  let addDecl;
 
   for (const { value, add, remove } of VALUE_CHANGE_ITERATIONS) {
     onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
 
     info(`Change the CSS declaration value to ${value}`);
     await setProperty(ruleView, prop, value);
     info("Wait for the change to be tracked");
     await onTrackChange;
 
-    addValue = panel.querySelector(".diff-add .declaration-value");
-    removeValue = panel.querySelector(".diff-remove .declaration-value");
+    addDecl = getAddedDeclarations(doc);
+    removeDecl = getRemovedDeclarations(doc);
 
     if (add) {
-      is(addValue.textContent, add.value,
+      is(addDecl[0].value, add.value,
         `Added declaration has expected value: ${add.value}`);
-      is(panel.querySelectorAll(".diff-add").length, 1,
-        "Only one declaration was tracked as added.");
+      is(addDecl.length, 1, "Only one declaration was tracked as added.");
     } else {
-      ok(!addValue, `Added declaration was cleared`);
+      is(addDecl.length, 0, "Added declaration was cleared");
     }
 
     if (remove) {
-      is(removeValue.textContent, remove.value,
+      is(removeDecl[0].value, remove.value,
         `Removed declaration has expected value: ${remove.value}`);
-      is(panel.querySelectorAll(".diff-remove").length, 1,
+      is(removeDecl.length, 1,
         "Only one declaration was tracked as removed.");
     } else {
-      ok(!removeValue, `Removed declaration was cleared`);
+      is(removeDecl.length, 0, "Removed declaration was cleared");
     }
   }
 });
--- a/devtools/client/inspector/changes/test/browser_changes_declaration_remove.js
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_remove.js
@@ -14,25 +14,24 @@ const TEST_URI = `
   </style>
   <div></div>
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view: ruleView } = await openRuleView();
   const { document: doc, store } = selectChangesView(inspector);
-  const panel = doc.querySelector("#sidebar-panel-changes");
 
   await selectNode("div", inspector);
   const rule = getRuleViewRuleEditor(ruleView, 1).rule;
   const prop = rule.textProps[0];
 
   const onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   info("Remove the first declaration");
   await removeProperty(ruleView, prop);
   info("Wait for change to be tracked");
   await onTrackChange;
 
-  const removeName = panel.querySelector(".diff-remove .declaration-name");
-  const removeValue = panel.querySelector(".diff-remove .declaration-value");
-  is(removeName.textContent, "color", "Correct declaration name was tracked as removed");
-  is(removeValue.textContent, "red", "Correct declaration value was tracked as removed");
+  const removeDecl = getRemovedDeclarations(doc);
+  is(removeDecl.length, 1, "One declaration was tracked as removed");
+  is(removeDecl[0].property, "color", "Correct declaration name was tracked as removed");
+  is(removeDecl[0].value, "red", "Correct declaration value was tracked as removed");
 });
--- a/devtools/client/inspector/changes/test/browser_changes_declaration_remove_ahead.js
+++ b/devtools/client/inspector/changes/test/browser_changes_declaration_remove_ahead.js
@@ -16,17 +16,16 @@ const TEST_URI = `
   </style>
   <div></div>
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view: ruleView } = await openRuleView();
   const { document: doc, store } = selectChangesView(inspector);
-  const panel = doc.querySelector("#sidebar-panel-changes");
 
   await selectNode("div", inspector);
   const rule = getRuleViewRuleEditor(ruleView, 1).rule;
   const prop1 = rule.textProps[0];
   const prop2 = rule.textProps[1];
 
   let onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   info("Change the second declaration");
@@ -39,21 +38,17 @@ add_task(async function() {
   await onTrackChange;
 
   onTrackChange = waitUntilAction(store, "TRACK_CHANGE");
   info("Change the second declaration again");
   await setProperty(ruleView, prop2, "flex");
   info("Wait for change to be tracked");
   await onTrackChange;
 
-  const removeDecl = panel.querySelectorAll(".declaration.diff-remove");
-  const addDecl = panel.querySelectorAll(".declaration.diff-add");
+  const removeDecl = getRemovedDeclarations(doc);
+  const addDecl = getAddedDeclarations(doc);
 
   is(removeDecl.length, 2, "Two declarations tracked as removed");
   is(addDecl.length, 1, "One declaration tracked as added");
   // Ensure changes to the second declaration were tracked after removing the first one.
-  is(addDecl.item(0).querySelector(".declaration-name").textContent, "display",
-    "Added declaration has updated property name"
-  );
-  is(addDecl.item(0).querySelector(".declaration-value").textContent, "flex",
-    "Added declaration has updated property value"
-  );
+  is(addDecl[0].property, "display", "Added declaration has updated property name");
+  is(addDecl[0].value, "flex", "Added declaration has updated property value");
 });