Bug 1499679 - [devtools] Check the DOM instead of Redux store in assertPreviews. r=bomsy.

`assertPreviews` was hovering over a token and then checking the Redux store in
order to assert what should be in the popup. This can be a bit brittle and it's
probably safer to check what's rendered in the DOM, as it directly maps to what's
shown to the user.
Some unused or irrelevant test helpers are removed, and tests are updated accordingly.

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

devtools/client/debugger/test/mochitest/browser_dbg-preview-getter.js

@@ -14,7 +14,7 @@ add_task(async function() {
   await waitForPaused(dbg);
 
   info("Hovers over 'this' token to display the preview.");
-  await hoverOnToken(dbg, 5, 8, "previewPopup");
+  await tryHovering(dbg, 5, 8, "previewPopup");
 
   info("Invokes getter and waits for the element to be rendered");
   await clickElement(dbg, "previewPopupInvokeGetterButton");

devtools/client/debugger/test/mochitest/browser_dbg-preview-source-maps.js

@@ -41,28 +41,3 @@ async function assertNoTooltip(dbg) {
   const el = findElement(dbg, "tooltip");
   is(el, null, "Tooltip should not exist");
 }
-
-function assertPreviewTooltip(dbg, { result, expression }) {
-  const previewEl = findElement(dbg, "tooltip");
-  is(previewEl.innerText, result, "Preview text shown to user");
-
-  const preview = dbg.selectors.getPreview();
-  is(`${preview.result}`, result, "Preview.result");
-  is(preview.updating, false, "Preview.updating");
-  is(preview.expression, expression, "Preview.expression");
-}
-
-function assertPreviewPopup(dbg, { field, value, expression }) {
-  const previewEl = findElement(dbg, "popup");
-  is(previewEl.innerText, "", "Preview text shown to user");
-
-  const preview = dbg.selectors.getPreview();
-
-  is(
-    `${preview.result.preview.ownProperties[field].value}`,
-    value,
-    "Preview.result"
-  );
-  is(preview.updating, false, "Preview.updating");
-  is(preview.expression, expression, "Preview.expression");
-}

devtools/client/debugger/test/mochitest/browser_dbg-preview.js

@@ -46,8 +46,8 @@ add_task(async function() {
       column: 47,
       expression: "Foo.#privateStatic",
       fields: [
-        ["first", "a"],
+        ["first", `"a"`],
-        ["second", "b"],
+        ["second", `"b"`],
       ],
     },
     {
@@ -78,7 +78,8 @@ async function previews(dbg, fnName, previews) {
 async function testBucketedArray(dbg) {
   const invokeResult = invokeInTab("largeArray");
   await waitForPaused(dbg);
-  const preview = await hoverOnToken(dbg, 34, 10, "popup");
+  await tryHovering(dbg, 34, 10, "popup");
+  const preview = dbg.selectors.getPreview();
 
   is(
     preview.properties.map(p => p.name).join(" "),

devtools/client/debugger/test/mochitest/browser_dbg-sourcemapped-preview.js

@@ -176,7 +176,7 @@ function testImportedBindings(dbg) {
         line: 24,
         column: 16,
         expression: "aNamespace",
-        fields: [["aNamed", "a-named"], ["default", "a-default"]]
+        fields: [["aNamed", '"a-named"'], ["default", '"a-default"']]
       },
       {
         line: 29,

devtools/client/debugger/test/mochitest/helpers.js

@@ -1576,14 +1576,16 @@ async function waitForContextMenu(dbg) {
   const doc = dbg.toolbox.topDoc;
 
   // there are several context menus, we want the one with the menu-api
-  const popup = await waitFor(() => doc.querySelector('menupopup[menu-api="true"]'));
+  const popup = await waitFor(() =>
+    doc.querySelector('menupopup[menu-api="true"]')
+  );
 
   if (popup.state == "open") {
     return;
   }
 
   await new Promise(resolve => {
-    popup.addEventListener("popupshown", () => resolve(), {once: true});
+    popup.addEventListener("popupshown", () => resolve(), { once: true });
   });
 }
 
@@ -1596,7 +1598,7 @@ async function openContextMenuSubmenu(dbg, selector) {
   const item = findContextMenu(dbg, selector);
   const popup = item.menupopup;
   const popupshown = new Promise(resolve => {
-    popup.addEventListener("popupshown", () => resolve(), {once: true});
+    popup.addEventListener("popupshown", () => resolve(), { once: true });
   });
   item.openMenu(true);
   await popupshown;
@@ -1850,31 +1852,6 @@ async function assertPreviewTooltip(dbg, line, column, { result, expression }) {
   is(preview.expression, expression, "Preview.expression");
 }
 
-async function hoverOnToken(dbg, line, column, selector) {
-  await tryHovering(dbg, line, column, selector);
-  return dbg.selectors.getPreview();
-}
-
-function getPreviewProperty(preview, field) {
-  const { resultGrip } = preview;
-  const properties =
-    resultGrip.preview.ownProperties || resultGrip.preview.items;
-  const property = properties[field];
-  return property.value || property;
-}
-
-async function assertPreviewPopup(
-  dbg,
-  line,
-  column,
-  { field, value, expression }
-) {
-  const preview = await hoverOnToken(dbg, line, column, "popup");
-  is(`${getPreviewProperty(preview, field)}`, value, "Preview.result");
-
-  is(preview.expression, expression, "Preview.expression");
-}
-
 async function assertPreviews(dbg, previews) {
   for (const { line, column, expression, result, fields } of previews) {
     if (fields && result) {
@@ -1882,12 +1859,24 @@ async function assertPreviews(dbg, previews) {
     }
 
     if (fields) {
+      const popupEl = await tryHovering(dbg, line, column, "popup");
+      const oiNodes = Array.from(
+        popupEl.querySelectorAll(".preview-popup .node")
+      );
+
       for (const [field, value] of fields) {
-        await assertPreviewPopup(dbg, line, column, {
+        const node = oiNodes.find(
-          expression,
+          oiNode => oiNode.querySelector(".object-label")?.textContent === field
-          field,
+        );
-          value,
+        if (!node) {
-        });
+          ok(false, `The "${field}" property is not displayed in the popup`);
+        } else {
+          is(
+            node.querySelector(".objectBox").textContent,
+            value,
+            `The "${field}" property has the expected value`
+          );
+        }
       }
     } else {
       await assertPreviewTextValue(dbg, line, column, {