From 5f12efe872ad3061e898b51594b7a62a38ef899f Mon Sep 17 00:00:00 2001
From: Dan Cormier <dcormier@stackoverflow.com>
Date: Wed, 18 Oct 2023 18:22:15 -0400
Subject: [PATCH 1/2] test(menu): add a11y; visual tests

---
 lib/components/menu/menu.a11y.test.ts         | 42 +++++++++++++++++++
 lib/components/menu/menu.visual.test.ts       | 42 +++++++++++++++++++
 screenshots/Chromium/baseline/s-menu-dark.png |  3 ++
 .../baseline/s-menu-highcontrast-dark.png     |  3 ++
 .../baseline/s-menu-highcontrast-light.png    |  3 ++
 .../Chromium/baseline/s-menu-light.png        |  3 ++
 screenshots/Firefox/baseline/s-menu-dark.png  |  3 ++
 .../baseline/s-menu-highcontrast-dark.png     |  3 ++
 .../baseline/s-menu-highcontrast-light.png    |  3 ++
 screenshots/Firefox/baseline/s-menu-light.png |  3 ++
 screenshots/Webkit/baseline/s-menu-dark.png   |  3 ++
 .../baseline/s-menu-highcontrast-dark.png     |  3 ++
 .../baseline/s-menu-highcontrast-light.png    |  3 ++
 screenshots/Webkit/baseline/s-menu-light.png  |  3 ++
 14 files changed, 120 insertions(+)
 create mode 100644 lib/components/menu/menu.a11y.test.ts
 create mode 100644 lib/components/menu/menu.visual.test.ts
 create mode 100644 screenshots/Chromium/baseline/s-menu-dark.png
 create mode 100644 screenshots/Chromium/baseline/s-menu-highcontrast-dark.png
 create mode 100644 screenshots/Chromium/baseline/s-menu-highcontrast-light.png
 create mode 100644 screenshots/Chromium/baseline/s-menu-light.png
 create mode 100644 screenshots/Firefox/baseline/s-menu-dark.png
 create mode 100644 screenshots/Firefox/baseline/s-menu-highcontrast-dark.png
 create mode 100644 screenshots/Firefox/baseline/s-menu-highcontrast-light.png
 create mode 100644 screenshots/Firefox/baseline/s-menu-light.png
 create mode 100644 screenshots/Webkit/baseline/s-menu-dark.png
 create mode 100644 screenshots/Webkit/baseline/s-menu-highcontrast-dark.png
 create mode 100644 screenshots/Webkit/baseline/s-menu-highcontrast-light.png
 create mode 100644 screenshots/Webkit/baseline/s-menu-light.png

diff --git a/lib/components/menu/menu.a11y.test.ts b/lib/components/menu/menu.a11y.test.ts
new file mode 100644
index 0000000000..87e7dee5ce
--- /dev/null
+++ b/lib/components/menu/menu.a11y.test.ts
@@ -0,0 +1,42 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("menu", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: `s-menu`,
+        children: {
+            default: `
+                <li class="s-menu--title" role="separator">Title 1</li>
+                <li role="menuitem">
+                    <a href="#" class="s-block-link">Example li</a>
+                </li>
+                <li class="s-menu--title" role="separator">Title 2</li>
+                <li role="menuitem">
+                    <a href="#" class="s-block-link s-block-link__left is-selected">Selected link</a>
+                </li>
+                <li role="menuitem">
+                    <a href="#" class="s-block-link">Example li</a>
+                </li>
+                <li role="menuitem" class="s-menu--label">Example label</li>
+                <li role="menuitem">
+                    <a href="#" class="s-block-link">Block link</a>
+                </li>
+                <li class="s-menu--divider" role="separator"></li>
+                <li role="menuitem">
+                    <a href="…" class="s-block-link s-block-link__danger">Danger link</a>
+                </li>
+            `,
+        },
+        tag: "ul",
+        attributes: {
+            role: "menu",
+        },
+        template: ({ component, testid }) => html`
+            <div class="ws2" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+    });
+});
diff --git a/lib/components/menu/menu.visual.test.ts b/lib/components/menu/menu.visual.test.ts
new file mode 100644
index 0000000000..01a2d23a5b
--- /dev/null
+++ b/lib/components/menu/menu.visual.test.ts
@@ -0,0 +1,42 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("menu", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: `s-menu`,
+        children: {
+            default: `
+                <li class="s-menu--title" role="separator">Title 1</li>
+                <li role="menuitem">
+                    <a href="#" class="s-block-link">Example li</a>
+                </li>
+                <li class="s-menu--title" role="separator">Title 2</li>
+                <li role="menuitem">
+                    <a href="#" class="s-block-link s-block-link__left is-selected">Selected link</a>
+                </li>
+                <li role="menuitem">
+                    <a href="#" class="s-block-link">Example li</a>
+                </li>
+                <li role="menuitem" class="s-menu--label">Example label</li>
+                <li role="menuitem">
+                    <a href="#" class="s-block-link">Block link</a>
+                </li>
+                <li class="s-menu--divider" role="separator"></li>
+                <li role="menuitem">
+                    <a href="…" class="s-block-link s-block-link__danger">Danger link</a>
+                </li>
+            `,
+        },
+        tag: "ul",
+        attributes: {
+            role: "menu",
+        },
+        template: ({ component, testid }) => html`
+            <div class="ws2" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+    });
+});
diff --git a/screenshots/Chromium/baseline/s-menu-dark.png b/screenshots/Chromium/baseline/s-menu-dark.png
new file mode 100644
index 0000000000..28c10f93bb
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-menu-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:12d77082fbe3057457cfd34592d00479a45cd6682f16d370dcafe988371a632d
+size 8319
diff --git a/screenshots/Chromium/baseline/s-menu-highcontrast-dark.png b/screenshots/Chromium/baseline/s-menu-highcontrast-dark.png
new file mode 100644
index 0000000000..f4abc52fd0
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-menu-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0fc38804d129279b30b4f95fe1fa6c515f7a9df78519908b430a8c3e13cecdf5
+size 8474
diff --git a/screenshots/Chromium/baseline/s-menu-highcontrast-light.png b/screenshots/Chromium/baseline/s-menu-highcontrast-light.png
new file mode 100644
index 0000000000..c646bc7bca
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-menu-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:270e0f70b21d31d398a87d3de37928b3fd76dde3785f210b14980d5717f6b96f
+size 8500
diff --git a/screenshots/Chromium/baseline/s-menu-light.png b/screenshots/Chromium/baseline/s-menu-light.png
new file mode 100644
index 0000000000..1f2a00a709
--- /dev/null
+++ b/screenshots/Chromium/baseline/s-menu-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:986620c89c42de3d9fff126f66a68b3eb17621246229cc729cbca426809dbc3a
+size 8337
diff --git a/screenshots/Firefox/baseline/s-menu-dark.png b/screenshots/Firefox/baseline/s-menu-dark.png
new file mode 100644
index 0000000000..cee2b8d60f
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-menu-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:82fe3337a295b59c21342517c4949748355cf1be7de8777315879e80c009a964
+size 9757
diff --git a/screenshots/Firefox/baseline/s-menu-highcontrast-dark.png b/screenshots/Firefox/baseline/s-menu-highcontrast-dark.png
new file mode 100644
index 0000000000..e210117771
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-menu-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6dbc4123e5d1bab8907be4de33d202f3c8213eeba065ef9e0e58d1d6ab0a3207
+size 9815
diff --git a/screenshots/Firefox/baseline/s-menu-highcontrast-light.png b/screenshots/Firefox/baseline/s-menu-highcontrast-light.png
new file mode 100644
index 0000000000..7661c8a856
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-menu-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ec09aca730a9031282469a8d480b0536fb8604df60907a44d390308b42ea8961
+size 9836
diff --git a/screenshots/Firefox/baseline/s-menu-light.png b/screenshots/Firefox/baseline/s-menu-light.png
new file mode 100644
index 0000000000..010b298270
--- /dev/null
+++ b/screenshots/Firefox/baseline/s-menu-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6fa9a5400d7c2239ba4ab6044ded9c5e6c963b1ef01c7debf482e9547617cfa3
+size 9680
diff --git a/screenshots/Webkit/baseline/s-menu-dark.png b/screenshots/Webkit/baseline/s-menu-dark.png
new file mode 100644
index 0000000000..b064f43418
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-menu-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c65986007072282cbaf98b05e80610cd19d28bf783da8ff5c14e37944d69a0dd
+size 7014
diff --git a/screenshots/Webkit/baseline/s-menu-highcontrast-dark.png b/screenshots/Webkit/baseline/s-menu-highcontrast-dark.png
new file mode 100644
index 0000000000..dab96b375f
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-menu-highcontrast-dark.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4213ea7da932b72f101079d842d840dc6281cd49907395eee638143420d224a9
+size 6471
diff --git a/screenshots/Webkit/baseline/s-menu-highcontrast-light.png b/screenshots/Webkit/baseline/s-menu-highcontrast-light.png
new file mode 100644
index 0000000000..07c6508dd1
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-menu-highcontrast-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5893915f826ea6d94a20c1597541d36737a2b4a63e94394a2ce633c98b30f123
+size 7101
diff --git a/screenshots/Webkit/baseline/s-menu-light.png b/screenshots/Webkit/baseline/s-menu-light.png
new file mode 100644
index 0000000000..576b9e18cd
--- /dev/null
+++ b/screenshots/Webkit/baseline/s-menu-light.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:53dcc9bb5cda0f7361a8b5af89504f374324204166655f8c70e6fcf0bda5bfe7
+size 6969

From a72a299ec730fb11f28029e06dd2ec3d47f970e0 Mon Sep 17 00:00:00 2001
From: Dan Cormier <dcormier@stackoverflow.com>
Date: Wed, 18 Oct 2023 18:39:42 -0400
Subject: [PATCH 2/2] Formatting

---
 lib/components/menu/menu.a11y.test.ts   | 4 +---
 lib/components/menu/menu.visual.test.ts | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/lib/components/menu/menu.a11y.test.ts b/lib/components/menu/menu.a11y.test.ts
index 87e7dee5ce..b568d888e4 100644
--- a/lib/components/menu/menu.a11y.test.ts
+++ b/lib/components/menu/menu.a11y.test.ts
@@ -34,9 +34,7 @@ describe("menu", () => {
             role: "menu",
         },
         template: ({ component, testid }) => html`
-            <div class="ws2" data-testid="${testid}">
-                ${component}
-            </div>
+            <div class="ws2" data-testid="${testid}">${component}</div>
         `,
     });
 });
diff --git a/lib/components/menu/menu.visual.test.ts b/lib/components/menu/menu.visual.test.ts
index 01a2d23a5b..ea4e88cf47 100644
--- a/lib/components/menu/menu.visual.test.ts
+++ b/lib/components/menu/menu.visual.test.ts
@@ -34,9 +34,7 @@ describe("menu", () => {
             role: "menu",
         },
         template: ({ component, testid }) => html`
-            <div class="ws2" data-testid="${testid}">
-                ${component}
-            </div>
+            <div class="ws2" data-testid="${testid}">${component}</div>
         `,
     });
 });