test(empty-state): add a11y; visual tests (#1518)

* test(empty-state): add a11y; visual tests * Generate missing baseline visual regression images
StackExchange · Oct 17, 2023 · 240418e · 240418e
1 parent 5d76484
commit 240418e
Show file tree

Hide file tree

Showing 14 changed files with 70 additions and 0 deletions.
diff --git a/lib/components/empty-state/empty-state.a11y.test.ts b/lib/components/empty-state/empty-state.a11y.test.ts
@@ -0,0 +1,17 @@
+import { html } from "@open-wc/testing";
+import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("empty-state", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-empty-state",
+        children: {
+            default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,
+        },
+        template: ({ component, testid }) => html`
+            <div class="ws3 p16" data-testid="${testid}">${component}</div>
+        `,
+    });
+});
diff --git a/lib/components/empty-state/empty-state.visual.test.ts b/lib/components/empty-state/empty-state.visual.test.ts
@@ -0,0 +1,17 @@
+import { html } from "@open-wc/testing";
+import { SpotEmptyXL } from "@stackoverflow/stacks-icons";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("empty-state", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-empty-state",
+        children: {
+            default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,
+        },
+        template: ({ component, testid }) => html`
+            <div class="ws3 p16" data-testid="${testid}">${component}</div>
+        `,
+    });
+});
diff --git a/screenshots/Chromium/baseline/s-empty-state-dark.png b/screenshots/Chromium/baseline/s-empty-state-dark.png
diff --git a/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.png b/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.png
diff --git a/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.png b/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.png
diff --git a/screenshots/Chromium/baseline/s-empty-state-light.png b/screenshots/Chromium/baseline/s-empty-state-light.png
diff --git a/screenshots/Firefox/baseline/s-empty-state-dark.png b/screenshots/Firefox/baseline/s-empty-state-dark.png
diff --git a/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.png b/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.png
diff --git a/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.png b/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.png
diff --git a/screenshots/Firefox/baseline/s-empty-state-light.png b/screenshots/Firefox/baseline/s-empty-state-light.png
diff --git a/screenshots/Webkit/baseline/s-empty-state-dark.png b/screenshots/Webkit/baseline/s-empty-state-dark.png
diff --git a/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.png b/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.png
diff --git a/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.png b/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.png
diff --git a/screenshots/Webkit/baseline/s-empty-state-light.png b/screenshots/Webkit/baseline/s-empty-state-light.png