-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(sbb-checkbox): add visual tests (#2859)
- Loading branch information
1 parent
fa91b76
commit d7397ef
Showing
5 changed files
with
385 additions
and
32 deletions.
There are no files selected for viewing
180 changes: 180 additions & 0 deletions
180
src/elements/checkbox/checkbox-group/checkbox-group.visual.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| import { html, nothing, type TemplateResult } from 'lit'; | ||
| import { repeat } from 'lit/directives/repeat.js'; | ||
|
|
||
| import { | ||
| describeViewports, | ||
| visualDiffDefault, | ||
| visualDiffFocus, | ||
| } from '../../core/testing/private.js'; | ||
|
|
||
| import '../../card.js'; | ||
| import '../../form-error.js'; | ||
| import '../../icon.js'; | ||
| import '../checkbox.js'; | ||
| import '../checkbox-panel.js'; | ||
| import './checkbox-group.js'; | ||
|
|
||
| describe('sbb-checkbox-group', () => { | ||
| const longLabelText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit, ultricies in tincidunt | ||
| quis, mattis eu quam. Nulla sit amet lorem fermentum, molestie nunc ut, hendrerit risus. Vestibulum rutrum elit et | ||
| lacus sollicitudin, quis malesuada lorem vehicula. Suspendisse at augue quis tellus vulputate tempor. Vivamus urna | ||
| velit, varius nec est ac, mollis efficitur lorem. Quisque non nisl eget massa interdum tempus. Praesent vel feugiat | ||
| metus.`; | ||
|
|
||
| const defaultArgs = { | ||
| orientation: 'horizontal', | ||
| disabled: false, | ||
| required: false, | ||
| horizontalFrom: undefined as string | undefined, | ||
| size: 'm', | ||
| label: 'Label', | ||
| iconName: undefined as string | undefined, | ||
| iconPlacement: undefined as string | undefined, | ||
| }; | ||
|
|
||
| const checkboxesTemplate = ({ | ||
| orientation, | ||
| disabled, | ||
| required, | ||
| horizontalFrom, | ||
| size, | ||
| label, | ||
| iconName, | ||
| iconPlacement, | ||
| }: typeof defaultArgs): TemplateResult => html` | ||
| <sbb-checkbox-group | ||
| orientation=${orientation} | ||
| horizontal-from=${horizontalFrom || nothing} | ||
| size=${size} | ||
| .disabled=${disabled} | ||
| > | ||
| ${repeat( | ||
| new Array(3), | ||
| (_, index) => html` | ||
| <sbb-checkbox | ||
| value="checkbox-${index}" | ||
| ?checked=${index === 0} | ||
| icon-name=${iconName || nothing} | ||
| icon-placement=${iconPlacement || nothing} | ||
| > | ||
| ${label} ${index} | ||
| </sbb-checkbox> | ||
| `, | ||
| )} | ||
| ${required | ||
| ? html`<sbb-form-error slot="error">This is a required field.</sbb-form-error>` | ||
| : nothing} | ||
| </sbb-checkbox-group> | ||
| `; | ||
|
|
||
| const panelsTemplate = ({ | ||
| orientation, | ||
| disabled, | ||
| horizontalFrom, | ||
| size, | ||
| }: typeof defaultArgs): TemplateResult => html` | ||
| <sbb-checkbox-group | ||
| orientation=${orientation} | ||
| horizontal-from=${horizontalFrom || nothing} | ||
| size=${size} | ||
| .disabled=${disabled} | ||
| > | ||
| ${repeat( | ||
| new Array(2), | ||
| (_, index) => html` | ||
| <sbb-checkbox-panel value="checkbox-${index}" ?checked=${index === 0}> | ||
| Label ${index} | ||
| <span slot="subtext">Subtext</span> | ||
| <span slot="suffix" style="margin-inline-start: auto;"> | ||
| <span style="display: flex; align-items: center;"> | ||
| <sbb-icon | ||
| name="diamond-small" | ||
| style="margin-inline: var(--sbb-spacing-fixed-2x);" | ||
| ></sbb-icon> | ||
| <span class="sbb-text-m sbb-text--bold">CHF 40.00</span> | ||
| </span> | ||
| </span> | ||
| <sbb-card-badge>%</sbb-card-badge> | ||
| </sbb-checkbox-panel> | ||
| `, | ||
| )} | ||
| </sbb-checkbox-group> | ||
| `; | ||
|
|
||
| describeViewports({ viewports: ['small', 'medium'] }, () => { | ||
| for (const orientation of ['horizontal', 'vertical']) { | ||
| const args = { ...defaultArgs, orientation }; | ||
| for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { | ||
| it( | ||
| `${orientation} ${visualDiffState.name}`, | ||
| visualDiffState.with(async (setup) => { | ||
| await setup.withFixture(checkboxesTemplate(args)); | ||
| }), | ||
| ); | ||
| } | ||
|
|
||
| it( | ||
| `${orientation} size=s ${visualDiffDefault.name}`, | ||
| visualDiffDefault.with(async (setup) => { | ||
| await setup.withFixture(checkboxesTemplate({ ...args, size: 's' })); | ||
| }), | ||
| ); | ||
|
|
||
| it( | ||
| `${orientation} disabled ${visualDiffDefault.name}`, | ||
| visualDiffDefault.with(async (setup) => { | ||
| await setup.withFixture(checkboxesTemplate({ ...args, disabled: true })); | ||
| }), | ||
| ); | ||
|
|
||
| it( | ||
| `${orientation} required ${visualDiffDefault.name}`, | ||
| visualDiffDefault.with(async (setup) => { | ||
| await setup.withFixture(checkboxesTemplate({ ...args, required: true })); | ||
| }), | ||
| ); | ||
|
|
||
| it( | ||
| `${orientation} label=long ${visualDiffDefault.name}`, | ||
| visualDiffDefault.with(async (setup) => { | ||
| await setup.withFixture(checkboxesTemplate({ ...args, label: longLabelText })); | ||
| }), | ||
| ); | ||
|
|
||
| for (const iconPlacement of ['start', 'end']) { | ||
| it( | ||
| `${orientation} iconPlacement=${iconPlacement} ${visualDiffDefault.name}`, | ||
| visualDiffDefault.with(async (setup) => { | ||
| await setup.withFixture( | ||
| checkboxesTemplate({ ...args, iconName: 'tickets-class-small', iconPlacement }), | ||
| ); | ||
| }), | ||
| ); | ||
| } | ||
|
|
||
| it( | ||
| `${orientation} template=panel ${visualDiffDefault.name}`, | ||
| visualDiffDefault.with(async (setup) => { | ||
| await setup.withFixture(panelsTemplate(args)); | ||
| }), | ||
| ); | ||
| } | ||
|
|
||
| describe('horizontalFrom=medium', () => { | ||
| const args = { ...defaultArgs, orientation: 'vertical', horizontalFrom: 'medium' }; | ||
| it( | ||
| `checkbox ${visualDiffDefault.name}`, | ||
| visualDiffDefault.with(async (setup) => { | ||
| await setup.withFixture(checkboxesTemplate(args)); | ||
| }), | ||
| ); | ||
|
|
||
| it( | ||
| `panel ${visualDiffDefault.name}`, | ||
| visualDiffDefault.with(async (setup) => { | ||
| await setup.withFixture(panelsTemplate(args)); | ||
| }), | ||
| ); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.