From a30fe1dd25452d794aca42491496d5b88a9d7d1f Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 3 Jul 2024 17:46:39 +0200 Subject: [PATCH 1/3] test(skiplink-list): add visual spec --- src/elements/skiplink-list/readme.md | 7 +- src/elements/skiplink-list/skiplink-list.ts | 1 + .../skiplink-list.visual.spec.ts | 64 +++++++++++++++++++ 3 files changed, 69 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..48deeb1cfd --- /dev/null +++ b/src/elements/skiplink-list/skiplink-list.visual.spec.ts @@ -0,0 +1,64 @@ +import { html, type TemplateResult } from 'lit'; + +import { describeViewports, visualDiffDefault, visualDiffFocus } from '../core/testing/private.js'; + +import './skiplink-list.js'; +import '../link/block-link.js'; + +const links = (): TemplateResult => html` + Link 1 + Link 2 + Link 3 +`; + +describe(`sbb-skiplink-list`, () => { + describeViewports({ viewports: ['zero', 'medium'] }, () => { + it( + 'not focused', + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html` ${links()} `, + { minHeight: '100px' }, + ); + }), + ); + + it( + `no title`, + visualDiffFocus.with(async (setup) => { + await setup.withFixture(html` ${links()} `, { + minHeight: '100px', + }); + }), + ); + + it( + `title content`, + visualDiffFocus.with(async (setup) => { + await setup.withFixture( + html` + + ${links()} + + `, + { minHeight: '100px' }, + ); + }), + ); + + it( + `slotted title`, + visualDiffFocus.with(async (setup) => { + await setup.withFixture( + html` + + Slotted title + ${links()} + + `, + { minHeight: '100px' }, + ); + }), + ); + }); +}); From c2de58ea7faa368959d47557eac3ff54ac589317 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Fri, 5 Jul 2024 09:36:53 +0200 Subject: [PATCH 2/3] test(skiplink-list): pr feedbacks --- .../skiplink-list.visual.spec.ts | 45 +++++-------------- 1 file changed, 10 insertions(+), 35 deletions(-) diff --git a/src/elements/skiplink-list/skiplink-list.visual.spec.ts b/src/elements/skiplink-list/skiplink-list.visual.spec.ts index 48deeb1cfd..ee0ce38edc 100644 --- a/src/elements/skiplink-list/skiplink-list.visual.spec.ts +++ b/src/elements/skiplink-list/skiplink-list.visual.spec.ts @@ -1,14 +1,16 @@ -import { html, type TemplateResult } from 'lit'; +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 links = (): TemplateResult => html` - Link 1 - Link 2 - Link 3 +const template = (title?: string): TemplateResult => html` + + Link 1 + Link 2 + Link 3 + `; describe(`sbb-skiplink-list`, () => { @@ -16,48 +18,21 @@ describe(`sbb-skiplink-list`, () => { it( 'not focused', visualDiffDefault.with(async (setup) => { - await setup.withFixture( - html` ${links()} `, - { minHeight: '100px' }, - ); + await setup.withFixture(template(), { minHeight: '100px' }); }), ); it( `no title`, visualDiffFocus.with(async (setup) => { - await setup.withFixture(html` ${links()} `, { - minHeight: '100px', - }); + await setup.withFixture(template(), { minHeight: '100px' }); }), ); it( `title content`, visualDiffFocus.with(async (setup) => { - await setup.withFixture( - html` - - ${links()} - - `, - { minHeight: '100px' }, - ); - }), - ); - - it( - `slotted title`, - visualDiffFocus.with(async (setup) => { - await setup.withFixture( - html` - - Slotted title - ${links()} - - `, - { minHeight: '100px' }, - ); + await setup.withFixture(template(), { minHeight: '100px' }); }), ); }); From 7744086d49f4817037006d28d895cb54597b18bc Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Fri, 5 Jul 2024 09:38:54 +0200 Subject: [PATCH 3/3] test(skiplink-list): pr feedbacks --- .../skiplink-list.visual.spec.ts | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/src/elements/skiplink-list/skiplink-list.visual.spec.ts b/src/elements/skiplink-list/skiplink-list.visual.spec.ts index ee0ce38edc..a1d43ec131 100644 --- a/src/elements/skiplink-list/skiplink-list.visual.spec.ts +++ b/src/elements/skiplink-list/skiplink-list.visual.spec.ts @@ -15,24 +15,19 @@ const template = (title?: string): TemplateResult => html` describe(`sbb-skiplink-list`, () => { describeViewports({ viewports: ['zero', 'medium'] }, () => { - it( - 'not focused', - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template(), { minHeight: '100px' }); - }), - ); - - it( - `no title`, - visualDiffFocus.with(async (setup) => { - await setup.withFixture(template(), { minHeight: '100px' }); - }), - ); + 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(), { minHeight: '100px' }); + await setup.withFixture(template('Skip to'), { minHeight: '100px' }); }), ); });