@stackoverflow/stacks 2.0.9 → 2.1.0-rc.0

package/lib/test/visual-test-utils.ts

@@ -0,0 +1,58 @@
+import { html, fixture } from "@open-wc/testing";
+import { visualDiff } from "@web/test-runner-visual-regression";
+import { screen } from "@testing-library/dom";
+import { generateTestVariations, type TestVariationArgs } from "./test-utils";
+
+type VisualTestArgs = TestVariationArgs;
+
+const scheduleVisualTest = ({
+    element,
+    testid,
+    theme,
+}: {
+    element: ReturnType<typeof html>;
+    testid: string;
+    theme: string[];
+}) => {
+    it(`visual: ${testid} should not introduce visual regressions`, async () => {
+        document.body.className = "";
+
+        if (theme?.length) {
+            const prefixedThemes = theme.map((t) => `theme-${t}`);
+            document.body.classList.add(...prefixedThemes);
+        }
+
+        let retryAttempts = 3;
+
+        do {
+            await fixture(element);
+            const el = screen.getByTestId(testid);
+            try {
+                await visualDiff(el, testid);
+                return;
+            } catch (error) {
+                const e = error as Error;
+                // if the error is not a visual diff failure, retry
+                // this is to prevent flaky tests due to snapshot capturing
+                if (
+                    retryAttempts > 0 &&
+                    !e.message.includes("Visual diff failed.")
+                ) {
+                    retryAttempts--;
+                    continue;
+                } else {
+                    throw e;
+                }
+            } finally {
+                el.remove();
+            }
+        } while (retryAttempts > 0);
+    });
+};
+
+const runVisualTests = (args: VisualTestArgs) => {
+    const testVariations = generateTestVariations(args);
+    testVariations.forEach(scheduleVisualTest);
+};
+
+export { runVisualTests };

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.0.9",
+    "version": "2.1.0-rc.0",
     "files": [
         "dist",
         "lib"
@@ -27,7 +27,6 @@
         "test:unit": "web-test-runner --group=unit",
         "test:unit:watch": "web-test-runner --group=unit --watch",
         "test:visual": "pwsh run-test-visual.ps1 npx web-test-runner --group=visual",
-        "test:visual:update": "pwsh run-test-visual.ps1 npx web-test-runner --group=visual --update-visual-baseline",
         "test:less": "vitest run .less.test.ts",
         "test:less:update": "npm run test:less -- -u",
         "prepublishOnly": "npm run build",
@@ -55,8 +54,8 @@
         "@types/cssbeautify": "^0.3.5",
         "@types/less": "^3.0.6",
         "@types/mocha": "^10.0.6",
-        "@typescript-eslint/eslint-plugin": "^6.19.0",
-        "@typescript-eslint/parser": "^6.19.0",
+        "@typescript-eslint/eslint-plugin": "^6.20.0",
+        "@typescript-eslint/parser": "^6.21.0",
         "@web/dev-server-esbuild": "^1.0.1",
         "@web/dev-server-rollup": "^0.6.1",
         "@web/test-runner": "^0.18.0",
@@ -65,7 +64,7 @@
         "apca-check": "^0.1.0",
         "colorjs.io": "^0.4.5",
         "concurrently": "^8.2.2",
-        "css-loader": "^6.9.1",
+        "css-loader": "^6.10.0",
         "cssbeautify": "^0.3.1",
         "cssnano": "^6.0.3",
         "docsearch.js": "^2.6.3",
@@ -75,7 +74,7 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-no-unsanitized": "^4.0.2",
         "jquery": "^3.7.1",
-        "less-loader": "^12.1.0",
+        "less-loader": "^12.2.0",
         "list.js": "^2.3.1",
         "markdown-it": "^14.0.0",
         "mini-css-extract-plugin": "^2.7.7",
@@ -89,8 +88,8 @@
         "terser-webpack-plugin": "^5.3.10",
         "ts-loader": "^9.5.1",
         "typescript": "^5.3.3",
-        "vitest": "^1.2.1",
-        "webpack": "^5.89.0",
+        "vitest": "^1.2.2",
+        "webpack": "^5.90.1",
         "webpack-cli": "^5.1.4",
         "webpack-merge": "^5.10.0"
     },

package/lib/components/popover/tooltip.visual.test.ts

@@ -1,31 +0,0 @@
-import { html, fixture } from "@open-wc/testing";
-import { screen } from "@testing-library/dom";
-import userEvent from "@testing-library/user-event";
-import { visualDiff } from "@web/test-runner-visual-regression";
-import "../../index";
-
-const user = userEvent.setup();
-
-describe("tooltip", () => {
-    it("should not introduce visual regressions", async () => {
-        const wrapper = await fixture(html`
-            <div style="height: 100px; width: 160px; display: inline-block;">
-                <button
-                    class="s-btn s-btn__filled"
-                    role="button"
-                    data-controller="s-tooltip"
-                    title="tooltip content"
-                    data-s-tooltip-placement="bottom-start"
-                >
-                    Hover tooltip popover
-                </button>
-            </div>
-        `);
-
-        const trigger = screen.getByRole("button");
-        await user.hover(trigger);
-        await screen.findByRole("tooltip");
-
-        await visualDiff(wrapper, "s-tooltip");
-    });
-});