happo 6.8.0 → 6.9.0

package/dist/cypress/index.js

@@ -817,11 +817,12 @@ function inlineShadowRoots(element) {
     elements.unshift(...Array.from(currentElement.children));
   }
   for (const element2 of elementsToProcess) {
-    const hiddenElement = document.createElement("happo-shadow-content");
+    const ownerDoc = element2.ownerDocument;
+    const hiddenElement = ownerDoc.createElement("happo-shadow-content");
     hiddenElement.style.display = "none";
     if (element2.shadowRoot) {
-      for (const styleSheet of element2.shadowRoot.adoptedStyleSheets) {
-        const styleElement = document.createElement("style");
+      for (const styleSheet of element2.shadowRoot.adoptedStyleSheets || []) {
+        const styleElement = ownerDoc.createElement("style");
         styleElement.dataset.happoInlined = "true";
         const styleContent = getContentFromStyleSheet(styleSheet);
         styleElement.textContent = styleContent;
@@ -850,13 +851,51 @@ function findSvgElementsWithSymbols(element) {
     (svg) => svg.querySelector("symbol")
   );
 }
+function getTrackedHoverElement(doc) {
+  return doc.defaultView?.__happoHoveredElement ?? null;
+}
+function getTrackedActiveElement(doc) {
+  return doc.defaultView?.__happoActiveElement ?? null;
+}
+function isElementNode(root) {
+  return root.nodeType === 1;
+}
+function collectAllRoots(root) {
+  const roots = [root];
+  if (isElementNode(root) && root.shadowRoot) {
+    roots.push(...collectAllRoots(root.shadowRoot));
+  }
+  for (const el of root.querySelectorAll("*")) {
+    if (el.shadowRoot) {
+      roots.push(...collectAllRoots(el.shadowRoot));
+    }
+  }
+  return roots;
+}
+function getDeepActiveElement(doc) {
+  let el = doc.activeElement;
+  while (el?.shadowRoot?.activeElement) {
+    el = el.shadowRoot.activeElement;
+  }
+  return el;
+}
+var PSEUDO_STATE_ATTRS = [
+  { pseudo: ":hover", attrSelector: "[data-happo-hover]", datasetKey: "happoHover" },
+  { pseudo: ":active", attrSelector: "[data-happo-active]", datasetKey: "happoActive" },
+  {
+    pseudo: ":focus-visible",
+    attrSelector: "[data-happo-focus-visible]",
+    datasetKey: "happoFocusVisible"
+  }
+];
 function takeDOMSnapshot({
   doc,
   element: oneOrMoreElements,
   responsiveInlinedCanvases = false,
   transformDOM,
   handleBase64Image,
-  strategy = "hoist"
+  strategy = "hoist",
+  autoApplyPseudoStateAttributes = false
 }) {
   if (doc == null) {
     throw new Error("doc cannot be null or undefined");
@@ -868,6 +907,7 @@ function takeDOMSnapshot({
   const allElements = transformToElementArray(oneOrMoreElements);
   const htmlParts = [];
   const assetUrls = [];
+  const allDocRoots = autoApplyPseudoStateAttributes ? collectAllRoots(doc) : [doc];
   for (const originalElement of allElements) {
     const { element, cleanup: canvasCleanup } = inlineCanvases(originalElement, {
       doc,
@@ -885,13 +925,55 @@ function takeDOMSnapshot({
         scriptEl.remove();
       }
     }
-    for (const e of doc.querySelectorAll(
-      "[data-happo-focus]"
-    )) {
-      delete e.dataset.happoFocus;
+    for (const root of allDocRoots) {
+      for (const e of root.querySelectorAll(
+        "[data-happo-focus]"
+      )) {
+        delete e.dataset.happoFocus;
+      }
     }
-    if (doc.activeElement && doc.activeElement !== doc.body && isElementWithDataset(doc.activeElement)) {
-      doc.activeElement.dataset.happoFocus = "true";
+    const activeElement = autoApplyPseudoStateAttributes ? getDeepActiveElement(doc) : doc.activeElement;
+    if (activeElement && activeElement !== doc.body && isElementWithDataset(activeElement)) {
+      activeElement.dataset.happoFocus = "true";
+    }
+    if (autoApplyPseudoStateAttributes) {
+      const elementRoots = collectAllRoots(element);
+      for (const { pseudo, attrSelector, datasetKey } of PSEUDO_STATE_ATTRS) {
+        for (const root of elementRoots) {
+          let matches;
+          let rootMatches;
+          try {
+            matches = root.querySelectorAll(pseudo);
+            rootMatches = isElementNode(root) && root.matches(pseudo);
+          } catch {
+            continue;
+          }
+          for (const e of root.querySelectorAll(attrSelector)) {
+            if (isElementWithDataset(e)) {
+              delete e.dataset[datasetKey];
+            }
+          }
+          if (isElementNode(root) && isElementWithDataset(root)) {
+            delete root.dataset[datasetKey];
+          }
+          for (const e of matches) {
+            if (isElementWithDataset(e)) {
+              e.dataset[datasetKey] = "true";
+            }
+          }
+          if (rootMatches && isElementWithDataset(root)) {
+            root.dataset[datasetKey] = "true";
+          }
+        }
+      }
+      const trackedHoverEl = getTrackedHoverElement(doc);
+      if (trackedHoverEl && isElementWithDataset(trackedHoverEl) && element.contains(trackedHoverEl)) {
+        trackedHoverEl.dataset.happoHover = "true";
+      }
+      const trackedActiveEl = getTrackedActiveElement(doc);
+      if (trackedActiveEl && isElementWithDataset(trackedActiveEl) && element.contains(trackedActiveEl)) {
+        trackedActiveEl.dataset.happoActive = "true";
+      }
     }
     inlineShadowRoots(element);
     markModalDialogs(element);
@@ -963,12 +1045,56 @@ Cypress.on("window:before:load", (win) => {
     throw new TypeError("CSSStyleSheet is not supported in this browser");
   }
   applyConstructedStylesPatch(win);
+  let _happoHoveredElement = null;
+  let _happoActiveElement = null;
+  win.document.addEventListener(
+    "mouseover",
+    (e) => {
+      if (isEventTargetElement(e.target)) {
+        _happoHoveredElement = e.target;
+      }
+    },
+    true
+  );
+  win.document.addEventListener(
+    "mouseout",
+    (e) => {
+      if (_happoHoveredElement === e.target) {
+        _happoHoveredElement = null;
+      }
+    },
+    true
+  );
+  win.document.addEventListener(
+    "mousedown",
+    (e) => {
+      if (isEventTargetElement(e.target)) {
+        _happoActiveElement = e.target;
+      }
+    },
+    true
+  );
+  win.document.addEventListener("mouseup", () => {
+    _happoActiveElement = null;
+  }, true);
+  Object.defineProperty(win, "__happoHoveredElement", {
+    get: () => _happoHoveredElement,
+    configurable: true
+  });
+  Object.defineProperty(win, "__happoActiveElement", {
+    get: () => _happoActiveElement,
+    configurable: true
+  });
 });
+function isEventTargetElement(target) {
+  return target != null && "nodeType" in target && target.nodeType === 1;
+}
 var config = {
   responsiveInlinedCanvases: false,
   canvasChunkSize: 2e5
   // 800 Kb per chunk
 };
+var cachedAutoApplyPseudoStateAttributes = null;
 var configure = (userConfig) => {
   config = { ...config, ...userConfig };
 };
@@ -1002,46 +1128,61 @@ Cypress.Commands.add(
     if (!element) {
       throw new Error("element cannot be null or undefined");
     }
-    const properties = {
-      doc,
-      element,
-      responsiveInlinedCanvases: resInCan,
-      strategy: snapshotStrategy,
-      handleBase64Image: ({ base64Url, element: element2 }) => {
-        const rawBase64 = base64Url.replace(/^data:image\/png;base64,/, "");
-        const chunks = chunked(rawBase64, config.canvasChunkSize);
-        for (let i = 0; i < chunks.length; i++) {
-          const base64Chunk = chunks[i];
-          const isFirst = i === 0;
-          const isLast = i === chunks.length - 1;
-          cy.task(
-            "happoRegisterBase64Image",
-            {
-              base64Chunk,
-              src: element2.getAttribute("src"),
-              isFirst,
-              isLast
-            },
-            taskOptions
-          );
+    const takeSnapshot = (autoApplyPseudoStateAttributes) => {
+      const properties = {
+        doc,
+        element,
+        responsiveInlinedCanvases: resInCan,
+        strategy: snapshotStrategy,
+        autoApplyPseudoStateAttributes,
+        handleBase64Image: ({ base64Url, element: element2 }) => {
+          const rawBase64 = base64Url.replace(/^data:image\/png;base64,/, "");
+          const chunks = chunked(rawBase64, config.canvasChunkSize);
+          for (let i = 0; i < chunks.length; i++) {
+            const base64Chunk = chunks[i];
+            const isFirst = i === 0;
+            const isLast = i === chunks.length - 1;
+            cy.task(
+              "happoRegisterBase64Image",
+              {
+                base64Chunk,
+                src: element2.getAttribute("src"),
+                isFirst,
+                isLast
+              },
+              taskOptions
+            );
+          }
         }
+      };
+      if (transformDOM) {
+        properties.transformDOM = transformDOM;
       }
+      const domSnapshot = takeDOMSnapshot(properties);
+      cy.task(
+        "happoRegisterSnapshot",
+        {
+          timestamp: Date.now(),
+          component,
+          variant,
+          targets,
+          ...domSnapshot
+        },
+        taskOptions
+      );
     };
-    if (transformDOM) {
-      properties.transformDOM = transformDOM;
+    if (cachedAutoApplyPseudoStateAttributes === null) {
+      cy.task(
+        "happoGetIntegrationConfig",
+        null,
+        { ...taskOptions, log: false }
+      ).then((integrationConfig) => {
+        cachedAutoApplyPseudoStateAttributes = integrationConfig?.autoApplyPseudoStateAttributes ?? false;
+        takeSnapshot(cachedAutoApplyPseudoStateAttributes);
+      });
+    } else {
+      takeSnapshot(cachedAutoApplyPseudoStateAttributes);
     }
-    const domSnapshot = takeDOMSnapshot(properties);
-    cy.task(
-      "happoRegisterSnapshot",
-      {
-        timestamp: Date.now(),
-        component,
-        variant,
-        targets,
-        ...domSnapshot
-      },
-      taskOptions
-    );
   }
 );
 export {