From 85ed2f158cb31a9d514a11e5472f22e29d03ed05 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Thu, 6 Jun 2024 14:30:18 +0200 Subject: [PATCH 1/5] chore: improve stories --- .../stepper/stepper/stepper.stories.ts | 277 ++++++------------ 1 file changed, 84 insertions(+), 193 deletions(-) diff --git a/src/elements/stepper/stepper/stepper.stories.ts b/src/elements/stepper/stepper/stepper.stories.ts index 0b704fc90b..9b1d70dd56 100644 --- a/src/elements/stepper/stepper/stepper.stories.ts +++ b/src/elements/stepper/stepper/stepper.stories.ts @@ -1,7 +1,7 @@ import { withActions } from '@storybook/addon-actions/decorator'; import type { InputType } from '@storybook/types'; import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; -import { html, type TemplateResult } from 'lit'; +import { html, nothing, type TemplateResult } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; import { sbbSpread } from '../../../storybook/helpers/spread.js'; @@ -19,6 +19,13 @@ import '../../form-field.js'; import '../../form-error.js'; import '../../card.js'; +const loremIpsum = ` + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero + eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata + sanctus est Lorem ipsum dolor sit amet. +`; + const linear: InputType = { control: { type: 'boolean', @@ -64,6 +71,74 @@ const textBlock = (): TemplateResult => html` `; +const firstFormElement = (sbbFormError: SbbFormErrorElement): TemplateResult => html` + + + { + const input = event.currentTarget as HTMLInputElement; + if (input.value !== '') { + sbbFormError.remove(); + input.classList.remove('sbb-invalid'); + } else { + input.closest('sbb-form-field')!.append(sbbFormError); + input.classList.add('sbb-invalid'); + } + }} + required + placeholder="Your name" + name="name" + value="Christina Müller" + /> + +`; + +const secondFormElement = (): TemplateResult => html` + + + + +`; + +const thirdFormElement = (): TemplateResult => html` + + + + +`; + +const stepperContent = (disabled: boolean, longLabel: boolean): TemplateResult[] => + ['First', 'Second', 'Third', 'Fourth'].map( + (element, index, arr) => html` + ${longLabel ? loremIpsum : `${element} step`} + +
+ ${element} step content${longLabel ? '.' : `: ${loremIpsum}`} +
+ ${index !== 0 + ? html`Back` + : nothing} + ${index !== arr.length - 1 + ? html`Next` + : nothing} + ${index === arr.length - 1 + ? html`Submit` + : nothing} + + `, + ); + const WithSingleFormTemplate = (args: Args): TemplateResult => { document.querySelector('sbb-stepper')?.reset(); document.querySelector('sbb-form-error')?.remove(); @@ -98,37 +173,14 @@ const WithSingleFormTemplate = (args: Args): TemplateResult => { }} >
- - - { - const input = event.currentTarget as HTMLInputElement; - if (input.value !== '') { - sbbFormError.remove(); - input.classList.remove('sbb-invalid'); - } else { - input.closest('sbb-form-field')!.append(sbbFormError); - input.classList.add('sbb-invalid'); - } - }} - required - placeholder="Your name" - name="name" - value="Christina Müller" - /> - + ${firstFormElement(sbbFormError)}
Next Step 2 -
- - - - -
+
${secondFormElement()}
Back Next @@ -138,17 +190,7 @@ const WithSingleFormTemplate = (args: Args): TemplateResult => { Step 3 -
- - - - -
+
${thirdFormElement()}
Back Next @@ -212,25 +254,7 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => { ); }} > - - - { - const input = event.currentTarget as HTMLInputElement; - if (input.value !== '') { - sbbFormError.remove(); - input.classList.remove('sbb-invalid'); - } else { - input.closest('sbb-form-field')!.append(sbbFormError); - input.classList.add('sbb-invalid'); - } - }} - required - placeholder="Your name" - name="name" - value="Christina Müller" - /> - + ${firstFormElement(sbbFormError)} Next @@ -239,12 +263,7 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => { Step 2
-
- - - - -
+
${secondFormElement()}
Back Next @@ -253,17 +272,7 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => { Step 3
-
- - - - -
+
${thirdFormElement()}
Back Next @@ -295,132 +304,14 @@ const WithMultipleFormsTemplate = (args: Args): TemplateResult => { const Template = ({ disabled, ...args }: Args): TemplateResult => html` - Step 1 - -
- First step content: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero - eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata - sanctus est Lorem ipsum dolor sit amet. -
- Next - - - Step 2 - -
- Second step content: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam - nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At - vero eos et accusam et justo duo dolores et ea rebum. -
- Back - Next - - - Step 3 - -
- Third step content: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. -
- Back - Next - - - Step 4 - -
- Forth step content: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero - eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata - sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing - elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed - diam voluptua. -
- Back - Submit - + ${stepperContent(disabled, false)} ${textBlock()} `; const LongLabelsTemplate = (args: Args): TemplateResult => html` - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - -
- First step content. -
- Next - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod - tempor. - -
- Second step content. -
- Back - Next - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor - invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. - -
- Third step content. -
- Back - Next - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod - tempor. - -
- Forth step content. -
- Back - Submit - + ${stepperContent(false, true)} ${textBlock()} `; From c325151105b51d01f0745f9e08cca2c687265e5a Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 10 Jun 2024 09:27:02 +0200 Subject: [PATCH 2/5] chore: reduce lorem-ipsum text to fix chromatic snapshot error on dimensions --- src/elements/stepper/stepper/stepper.stories.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/elements/stepper/stepper/stepper.stories.ts b/src/elements/stepper/stepper/stepper.stories.ts index 9b1d70dd56..ca660e3349 100644 --- a/src/elements/stepper/stepper/stepper.stories.ts +++ b/src/elements/stepper/stepper/stepper.stories.ts @@ -20,10 +20,8 @@ import '../../form-error.js'; import '../../card.js'; const loremIpsum = ` - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero - eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata - sanctus est Lorem ipsum dolor sit amet. + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. `; const linear: InputType = { From 4c93bb5da92759480bf9ba2a6f3063102028f8e4 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 10 Jun 2024 10:04:07 +0200 Subject: [PATCH 3/5] test: update test structures --- .../step/__snapshots__/step.spec.snap.js | 16 +++---- src/elements/stepper/step/step.spec.ts | 24 +++++----- .../__snapshots__/stepper.spec.snap.js | 16 +++---- src/elements/stepper/stepper/stepper.spec.ts | 46 ++++++++++--------- 4 files changed, 53 insertions(+), 49 deletions(-) diff --git a/src/elements/stepper/step/__snapshots__/step.spec.snap.js b/src/elements/stepper/step/__snapshots__/step.spec.snap.js index fca8e7ea22..730f170dc5 100644 --- a/src/elements/stepper/step/__snapshots__/step.spec.snap.js +++ b/src/elements/stepper/step/__snapshots__/step.spec.snap.js @@ -1,7 +1,7 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-step renders - DOM"] = +snapshots["sbb-step renders DOM"] = ` `; -/* end snapshot sbb-step renders - DOM */ +/* end snapshot sbb-step renders DOM */ -snapshots["sbb-step renders - Shadow DOM"] = +snapshots["sbb-step renders Shadow DOM"] = `
@@ -20,9 +20,9 @@ snapshots["sbb-step renders - Shadow DOM"] =
`; -/* end snapshot sbb-step renders - Shadow DOM */ +/* end snapshot sbb-step renders Shadow DOM */ -snapshots["sbb-step A11y tree Chrome"] = +snapshots["sbb-step renders A11y tree Chrome"] = `

{ "role": "WebArea", @@ -30,9 +30,9 @@ snapshots["sbb-step A11y tree Chrome"] = }

`; -/* end snapshot sbb-step A11y tree Chrome */ +/* end snapshot sbb-step renders A11y tree Chrome */ -snapshots["sbb-step A11y tree Firefox"] = +snapshots["sbb-step renders A11y tree Firefox"] = `

{ "role": "document", @@ -40,5 +40,5 @@ snapshots["sbb-step A11y tree Firefox"] = }

`; -/* end snapshot sbb-step A11y tree Firefox */ +/* end snapshot sbb-step renders A11y tree Firefox */ diff --git a/src/elements/stepper/step/step.spec.ts b/src/elements/stepper/step/step.spec.ts index ef3740060f..284b619f3c 100644 --- a/src/elements/stepper/step/step.spec.ts +++ b/src/elements/stepper/step/step.spec.ts @@ -7,19 +7,21 @@ import type { SbbStepElement } from './step.js'; import './step.js'; describe('sbb-step', () => { - let element: SbbStepElement; + describe('renders', () => { + let element: SbbStepElement; - beforeEach(async () => { - element = await fixture(html`Step content`); - }); + beforeEach(async () => { + element = await fixture(html`Step content`); + }); - it('renders - DOM', async () => { - await expect(element).dom.to.be.equalSnapshot(); - }); + it('DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - it('renders - Shadow DOM', async () => { - await expect(element).shadowDom.to.be.equalSnapshot(); - }); + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); - testA11yTreeSnapshot(); + testA11yTreeSnapshot(); + }); }); diff --git a/src/elements/stepper/stepper/__snapshots__/stepper.spec.snap.js b/src/elements/stepper/stepper/__snapshots__/stepper.spec.snap.js index 2863b0d5c3..af1a6b458f 100644 --- a/src/elements/stepper/stepper/__snapshots__/stepper.spec.snap.js +++ b/src/elements/stepper/stepper/__snapshots__/stepper.spec.snap.js @@ -1,7 +1,7 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-stepper renders - DOM"] = +snapshots["sbb-stepper renders DOM"] = ` `; -/* end snapshot sbb-stepper renders - DOM */ +/* end snapshot sbb-stepper renders DOM */ -snapshots["sbb-stepper renders - Shadow DOM"] = +snapshots["sbb-stepper renders Shadow DOM"] = `
`; -/* end snapshot sbb-stepper renders - Shadow DOM */ +/* end snapshot sbb-stepper renders Shadow DOM */ -snapshots["sbb-stepper A11y tree Chrome"] = +snapshots["sbb-stepper renders A11y tree Chrome"] = `

{ "role": "WebArea", @@ -141,9 +141,9 @@ snapshots["sbb-stepper A11y tree Chrome"] = }

`; -/* end snapshot sbb-stepper A11y tree Chrome */ +/* end snapshot sbb-stepper renders A11y tree Chrome */ -snapshots["sbb-stepper A11y tree Firefox"] = +snapshots["sbb-stepper renders A11y tree Firefox"] = `

{ "role": "document", @@ -182,5 +182,5 @@ snapshots["sbb-stepper A11y tree Firefox"] = }

`; -/* end snapshot sbb-stepper A11y tree Firefox */ +/* end snapshot sbb-stepper renders A11y tree Firefox */ diff --git a/src/elements/stepper/stepper/stepper.spec.ts b/src/elements/stepper/stepper/stepper.spec.ts index 3ede42d357..dcae2e0596 100644 --- a/src/elements/stepper/stepper/stepper.spec.ts +++ b/src/elements/stepper/stepper/stepper.spec.ts @@ -10,30 +10,32 @@ import '../step.js'; import '../step-label.js'; describe('sbb-stepper', () => { - let element: SbbStepperElement; + describe('renders', () => { + let element: SbbStepperElement; - beforeEach(async () => { - element = await fixture(html` - - Test step label 1 - Test step content 1 - Test step label 2 - Test step content 2 - Test step label 3 - Test step content 3 - Test step label 4 - - `); - await waitForLitRender(element); - }); + beforeEach(async () => { + element = await fixture(html` + + Test step label 1 + Test step content 1 + Test step label 2 + Test step content 2 + Test step label 3 + Test step content 3 + Test step label 4 + + `); + await waitForLitRender(element); + }); - it('renders - DOM', async () => { - await expect(element).dom.to.be.equalSnapshot(); - }); + it('DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - it('renders - Shadow DOM', async () => { - await expect(element).shadowDom.to.be.equalSnapshot(); - }); + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); - testA11yTreeSnapshot(); + testA11yTreeSnapshot(); + }); }); From e37de19ad825094d3d94ec2f492c24c608b3acf8 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 10 Jun 2024 11:44:46 +0200 Subject: [PATCH 4/5] chore: variable label and content length to test animation --- src/elements/stepper/stepper/stepper.stories.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/elements/stepper/stepper/stepper.stories.ts b/src/elements/stepper/stepper/stepper.stories.ts index ca660e3349..cba7e33cf6 100644 --- a/src/elements/stepper/stepper/stepper.stories.ts +++ b/src/elements/stepper/stepper/stepper.stories.ts @@ -20,9 +20,12 @@ import '../../form-error.js'; import '../../card.js'; const loremIpsum = ` - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero + eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata + sanctus est Lorem ipsum dolor sit amet. `; +const loremIpsumSubstring = [219, 58, 160, 304]; const linear: InputType = { control: { @@ -114,7 +117,9 @@ const stepperContent = (disabled: boolean, longLabel: boolean): TemplateResult[] ['First', 'Second', 'Third', 'Fourth'].map( (element, index, arr) => html` ${longLabel ? loremIpsum : `${element} step`}${longLabel + ? loremIpsum.substring(0, loremIpsumSubstring[index]) + : `${element} step`}
- ${element} step content${longLabel ? '.' : `: ${loremIpsum}`} + ${element} step + content${longLabel ? '.' : `: ${loremIpsum.substring(0, loremIpsumSubstring[index])}`}
${index !== 0 ? html`Back` From b9736c7efe08196415a9cf95bf41e452d915e67a Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Tue, 11 Jun 2024 14:18:40 +0200 Subject: [PATCH 5/5] chore: clean stories, fix test structure --- .../stepper/step-label/step-label.stories.ts | 4 +- src/elements/stepper/step/step.stories.ts | 4 +- .../stepper.snapshot.spec.snap.js | 183 ------------------ .../stepper/stepper/stepper.snapshot.spec.ts | 46 ++--- 4 files changed, 26 insertions(+), 211 deletions(-) diff --git a/src/elements/stepper/step-label/step-label.stories.ts b/src/elements/stepper/step-label/step-label.stories.ts index 9c707f6584..3d0e7dbdb8 100644 --- a/src/elements/stepper/step-label/step-label.stories.ts +++ b/src/elements/stepper/step-label/step-label.stories.ts @@ -1,6 +1,5 @@ -import { withActions } from '@storybook/addon-actions/decorator'; import type { InputType } from '@storybook/types'; -import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; +import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components'; import { html, type TemplateResult } from 'lit'; import { sbbSpread } from '../../../storybook/helpers/spread.js'; @@ -82,7 +81,6 @@ export const SlottedIcon: StoryObj = { }; const meta: Meta = { - decorators: [withActions as Decorator], parameters: { docs: { extractComponentDescription: () => readme, diff --git a/src/elements/stepper/step/step.stories.ts b/src/elements/stepper/step/step.stories.ts index 9485eba7bb..7e09b6aa15 100644 --- a/src/elements/stepper/step/step.stories.ts +++ b/src/elements/stepper/step/step.stories.ts @@ -1,5 +1,4 @@ -import { withActions } from '@storybook/addon-actions/decorator'; -import type { Decorator, Meta, StoryObj } from '@storybook/web-components'; +import type { Meta, StoryObj } from '@storybook/web-components'; import { html, type TemplateResult } from 'lit'; import readme from './readme.md?raw'; @@ -13,7 +12,6 @@ export const Default: StoryObj = { }; const meta: Meta = { - decorators: [withActions as Decorator], parameters: { docs: { extractComponentDescription: () => readme, diff --git a/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js b/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js index beee170539..af1a6b458f 100644 --- a/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js +++ b/src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js @@ -184,186 +184,3 @@ snapshots["sbb-stepper renders A11y tree Firefox"] = `; /* end snapshot sbb-stepper renders A11y tree Firefox */ -snapshots["sbb-stepper renders - DOM"] = -` - - Test step label 1 - - - Test step content 1 - - - Test step label 2 - - - Test step content 2 - - - Test step label 3 - - - Test step content 3 - - - Test step label 4 - - -`; -/* end snapshot sbb-stepper renders - DOM */ - -snapshots["sbb-stepper renders - Shadow DOM"] = -`
-
- - -
-
- - -
-
-`; -/* end snapshot sbb-stepper renders - Shadow DOM */ - -snapshots["sbb-stepper A11y tree Chrome"] = -`

- { - "role": "WebArea", - "name": "", - "children": [ - { - "role": "tab", - "name": "Test step label 1", - "selected": true - }, - { - "role": "tab", - "name": "Test step label 2" - }, - { - "role": "tab", - "name": "Test step label 3" - }, - { - "role": "tab", - "name": "Test step label 4" - }, - { - "role": "text", - "name": "Test step content 1" - } - ] -} -

-`; -/* end snapshot sbb-stepper A11y tree Chrome */ - -snapshots["sbb-stepper A11y tree Firefox"] = -`

- { - "role": "document", - "name": "", - "children": [ - { - "role": "tab", - "name": "1 Test step label 1", - "selected": true - }, - { - "role": "tab", - "name": "2 Test step label 2" - }, - { - "role": "tab", - "name": "3 Test step label 3" - }, - { - "role": "tab", - "name": "4 Test step label 4" - }, - { - "role": "text leaf", - "name": "Test step content 1" - }, - { - "role": "tabpanel", - "name": "2 Test step label 2" - }, - { - "role": "tabpanel", - "name": "3 Test step label 3" - } - ] -} -

-`; -/* end snapshot sbb-stepper A11y tree Firefox */ - diff --git a/src/elements/stepper/stepper/stepper.snapshot.spec.ts b/src/elements/stepper/stepper/stepper.snapshot.spec.ts index 3ede42d357..dcae2e0596 100644 --- a/src/elements/stepper/stepper/stepper.snapshot.spec.ts +++ b/src/elements/stepper/stepper/stepper.snapshot.spec.ts @@ -10,30 +10,32 @@ import '../step.js'; import '../step-label.js'; describe('sbb-stepper', () => { - let element: SbbStepperElement; + describe('renders', () => { + let element: SbbStepperElement; - beforeEach(async () => { - element = await fixture(html` - - Test step label 1 - Test step content 1 - Test step label 2 - Test step content 2 - Test step label 3 - Test step content 3 - Test step label 4 - - `); - await waitForLitRender(element); - }); + beforeEach(async () => { + element = await fixture(html` + + Test step label 1 + Test step content 1 + Test step label 2 + Test step content 2 + Test step label 3 + Test step content 3 + Test step label 4 + + `); + await waitForLitRender(element); + }); - it('renders - DOM', async () => { - await expect(element).dom.to.be.equalSnapshot(); - }); + it('DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - it('renders - Shadow DOM', async () => { - await expect(element).shadowDom.to.be.equalSnapshot(); - }); + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); - testA11yTreeSnapshot(); + testA11yTreeSnapshot(); + }); });