Add snapshot tests for scrollable elements

Author: binrysearch

cypress/snapshots/base/src/packages/tour/position.cy.ts/scrollable-first-step.png

@@ -27,6 +27,7 @@
     "test:prettier": "prettier --check '(src|tests)/**/*.(js|ts|json|html)' '!tests/cypress/setup/dist'",
     "test:watch": "jest --watch",
     "test:jest": "jest --coverage --silent --ci --coverage --coverageReporters=\"text\" --coverageReporters=\"text-summary\"",
+    "test:cypress:docker": "start-server-and-test dev http://localhost:10001/dist/intro.js 'docker run -it -v $PWD:/e2e -w /e2e --entrypoint=cypress cypress/included:cypress-13.17.0-node-22.13.0-chrome-131.0.6778.264-1-ff-134.0-edge-131.0.2903.112-1 run --env visualRegressionType=regression'",
     "test:cypress": "start-server-and-test dev http://localhost:10001/dist/intro.js 'docker run -it -v $PWD:/e2e -w /e2e --entrypoint=cypress cypress/included:cypress-13.17.0-node-22.13.0-chrome-131.0.6778.264-1-ff-134.0-edge-131.0.2903.112-1 run --env visualRegressionType=regression || cypress run --env visualRegressionType=regression'",
     "release": "./bin/release.sh || true",
     "prebuild": "rimraf ./dist",

cypress/snapshots/base/src/packages/tour/position.cy.ts/scrollable-fourth-step.png

@@ -1,100 +1,58 @@
-describe("Intro.js tooltip position with scrollable container", () => {
+context("Intro.js tooltip position with scrollable container", () => {
   beforeEach(() => {
     cy.visit("./cypress/setup/index.html");
 
-    // intro.js CSS
-    cy.document().then((doc) => {
-      if (!doc.getElementById("introjs-css")) {
-        const link = doc.createElement("link");
-        link.id = "introjs-css";
-        link.rel = "stylesheet";
-        link.href = "https://unpkg.com/intro.js/minified/introjs.min.css";
-        doc.head.appendChild(link);
-      }
-    });
-
     // scrollable container and target element
     cy.document().then((doc) => {
       const container = doc.createElement("div");
       container.id = "scrollable-container";
       container.style.cssText =
-        "height: 600px; overflow-y: auto; border: 2px solid gray; margin-bottom: 20px;";
-
-      const inner = doc.createElement("div");
-      inner.style.height = "1000px";
-      inner.style.position = "relative";
-
-      const target = doc.createElement("div");
-      target.id = "target-element";
-      target.style.cssText =
-        "margin-top: 800px; background-color: yellow; padding: 10px;";
-      target.setAttribute("data-intro", "Scrollable test element");
-      target.textContent = "Step Element (scrollable test)";
-
-      inner.appendChild(target);
-      container.appendChild(inner);
+        "height: 600px; overflow-y: scroll; border: 2px solid gray; margin-bottom: 20px;";
+
+      const getTargetElement = (id, marginTop, label) => {
+        const target = doc.createElement("div");
+        target.id = id;
+        target.style.cssText = `margin-top: ${marginTop}; background-color: yellow; padding: 10px;`;
+        target.setAttribute("data-intro", label);
+        target.textContent = `Step Element (${label})`;
+        return target;
+      };
+
+      container.appendChild(
+        getTargetElement(
+          "scrollable-target-element-1",
+          "5px",
+          "First Scrollable Step"
+        )
+      );
+      container.appendChild(
+        getTargetElement(
+          "scrollable-target-element-2",
+          "800px",
+          "Second Scrollable Step"
+        )
+      );
       doc.body.prepend(container);
     });
-
-    // intro.js script and initialize tour
-    cy.window().then((win) => {
-      return new Promise((resolve) => {
-        const script = win.document.createElement("script");
-        script.src = "https://unpkg.com/intro.js/minified/intro.min.js";
-        script.onload = () => {
-          const tour = win.introJs.tour();
-          tour.setOptions({
-            steps: [
-              { element: "#target-element", intro: "Scrollable test tooltip" },
-              {
-                element: "#target-element",
-                intro: "Scrollable test tooltip 2",
-              },
-            ],
-          });
-          win.__testTour = tour;
-          resolve();
-        };
-        win.document.head.appendChild(script);
-      });
-    });
   });
 
   it("scrolls and ensures tooltip is correctly positioned near target", () => {
     cy.get("#scrollable-container").scrollTo("top");
-    cy.get("#target-element")
-      .scrollIntoView({ block: "center" })
-      .should("be.visible");
 
     cy.window().then((win) => {
-      win.__testTour.start();
-    });
-
-    cy.get(".introjs-tooltip", { timeout: 500 }).should("be.visible");
-
-    cy.get("#target-element").then(($target) => {
-      const targetRect = $target[0].getBoundingClientRect();
-
-      cy.get(".introjs-tooltip").then(($tooltip) => {
-        const tooltipRect = $tooltip[0].getBoundingClientRect();
+      cy.compareSnapshot("scrollable-first-step");
 
-        cy.log("Target Rect:", JSON.stringify(targetRect));
-        cy.log("Tooltip Rect:", JSON.stringify(tooltipRect));
+      win.introJs.tour().start();
+      cy.wait(500);
+      cy.compareSnapshot("scrollable-second-step");
 
-        const horizontallySeparate =
-          tooltipRect.right < targetRect.left ||
-          tooltipRect.left > targetRect.right;
-        const verticallySeparate =
-          tooltipRect.bottom < targetRect.top ||
-          tooltipRect.top > targetRect.bottom;
-        expect(horizontallySeparate || verticallySeparate).to.be.true;
+      cy.nextStep();
+      cy.wait(500);
+      cy.compareSnapshot("scrollable-third-step");
 
-        const verticalDistance = Math.min(
-          Math.abs(tooltipRect.top - targetRect.bottom),
-          Math.abs(targetRect.top - tooltipRect.bottom)
-        );
-        expect(verticalDistance).to.be.lessThan(16);
-      });
+      cy.nextStep();
+      cy.wait(800);
+      cy.compareSnapshot("scrollable-fourth-step");
     });
   });
 });