From eeb4160616125fe35f4a1536b181bd356325524c Mon Sep 17 00:00:00 2001
From: Tommaso Menga <tommaso.menga-94@hotmail.it>
Date: Mon, 8 Jul 2024 08:44:54 +0200
Subject: [PATCH] test(skiplink-list): add visual spec (#2888)

---
 src/elements/skiplink-list/readme.md          |  7 ++--
 src/elements/skiplink-list/skiplink-list.ts   |  1 +
 .../skiplink-list.visual.spec.ts              | 34 +++++++++++++++++++
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/elements/skiplink-list/skiplink-list.visual.spec.ts

diff --git a/src/elements/skiplink-list/readme.md b/src/elements/skiplink-list/readme.md
index c4546a7547..5e6e0207ef 100644
--- a/src/elements/skiplink-list/readme.md
+++ b/src/elements/skiplink-list/readme.md
@@ -31,6 +31,7 @@ and it can be set using the `title-content` property.
 
 ## Slots
 
-| Name | Description                                                                                               |
-| ---- | --------------------------------------------------------------------------------------------------------- |
-|      | Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`. |
+| Name    | Description                                                                                               |
+| ------- | --------------------------------------------------------------------------------------------------------- |
+|         | Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`. |
+| `title` | Use this to provide a title for the skiplink-list (optional).                                             |
diff --git a/src/elements/skiplink-list/skiplink-list.ts b/src/elements/skiplink-list/skiplink-list.ts
index 2340a8fe5a..a458d8875e 100644
--- a/src/elements/skiplink-list/skiplink-list.ts
+++ b/src/elements/skiplink-list/skiplink-list.ts
@@ -21,6 +21,7 @@ import '../title.js';
  * It displays a list of `sbb-block-link`/`sbb-block-link-button` which are visible only when focused.
  *
  * @slot - Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`.
+ * @slot title - Use this to provide a title for the skiplink-list (optional).
  * @cssprop [--sbb-skiplink-list-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
  * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
  * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
diff --git a/src/elements/skiplink-list/skiplink-list.visual.spec.ts b/src/elements/skiplink-list/skiplink-list.visual.spec.ts
new file mode 100644
index 0000000000..a1d43ec131
--- /dev/null
+++ b/src/elements/skiplink-list/skiplink-list.visual.spec.ts
@@ -0,0 +1,34 @@
+import { html, nothing, type TemplateResult } from 'lit';
+
+import { describeViewports, visualDiffDefault, visualDiffFocus } from '../core/testing/private.js';
+
+import './skiplink-list.js';
+import '../link/block-link.js';
+
+const template = (title?: string): TemplateResult => html`
+  <sbb-skiplink-list title-content=${title || nothing}>
+    <sbb-block-link href="#">Link 1</sbb-block-link>
+    <sbb-block-link href="#">Link 2</sbb-block-link>
+    <sbb-block-link href="#">Link 3</sbb-block-link>
+  </sbb-skiplink-list>
+`;
+
+describe(`sbb-skiplink-list`, () => {
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const state of [visualDiffDefault, visualDiffFocus]) {
+      it(
+        state.name,
+        state.with(async (setup) => {
+          await setup.withFixture(template(), { minHeight: '100px' });
+        }),
+      );
+    }
+
+    it(
+      `title content`,
+      visualDiffFocus.with(async (setup) => {
+        await setup.withFixture(template('Skip to'), { minHeight: '100px' });
+      }),
+    );
+  });
+});