test(breadcrumbs): add a11y, visual tests (#1345)

dancormier · web-flow · commit c2884fd0c27b · 2023-05-05T12:49:42.000-04:00
diff --git a/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts b/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts
@@ -0,0 +1,37 @@
+import { runComponentTests } from "../../test/test-utils";
+import { html } from "@open-wc/testing";
+import "../../index";
+
+describe("breadcrumbs", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-breadcrumbs",
+        children: {
+            default: `
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Stacks</a>
+                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
+                </div>
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Help center</a>
+                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
+                </div>
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Icons</a>
+                </div>
+            `,
+        },
+        attributes: {
+            "aria-label": "Breadcrumb navigation",
+        },
+        tag: "nav",
+        template: ({ component, testid }) => html`
+            <div
+                class="d-inline-flex ai-center jc-center hs1 ws2 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+    });
+});
diff --git a/lib/components/breadcrumbs/breadcrumbs.visual.test.ts b/lib/components/breadcrumbs/breadcrumbs.visual.test.ts
@@ -0,0 +1,37 @@
+import { runComponentTests } from "../../test/test-utils";
+import { html } from "@open-wc/testing";
+import "../../index";
+
+describe("breadcrumbs", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-breadcrumbs",
+        children: {
+            default: `
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Stacks</a>
+                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
+                </div>
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Help center</a>
+                    <span class="s-breadcrumbs--divider" aria-hidden="true">|</span>
+                </div>
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link" href="#">Icons</a>
+                </div>
+            `,
+        },
+        attributes: {
+            "aria-label": "Breadcrumb navigation",
+        },
+        tag: "nav",
+        template: ({ component, testid }) => html`
+            <div
+                class="d-inline-flex ai-center jc-center hs1 ws2 p8"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+    });
+});
diff --git a/screenshots/Chromium/baseline/s-breadcrumbs-dark.png b/screenshots/Chromium/baseline/s-breadcrumbs-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bba765cecd09998d830c0f719e82f8427847ed3b49264cdd9aefde394558a48b
+size 3116
diff --git a/screenshots/Chromium/baseline/s-breadcrumbs-highcontrast-dark.png b/screenshots/Chromium/baseline/s-breadcrumbs-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c7de4ad9d9df93d1a8331065f1d4bf592544cf34f263fd8b2ff14911f26be551
+size 3102
diff --git a/screenshots/Chromium/baseline/s-breadcrumbs-highcontrast-light.png b/screenshots/Chromium/baseline/s-breadcrumbs-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2087cca0b498a719ab7b166ee7ffc04e16bd1dfd473ad1960171dd9d87523aa4
+size 3114
diff --git a/screenshots/Chromium/baseline/s-breadcrumbs-light.png b/screenshots/Chromium/baseline/s-breadcrumbs-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f5e20a93bcc5a0eb145341bb09ede5ae7be547f166a0367b0f9b496d68d787f9
+size 3061
diff --git a/screenshots/Firefox/baseline/s-breadcrumbs-dark.png b/screenshots/Firefox/baseline/s-breadcrumbs-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:68264dd9896c112b80deac4430c9b0f1b04174e833b2471ede1971ded4b66c71
+size 3528
diff --git a/screenshots/Firefox/baseline/s-breadcrumbs-highcontrast-dark.png b/screenshots/Firefox/baseline/s-breadcrumbs-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:15a44590dde7378b8c3c45b92574abcb30db037a0315155535e016d4092c0604
+size 3576
diff --git a/screenshots/Firefox/baseline/s-breadcrumbs-highcontrast-light.png b/screenshots/Firefox/baseline/s-breadcrumbs-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f81d4a57c854afa3f5e61186f8c87f5a1ed2539181978555a8ca7297f99f2640
+size 3599
diff --git a/screenshots/Firefox/baseline/s-breadcrumbs-light.png b/screenshots/Firefox/baseline/s-breadcrumbs-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6a76782805c647f1350b3802e10ffbbae031358e25dc79f284b8f19c85b0cb47
+size 3410
diff --git a/screenshots/Webkit/baseline/s-breadcrumbs-dark.png b/screenshots/Webkit/baseline/s-breadcrumbs-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:885680fc5a04aaaef797e5fef079127dd4cbae0f5ca0ef5ef52ad63c2036c18b
+size 3372
diff --git a/screenshots/Webkit/baseline/s-breadcrumbs-highcontrast-dark.png b/screenshots/Webkit/baseline/s-breadcrumbs-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ee46730f73f356d3ccf35ad9188da98a8f587d006cad7ce763212109d2514c8f
+size 3512
diff --git a/screenshots/Webkit/baseline/s-breadcrumbs-highcontrast-light.png b/screenshots/Webkit/baseline/s-breadcrumbs-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:df6c7cf029ad83bda9e07bce481ef3e7d33afbb043a555bc00d2b99774363eb6
+size 3418
diff --git a/screenshots/Webkit/baseline/s-breadcrumbs-light.png b/screenshots/Webkit/baseline/s-breadcrumbs-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4ae0deba6a56666d24018821ea7fa369541782acaf136d169877ca1df7a79ed4
+size 3354
