Bug 1284852 - Part 3 - Re-format/factor browser_rules_cycle-color.js so it's easier to read; r=miker
authorPatrick Brosset <pbrosset@mozilla.com>
Wed, 05 Dec 2018 20:16:36 +0000
changeset 508725 eeddd827762d17b290ffe65d17baf6196477f488
parent 508724 c0345b057f1191b3ca4755080fc519f380c4e8e8
child 508726 ea5869ddc7dc02086e3c36e48af7b9e8a26678ca
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmiker
bugs1284852
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 1284852 - Part 3 - Re-format/factor browser_rules_cycle-color.js so it's easier to read; r=miker Depends on D13808 Differential Revision: https://phabricator.services.mozilla.com/D13809
devtools/client/inspector/rules/test/browser_rules_cycle-color.js
--- a/devtools/client/inspector/rules/test/browser_rules_cycle-color.js
+++ b/devtools/client/inspector/rules/test/browser_rules_cycle-color.js
@@ -22,145 +22,135 @@ const TEST_URI = `
   <body>
     <span>Test</span>
     <div>cycling color types in the rule view!</div>
   </body>
 `;
 
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  const {inspector, view} = await openRuleView();
-  const container = getRuleViewProperty(view, "body", "color").valueSpan;
-  await checkColorCycling(container, view);
+  const { inspector, view } = await openRuleView();
+
+  await checkColorCycling(view);
   await checkAlphaColorCycling(inspector, view);
   await checkColorCyclingPersist(inspector, view);
   await checkColorCyclingWithDifferentDefaultType(inspector, view);
 });
 
-async function checkColorCycling(container, view) {
-  const valueNode = container.querySelector(".ruleview-color");
-  const win = view.styleWindow;
+async function checkColorCycling(view) {
+  const { valueSpan } = getRuleViewProperty(view, "body", "color");
 
-  // Hex
-  is(valueNode.textContent, "#f00", "Color displayed as a hex value.");
+  checkColorValue(valueSpan, "#f00", "Color displayed as a hex value, its authored type");
 
-  const tests = [{
+  await runSwatchShiftClickTests(view, valueSpan, [{
     value: "hsl(0, 100%, 50%)",
-    comment: "Color displayed as an HSL value.",
+    comment: "Color displayed as an HSL value",
   }, {
     value: "rgb(255, 0, 0)",
-    comment: "Color displayed as an RGB value.",
+    comment: "Color displayed as an RGB value",
   }, {
     value: "red",
-    comment: "Color displayed as a color name.",
+    comment: "Color displayed as a color name",
   }, {
     value: "#f00",
-    comment: "Color displayed as an authored value.",
+    comment: "Color displayed as an authored value",
   }, {
     value: "hsl(0, 100%, 50%)",
-    comment: "Color displayed as an HSL value again.",
-  }];
-
-  for (const test of tests) {
-    await checkSwatchShiftClick(view, container, win, test.value, test.comment);
-  }
+    comment: "Color displayed as an HSL value again",
+  }]);
 }
 
 async function checkAlphaColorCycling(inspector, view) {
   await selectNode("span", inspector);
-  const container = getRuleViewProperty(view, "span", "border-color").valueSpan;
-  const valueNode = container.querySelector(".ruleview-color");
-  const win = view.styleWindow;
+  const { valueSpan } = getRuleViewProperty(view, "span", "border-color");
 
-  is(valueNode.textContent, "#ff000080",
-    "Color displayed as an alpha hex value.");
+  checkColorValue(valueSpan, "#ff000080",
+    "Color displayed as an alpha hex value, its authored type");
 
-  const tests = [{
+  await runSwatchShiftClickTests(view, valueSpan, [{
     value: "hsla(0, 100%, 50%, 0.5)",
-    comment: "Color displayed as an HSLa value.",
+    comment: "Color displayed as an HSLa value",
   }, {
     value: "rgba(255, 0, 0, 0.5)",
-    comment: "Color displayed as an RGBa value.",
+    comment: "Color displayed as an RGBa value",
   }, {
     value: "#ff000080",
-    comment: "Color displayed as an alpha hex value again.",
-  }];
-
-  for (const test of tests) {
-    await checkSwatchShiftClick(view, container, win, test.value, test.comment);
-  }
+    comment: "Color displayed as an alpha hex value again",
+  }]);
 }
 
 async function checkColorCyclingPersist(inspector, view) {
   await selectNode("span", inspector);
-  let container = getRuleViewProperty(view, "span", "color").valueSpan;
-  let valueNode = container.querySelector(".ruleview-color");
-  const win = view.styleWindow;
+  let { valueSpan } = getRuleViewProperty(view, "span", "color");
 
-  is(valueNode.textContent, "blue", "Color displayed as a color name.");
+  checkColorValue(valueSpan, "blue", "Color displayed as color name, its authored type");
 
-  await checkSwatchShiftClick(view, container, win, "#00f",
-    "Color displayed as a hex value.");
+  await checkSwatchShiftClick(view, valueSpan, "#00f", "Color displayed as a hex value");
 
-  // Select the body and reselect the span to see
-  // if the new color unit persisted
+  info("Select the body and reselect the span to see if the new color unit persisted");
   await selectNode("body", inspector);
   await selectNode("span", inspector);
 
-  // We have to query for the container and the swatch because
-  // they've been re-generated
-  container = getRuleViewProperty(view, "span", "color").valueSpan;
-  valueNode = container.querySelector(".ruleview-color");
-  is(valueNode.textContent, "#00f",
-    "Color  is still displayed as a hex value.");
+  // We have to query for the value span and the swatch again because they've been
+  // re-generated.
+  ({ valueSpan } = getRuleViewProperty(view, "span", "color"));
+  checkColorValue(valueSpan, "#00f", "Color is still displayed as a hex value");
 }
 
 async function checkColorCyclingWithDifferentDefaultType(inspector, view) {
   info("Change the default color type pref to hex");
   await pushPref("devtools.defaultColorUnit", "hex");
 
   info("Select a new node that would normally have a color with a different type");
   await selectNode("div", inspector);
+  const { valueSpan } = getRuleViewProperty(view, "div", "color");
 
-  let container = getRuleViewProperty(view, "div", "color").valueSpan;
-  let valueNode = container.querySelector(".ruleview-color");
-  const win = view.styleWindow;
-
-  is(valueNode.textContent, "#008000", "Color displayed as a hex value.");
+  checkColorValue(valueSpan, "#008000",
+    "Color displayed as a hex value, which is the type just selected");
 
   info("Cycle through color types again");
-
-  const tests = [{
+  await runSwatchShiftClickTests(view, valueSpan, [{
     value: "hsl(120, 100%, 25.1%)",
-    comment: "Color displayed as an HSL value.",
+    comment: "Color displayed as an HSL value",
   }, {
     value: "rgb(0, 128, 0)",
-    comment: "Color displayed as an RGB value.",
+    comment: "Color displayed as an RGB value",
   }, {
     value: "green",
-    comment: "Color displayed as a color name.",
+    comment: "Color displayed as a color name",
   }, {
     value: "#008000",
-    comment: "Color displayed as an authored value.",
+    comment: "Color displayed as an authored value",
   }, {
     value: "hsl(120, 100%, 25.1%)",
-    comment: "Color displayed as an HSL value again.",
-  }];
+    comment: "Color displayed as an HSL value again",
+  }]);
+}
 
-  for (const test of tests) {
-    await checkSwatchShiftClick(view, container, win, test.value, test.comment);
+async function runSwatchShiftClickTests(view, valueSpan, tests) {
+  for (const { value, comment } of tests) {
+    await checkSwatchShiftClick(view, valueSpan, value, comment);
   }
 }
 
-async function checkSwatchShiftClick(view, container, win, expectedValue, comment) {
-  const swatch = container.querySelector(".ruleview-colorswatch");
-  const valueNode = container.querySelector(".ruleview-color");
+async function checkSwatchShiftClick(view, valueSpan, expectedValue, comment) {
+  const swatchNode = valueSpan.querySelector(".ruleview-colorswatch");
+  const colorNode = valueSpan.querySelector(".ruleview-color");
 
+  info("Shift-click the color swatch and wait for the color type and ruleview to update");
   const onRuleViewChanged = view.once("ruleview-changed");
-  const onUnitChange = swatch.once("unit-change");
-  EventUtils.synthesizeMouseAtCenter(swatch, {
+  const onUnitChange = swatchNode.once("unit-change");
+
+  EventUtils.synthesizeMouseAtCenter(swatchNode, {
     type: "mousedown",
     shiftKey: true,
-  }, win);
+  }, view.styleWindow);
+
   await onUnitChange;
   await onRuleViewChanged;
-  is(valueNode.textContent, expectedValue, comment);
+
+  is(colorNode.textContent, expectedValue, comment);
 }
+
+function checkColorValue(valueSpan, expectedColorValue, comment) {
+  const colorNode = valueSpan.querySelector(".ruleview-color");
+  is(colorNode.textContent, expectedColorValue, comment);
+}