test(skiplink-list): add visual spec (#2888)

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).                                             |

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`.

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' });
+      }),
+    );
+  });
+});