From c87b787bfaaa8d7ae074e4230d0e296e4f8d6b07 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga <tommaso.menga-94@hotmail.it> Date: Wed, 31 Jan 2024 18:04:38 +0100 Subject: [PATCH] test: implemented a11y tree tests --- .../__snapshots__/accordion.spec.snap.js | 129 ++ src/components/accordion/accordion.spec.ts | 71 +- .../__snapshots__/action-group.spec.snap.js | 130 ++ .../action-group/action-group.spec.ts | 51 +- .../__snapshots__/alert-group.spec.snap.js | 158 ++ .../alert/alert-group/alert-group.spec.ts | 56 +- .../alert/__snapshots__/alert.spec.snap.js | 247 +++ src/components/alert/alert/alert.e2e.ts | 8 + src/components/alert/alert/alert.spec.ts | 87 +- .../__snapshots__/autocomplete.spec.snap.js | 377 +++++ .../autocomplete/autocomplete.spec.ts | 156 +- .../breadcrumb-group.spec.snap.js | 182 ++- .../breadcrumb-group/breadcrumb-group.spec.ts | 30 +- .../__snapshots__/breadcrumb.spec.snap.js | 73 + .../breadcrumb/breadcrumb/breadcrumb.spec.ts | 7 +- .../__snapshots__/calendar.spec.snap.js | 1320 +++++++++++++++++ src/components/calendar/calendar.spec.ts | 241 +-- .../__snapshots__/card-badge.spec.snap.js | 80 + .../card/card-badge/card-badge.spec.ts | 37 +- .../card/card/__snapshots__/card.spec.snap.js | 148 ++ src/components/card/card/card.e2e.ts | 38 +- src/components/card/card/card.spec.ts | 28 +- .../__snapshots__/checkbox-group.spec.snap.js | 141 ++ .../checkbox-group/checkbox-group.spec.ts | 41 +- .../__snapshots__/checkbox.spec.snap.js | 101 ++ .../checkbox/checkbox/checkbox.spec.ts | 5 + .../chip/__snapshots__/chip.spec.snap.js | 71 + src/components/chip/chip.spec.ts | 26 +- .../clock/__snapshots__/clock.spec.snap.js | 64 + src/components/clock/clock.spec.ts | 46 +- .../datepicker-next-day.spec.snap.js | 64 + .../datepicker-next-day.spec.ts | 15 +- .../datepicker-previous-day.spec.snap.js | 64 + .../datepicker-previous-day.spec.ts | 18 +- .../datepicker-toggle.spec.snap.js | 159 ++ .../datepicker-toggle.spec.ts | 100 +- .../__snapshots__/datepicker.spec.snap.js | 93 ++ .../datepicker/datepicker/datepicker.spec.ts | 17 + .../dialog/__snapshots__/dialog.spec.snap.js | 30 + src/components/dialog/dialog.spec.ts | 4 + .../__snapshots__/divider.spec.snap.js | 33 + src/components/divider/divider.spec.ts | 8 +- .../expansion-panel-content.spec.snap.js | 67 + .../expansion-panel-content.spec.ts | 24 +- .../expansion-panel-header.spec.snap.js | 48 + .../expansion-panel-header.spec.ts | 6 + .../expansion-panel.spec.snap.js | 137 ++ .../expansion-panel/expansion-panel.spec.ts | 86 +- .../__snapshots__/file-selector.spec.snap.js | 72 + .../file-selector/file-selector.spec.ts | 3 + .../footer/__snapshots__/footer.spec.snap.js | 67 + src/components/footer/footer.spec.ts | 15 +- .../__snapshots__/form-error.spec.snap.js | 63 + src/components/form-error/form-error.spec.ts | 28 +- .../form-field-clear.spec.snap.js | 173 +++ .../form-field-clear/form-field-clear.spec.ts | 81 +- .../__snapshots__/form-field.spec.snap.js | 72 + .../form-field/form-field/form-field.spec.ts | 11 + .../header/__snapshots__/header.spec.snap.js | 85 ++ src/components/header/header/header.spec.ts | 90 +- .../icon/__snapshots__/icon.spec.snap.js | 30 + src/components/icon/icon.spec.ts | 3 + .../__snapshots__/journey-header.spec.snap.js | 155 ++ .../journey-header/journey-header.spec.ts | 56 +- .../journey-summary.spec.snap.js | 128 ++ .../journey-summary/journey-summary.spec.ts | 106 +- .../__snapshots__/link-list.spec.snap.js | 30 + src/components/link-list/link-list.spec.ts | 3 + .../loading-indicator.spec.snap.js | 123 ++ .../loading-indicator.spec.ts | 87 +- .../__snapshots__/map-container.spec.snap.js | 77 + .../map-container/map-container.spec.ts | 47 +- .../__snapshots__/message.spec.snap.js | 163 ++ src/components/message/message.spec.ts | 84 +- .../__snapshots__/notification.spec.snap.js | 30 + .../notification/notification.spec.ts | 12 +- .../__snapshots__/optgroup.spec.snap.js | 272 ++++ .../option/optgroup/optgroup.spec.ts | 107 +- .../option/__snapshots__/option.spec.snap.js | 87 ++ src/components/option/option/option.spec.ts | 44 +- .../radio-button-group.spec.snap.js | 54 + .../radio-button-group.spec.ts | 35 +- .../__snapshots__/radio-button.spec.snap.js | 83 ++ .../radio-button/radio-button.spec.ts | 35 +- .../screenreader-only.spec.snap.js | 42 + .../screenreader-only.spec.ts | 12 +- .../select/__snapshots__/select.spec.snap.js | 467 ++++++ src/components/select/select.spec.ts | 152 +- .../selection-panel/selection-panel.spec.ts | 49 +- .../__snapshots__/skiplink-list.spec.snap.js | 336 +++++ .../skiplink-list/skiplink-list.spec.ts | 86 +- .../slider/__snapshots__/slider.spec.snap.js | 138 ++ src/components/slider/slider.spec.ts | 40 +- .../status/__snapshots__/status.spec.snap.js | 62 + src/components/status/status.spec.ts | 6 + .../__snapshots__/tab-group.spec.snap.js | 135 ++ .../tabs/tab-group/tab-group.spec.ts | 15 +- .../__snapshots__/tab-title.spec.snap.js | 50 + .../tabs/tab-title/tab-title.spec.ts | 3 + .../__snapshots__/tag-group.spec.snap.js | 129 ++ .../tag/tag-group/tag-group.spec.ts | 60 +- .../tag/tag/__snapshots__/tag.spec.snap.js | 49 + src/components/tag/tag/tag.spec.ts | 3 + .../__snapshots__/teaser-hero.spec.snap.js | 206 +++ .../teaser-hero/teaser-hero.spec.ts | 129 +- .../teaser/__snapshots__/teaser.spec.snap.js | 73 + src/components/teaser/teaser.spec.ts | 3 + .../__snapshots__/time-input.spec.snap.js | 67 + src/components/time-input/time-input.spec.ts | 19 +- .../title/__snapshots__/title.spec.snap.js | 54 + src/components/title/title.spec.ts | 11 +- .../toast/__snapshots__/toast.spec.snap.js | 152 ++ src/components/toast/toast.spec.ts | 70 +- .../__snapshots__/toggle-check.spec.snap.js | 229 +++ .../toggle-check/toggle-check.spec.ts | 135 +- .../__snapshots__/toggle-option.spec.snap.js | 51 + .../toggle-option/toggle-option.spec.ts | 6 + .../toggle/__snapshots__/toggle.spec.snap.js | 68 + src/components/toggle/toggle/toggle.spec.ts | 3 + .../tooltip-trigger.spec.snap.js | 81 + .../tooltip-trigger/tooltip-trigger.spec.ts | 30 +- .../__snapshots__/tooltip.spec.snap.js | 62 + .../tooltip/tooltip/tooltip.spec.ts | 45 +- .../visual-checkbox.spec.snap.js | 57 + .../visual-checkbox/visual-checkbox.spec.ts | 62 +- 125 files changed, 9195 insertions(+), 1985 deletions(-) create mode 100644 src/components/accordion/__snapshots__/accordion.spec.snap.js create mode 100644 src/components/action-group/__snapshots__/action-group.spec.snap.js create mode 100644 src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js create mode 100644 src/components/alert/alert/__snapshots__/alert.spec.snap.js create mode 100644 src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js create mode 100644 src/components/calendar/__snapshots__/calendar.spec.snap.js create mode 100644 src/components/card/card-badge/__snapshots__/card-badge.spec.snap.js create mode 100644 src/components/card/card/__snapshots__/card.spec.snap.js create mode 100644 src/components/checkbox/checkbox-group/__snapshots__/checkbox-group.spec.snap.js create mode 100644 src/components/chip/__snapshots__/chip.spec.snap.js create mode 100644 src/components/clock/__snapshots__/clock.spec.snap.js create mode 100644 src/components/datepicker/datepicker-toggle/__snapshots__/datepicker-toggle.spec.snap.js create mode 100644 src/components/divider/__snapshots__/divider.spec.snap.js create mode 100644 src/components/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.spec.snap.js create mode 100644 src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js create mode 100644 src/components/footer/__snapshots__/footer.spec.snap.js create mode 100644 src/components/form-error/__snapshots__/form-error.spec.snap.js create mode 100644 src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js create mode 100644 src/components/header/header/__snapshots__/header.spec.snap.js create mode 100644 src/components/journey-header/__snapshots__/journey-header.spec.snap.js create mode 100644 src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js create mode 100644 src/components/loading-indicator/__snapshots__/loading-indicator.spec.snap.js create mode 100644 src/components/map-container/__snapshots__/map-container.spec.snap.js create mode 100644 src/components/message/__snapshots__/message.spec.snap.js create mode 100644 src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js create mode 100644 src/components/option/option/__snapshots__/option.spec.snap.js create mode 100644 src/components/radio-button/radio-button-group/__snapshots__/radio-button-group.spec.snap.js create mode 100644 src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js create mode 100644 src/components/select/__snapshots__/select.spec.snap.js create mode 100644 src/components/slider/__snapshots__/slider.spec.snap.js create mode 100644 src/components/tabs/tab-group/__snapshots__/tab-group.spec.snap.js create mode 100644 src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js create mode 100644 src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js create mode 100644 src/components/time-input/__snapshots__/time-input.spec.snap.js create mode 100644 src/components/title/__snapshots__/title.spec.snap.js create mode 100644 src/components/toast/__snapshots__/toast.spec.snap.js create mode 100644 src/components/toggle-check/__snapshots__/toggle-check.spec.snap.js create mode 100644 src/components/toggle/toggle/__snapshots__/toggle.spec.snap.js create mode 100644 src/components/tooltip/tooltip-trigger/__snapshots__/tooltip-trigger.spec.snap.js create mode 100644 src/components/tooltip/tooltip/__snapshots__/tooltip.spec.snap.js create mode 100644 src/components/visual-checkbox/__snapshots__/visual-checkbox.spec.snap.js diff --git a/src/components/accordion/__snapshots__/accordion.spec.snap.js b/src/components/accordion/__snapshots__/accordion.spec.snap.js new file mode 100644 index 00000000000..f69dca3cb9d --- /dev/null +++ b/src/components/accordion/__snapshots__/accordion.spec.snap.js @@ -0,0 +1,129 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-accordion renders - Dom"] = +`<sbb-accordion> + <sbb-expansion-panel + data-accordion="" + data-accordion-first="" + > + <sbb-expansion-panel-header + aria-controls="sbb-expansion-panel-content-1" + aria-expanded="false" + data-slot-names="unnamed" + dir="ltr" + id="sbb-expansion-panel-header-1" + role="button" + slot="header" + tabindex="0" + > + Header 1 + </sbb-expansion-panel-header> + <sbb-expansion-panel-content + aria-hidden="true" + aria-labelledby="sbb-expansion-panel-header-1" + id="sbb-expansion-panel-content-1" + role="region" + slot="content" + > + Content 1 + </sbb-expansion-panel-content> + </sbb-expansion-panel> + <sbb-expansion-panel + data-accordion="" + data-accordion-last="" + > + <sbb-expansion-panel-header + aria-controls="sbb-expansion-panel-content-2" + aria-expanded="false" + data-slot-names="unnamed" + dir="ltr" + id="sbb-expansion-panel-header-2" + role="button" + slot="header" + tabindex="0" + > + Header 2 + </sbb-expansion-panel-header> + <sbb-expansion-panel-content + aria-hidden="true" + aria-labelledby="sbb-expansion-panel-header-2" + id="sbb-expansion-panel-content-2" + role="region" + slot="content" + > + Content 2 + </sbb-expansion-panel-content> + </sbb-expansion-panel> +</sbb-accordion> +`; +/* end snapshot sbb-accordion renders - Dom */ + +snapshots["sbb-accordion renders - ShadowDom"] = +`<div class="sbb-accordion"> + <slot> + </slot> +</div> +`; +/* end snapshot sbb-accordion renders - ShadowDom */ + +snapshots["sbb-accordion A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Header 1" + }, + { + "role": "button", + "name": "Header 2" + } + ] +} +</p> +`; +/* end snapshot sbb-accordion A11y tree Chrome */ + +snapshots["sbb-accordion A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "Header 1" + }, + { + "role": "button", + "name": "Header 2" + } + ] +} +</p> +`; +/* end snapshot sbb-accordion A11y tree Firefox */ + +snapshots["sbb-accordion A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Header 1" + }, + { + "role": "button", + "name": "Header 2" + } + ] +} +</p> +`; +/* end snapshot sbb-accordion A11y tree Safari */ + diff --git a/src/components/accordion/accordion.spec.ts b/src/components/accordion/accordion.spec.ts index c52fcfe03e2..946c8e76210 100644 --- a/src/components/accordion/accordion.spec.ts +++ b/src/components/accordion/accordion.spec.ts @@ -1,11 +1,18 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + +import type { SbbAccordionElement } from './accordion'; import './accordion'; import '../expansion-panel'; describe('sbb-accordion', () => { - it('renders', async () => { - const root = await fixture(html` + let element: SbbAccordionElement; + + beforeEach(async () => { + element = await fixture(html` <sbb-accordion> <sbb-expansion-panel> <sbb-expansion-panel-header>Header 1</sbb-expansion-panel-header> @@ -17,56 +24,16 @@ describe('sbb-accordion', () => { </sbb-expansion-panel> </sbb-accordion> `); + await waitForLitRender(element); + }); - expect(root).dom.to.be.equal( - ` - <sbb-accordion> - <sbb-expansion-panel data-accordion data-accordion-first> - <sbb-expansion-panel-header - aria-controls="sbb-expansion-panel-content-1" - aria-expanded="false" - dir="ltr" - id="sbb-expansion-panel-header-1" - role="button" - slot="header" - tabindex="0" - data-slot-names="unnamed" - >Header 1</sbb-expansion-panel-header> - <sbb-expansion-panel-content - aria-hidden="true" - aria-labelledby="sbb-expansion-panel-header-1" - id="sbb-expansion-panel-content-1" - role="region" - slot="content" - >Content 1</sbb-expansion-panel-content> - </sbb-expansion-panel> - <sbb-expansion-panel data-accordion data-accordion-last> - <sbb-expansion-panel-header - aria-controls="sbb-expansion-panel-content-2" - aria-expanded="false" - dir="ltr" - id="sbb-expansion-panel-header-2" - role="button" - slot="header" - tabindex="0" - data-slot-names="unnamed">Header 2</sbb-expansion-panel-header> - <sbb-expansion-panel-content - aria-hidden="true" - aria-labelledby="sbb-expansion-panel-header-2" - id="sbb-expansion-panel-content-2" - role="region" - slot="content" - >Content 2</sbb-expansion-panel-content> - </sbb-expansion-panel> - </sbb-accordion> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-accordion"> - <slot></slot> - </div> - `, - ); + it('renders - Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); }); + + it('renders - ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/action-group/__snapshots__/action-group.spec.snap.js b/src/components/action-group/__snapshots__/action-group.spec.snap.js new file mode 100644 index 00000000000..febe259b1dd --- /dev/null +++ b/src/components/action-group/__snapshots__/action-group.spec.snap.js @@ -0,0 +1,130 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-action-group renders renders - Dom"] = +`<sbb-action-group + align-group="start" + button-size="l" + horizontal-from="medium" + link-size="m" + orientation="horizontal" +> + <sbb-button + data-slot-names="unnamed" + dir="ltr" + role="button" + size="l" + tabindex="0" + variant="secondary" + > + Button + </sbb-button> + <sbb-link + data-slot-names="unnamed" + dir="ltr" + href="https://github.com/lyne-design-system/lyne-components" + icon-name="chevron-small-left-small" + role="link" + size="m" + tabindex="0" + variant="block" + > + Link + </sbb-link> +</sbb-action-group> +`; +/* end snapshot sbb-action-group renders renders - Dom */ + +snapshots["sbb-action-group renders renders - ShadowDom"] = +`<div class="sbb-action-group"> + <slot> + </slot> +</div> +`; +/* end snapshot sbb-action-group renders renders - ShadowDom */ + +snapshots["sbb-action-group renders A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Button" + }, + { + "role": "link", + "name": "Link", + "children": [ + { + "role": "link", + "name": "Link" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-action-group renders A11y tree Chrome */ + +snapshots["sbb-action-group renders A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "Button" + }, + { + "role": "link", + "name": "Link", + "children": [ + { + "role": "link", + "name": "Link", + "value": "https://github.com/lyne-design-system/lyne-components" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-action-group renders A11y tree Firefox */ + +snapshots["sbb-action-group renders A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Button" + }, + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "Link", + "children": [ + { + "role": "text", + "name": "Link" + } + ] + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-action-group renders A11y tree Safari */ + diff --git a/src/components/action-group/action-group.spec.ts b/src/components/action-group/action-group.spec.ts index ef9c0310647..9d10b77e92c 100644 --- a/src/components/action-group/action-group.spec.ts +++ b/src/components/action-group/action-group.spec.ts @@ -2,43 +2,42 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import type { SbbButtonElement } from '../button'; +import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import type { SbbActionGroupElement } from './action-group'; -import '.'; +import './action-group'; +import '../button'; +import '../link'; describe('sbb-action-group', () => { - it('renders', async () => { - const root = await fixture(html` - <sbb-action-group align-group="start" orientation="horizontal"> - <sbb-button variant="secondary">Button</sbb-button> - <sbb-link - icon-name="chevron-small-left-small" - href="https://github.com/lyne-design-system/lyne-components" - > - Link - </sbb-link> - </sbb-action-group> - `); + describe('renders', () => { + let element: SbbActionGroupElement; - expect(root).dom.to.be.equal( - ` - <sbb-action-group align-group="start" orientation="horizontal" align-group="start" horizontal-from="medium" button-size="l" link-size="m"> + beforeEach(async () => { + element = await fixture(html` + <sbb-action-group align-group="start" orientation="horizontal"> <sbb-button variant="secondary">Button</sbb-button> <sbb-link icon-name="chevron-small-left-small" - href="https://github.com/lyne-design-system/lyne-components"> + href="https://github.com/lyne-design-system/lyne-components" + > Link </sbb-link> </sbb-action-group> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-action-group"> - <slot></slot> - </div> - `, - ); + `); + await waitForLitRender(element); + }); + + it('renders - Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('renders - ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); describe('property sync', () => { diff --git a/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js b/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js new file mode 100644 index 00000000000..f83b6bf0a0e --- /dev/null +++ b/src/components/alert/alert-group/__snapshots__/alert-group.spec.snap.js @@ -0,0 +1,158 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-alert-group should render Dom"] = +`<sbb-alert-group + accessibility-level="3" + accessibility-title="Disruptions" + role="status" +> + <sbb-alert + href="https://www.sbb.ch" + size="m" + title-content="Interruption between Genève and Lausanne" + > + The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. + </sbb-alert> +</sbb-alert-group> +`; +/* end snapshot sbb-alert-group should render Dom */ + +snapshots["sbb-alert-group should render ShadowDom"] = +`<div class="sbb-alert-group"> + <h2 class="sbb-alert-group__title"> + <slot name="accessibility-title"> + Disruptions + </slot> + </h2> + <slot> + </slot> +</div> +`; +/* end snapshot sbb-alert-group should render ShadowDom */ + +snapshots["sbb-alert-group should render A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Disruptions", + "level": 2 + }, + { + "role": "heading", + "name": "Interruption between Genève and Lausanne", + "level": 3 + }, + { + "role": "text", + "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. " + }, + { + "role": "link", + "name": "Find out more", + "children": [ + { + "role": "link", + "name": "Find out more" + } + ] + }, + { + "role": "button", + "name": "Close message" + } + ] +} +</p> +`; +/* end snapshot sbb-alert-group should render A11y tree Chrome */ + +snapshots["sbb-alert-group should render A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "heading", + "name": "Disruptions", + "level": 2 + }, + { + "role": "heading", + "name": "Interruption between Genève and Lausanne", + "level": 3 + }, + { + "role": "text leaf", + "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. " + }, + { + "role": "link", + "name": "Find out more", + "children": [ + { + "role": "link", + "name": "Find out more", + "value": "https://www.sbb.ch/" + } + ] + }, + { + "role": "button", + "name": "Close message" + } + ] +} +</p> +`; +/* end snapshot sbb-alert-group should render A11y tree Firefox */ + +snapshots["sbb-alert-group should render A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Disruptions" + }, + { + "role": "text", + "name": "Interruption between Genève and Lausanne" + }, + { + "role": "text", + "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled." + }, + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "Find out more", + "children": [ + { + "role": "text", + "name": "Find out more" + } + ] + } + ] + }, + { + "role": "button", + "name": "Close message" + } + ] +} +</p> +`; +/* end snapshot sbb-alert-group should render A11y tree Safari */ + diff --git a/src/components/alert/alert-group/alert-group.spec.ts b/src/components/alert/alert-group/alert-group.spec.ts index b83dd1fcf28..eb30fa91081 100644 --- a/src/components/alert/alert-group/alert-group.spec.ts +++ b/src/components/alert/alert-group/alert-group.spec.ts @@ -1,42 +1,40 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbAlertGroupElement } from './alert-group'; import './alert-group'; import '../alert'; describe('sbb-alert-group', () => { - it('should render', async () => { - const root = await fixture(html` - <sbb-alert-group accessibility-title="Disruptions" accessibility-level="3"> - <sbb-alert - title-content="Interruption between Genève and Lausanne" - href="https://www.sbb.ch" - > - The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. - </sbb-alert> - </sbb-alert-group> - `); + describe('should render', () => { + let root: SbbAlertGroupElement; - expect(root).dom.to.be.equal( - ` - <sbb-alert-group accessibility-title='Disruptions' accessibility-level='3' role='status'> - <sbb-alert title-content='Interruption between Genève and Lausanne' href='https://www.sbb.ch' size="m"> + beforeEach(async () => { + root = await fixture(html` + <sbb-alert-group accessibility-title="Disruptions" accessibility-level="3"> + <sbb-alert + title-content="Interruption between Genève and Lausanne" + href="https://www.sbb.ch" + > The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. </sbb-alert> </sbb-alert-group> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-alert-group"> - <h2 class="sbb-alert-group__title"> - <slot name="accessibility-title"> - Disruptions - </slot> - </h2> - <slot></slot> - </div> - `, - ); + `); + await waitForLitRender(root); + }); + + it('Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); it('should render with slots', async () => { diff --git a/src/components/alert/alert/__snapshots__/alert.spec.snap.js b/src/components/alert/alert/__snapshots__/alert.spec.snap.js new file mode 100644 index 00000000000..f4cb69b98f6 --- /dev/null +++ b/src/components/alert/alert/__snapshots__/alert.spec.snap.js @@ -0,0 +1,247 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-alert should render default properties"] = +`<div class="sbb-alert__transition-wrapper"> + <div class="sbb-alert"> + <span class="sbb-alert__icon"> + <slot name="icon"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="info" + role="img" + > + </sbb-icon> + </slot> + </span> + <span class="sbb-alert__content"> + <sbb-title + aria-level="3" + class="sbb-alert__title" + level="3" + negative="" + role="heading" + visual-level="5" + > + <slot name="title"> + Interruption + </slot> + </sbb-title> + <p class="sbb-alert__content-slot"> + <slot> + </slot> + </p> + </span> + <span class="sbb-alert__close-button-wrapper"> + <sbb-divider + aria-orientation="vertical" + class="sbb-alert__close-button-divider" + negative="" + orientation="vertical" + role="separator" + > + </sbb-divider> + <sbb-button + aria-label="Close message" + class="sbb-alert__close-button" + dir="ltr" + icon-name="cross-small" + negative="" + role="button" + size="m" + tabindex="0" + variant="transparent" + > + </sbb-button> + </span> + </div> +</div> +`; +/* end snapshot sbb-alert should render default properties */ + +snapshots["sbb-alert should render customized properties"] = +`<div class="sbb-alert__transition-wrapper"> + <div class="sbb-alert"> + <span class="sbb-alert__icon"> + <slot name="icon"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="disruption" + role="img" + > + </sbb-icon> + </slot> + </span> + <span class="sbb-alert__content"> + <sbb-title + aria-level="2" + class="sbb-alert__title" + level="2" + negative="" + role="heading" + visual-level="3" + > + <slot name="title"> + Interruption + </slot> + </sbb-title> + <p class="sbb-alert__content-slot"> + <slot> + </slot> + </p> + <sbb-link + aria-label="label" + data-slot-names="unnamed" + dir="ltr" + href="https://www.sbb.ch" + negative="" + rel="noopener" + role="link" + size="s" + tabindex="0" + target="_blank" + variant="inline" + > + Show much more + </sbb-link> + </span> + <span class="sbb-alert__close-button-wrapper"> + <sbb-divider + aria-orientation="vertical" + class="sbb-alert__close-button-divider" + negative="" + orientation="vertical" + role="separator" + > + </sbb-divider> + <sbb-button + aria-label="Close message" + class="sbb-alert__close-button" + dir="ltr" + icon-name="cross-small" + negative="" + role="button" + size="m" + tabindex="0" + variant="transparent" + > + </sbb-button> + </span> + </div> +</div> +`; +/* end snapshot sbb-alert should render customized properties */ + +snapshots["sbb-alert A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Interruption", + "level": 3 + }, + { + "role": "text", + "name": "Alert content " + }, + { + "role": "link", + "name": "test-a11y-label", + "children": [ + { + "role": "link", + "name": "Find out more" + } + ] + }, + { + "role": "button", + "name": "Close message" + } + ] +} +</p> +`; +/* end snapshot sbb-alert A11y tree Chrome */ + +snapshots["sbb-alert A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "heading", + "name": "Interruption", + "level": 3 + }, + { + "role": "text leaf", + "name": "Alert content " + }, + { + "role": "link", + "name": "test-a11y-label", + "children": [ + { + "role": "link", + "name": "Find out more", + "value": "https://www.sbb.ch/" + } + ] + }, + { + "role": "button", + "name": "Close message" + } + ] +} +</p> +`; +/* end snapshot sbb-alert A11y tree Firefox */ + +snapshots["sbb-alert A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Interruption" + }, + { + "role": "text", + "name": "Alert content " + }, + { + "role": "link", + "name": "test-a11y-label", + "children": [ + { + "role": "link", + "name": "Find out more", + "children": [ + { + "role": "text", + "name": "Find out more" + } + ] + } + ] + }, + { + "role": "button", + "name": "Close message" + } + ] +} +</p> +`; +/* end snapshot sbb-alert A11y tree Safari */ + diff --git a/src/components/alert/alert/alert.e2e.ts b/src/components/alert/alert/alert.e2e.ts index 533606ebbf8..e8ee2c570d9 100644 --- a/src/components/alert/alert/alert.e2e.ts +++ b/src/components/alert/alert/alert.e2e.ts @@ -24,4 +24,12 @@ describe('sbb-alert', () => { await waitForCondition(() => didPresentSpy.events.length === 1); expect(didPresentSpy.count).to.be.equal(1); }); + + it('should hide close button in readonly mode', async () => { + alert = await fixture( + html`<sbb-alert title-content="Interruption" readonly>Alert content</sbb-alert>`, + ); + + expect(alert.shadowRoot!.querySelector('.sbb-alert__close-button-wrapper')).to.be.null; + }); }); diff --git a/src/components/alert/alert/alert.spec.ts b/src/components/alert/alert/alert.spec.ts index ecfee4fb0f2..3177967dc94 100644 --- a/src/components/alert/alert/alert.spec.ts +++ b/src/components/alert/alert/alert.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import type { SbbAlertElement } from './alert'; @@ -14,7 +15,6 @@ describe('sbb-alert', () => { element = await fixture( html`<sbb-alert disable-animation title-content="Interruption">Alert content</sbb-alert>`, ); - await waitForLitRender(element); expect(element).dom.to.be.equal( @@ -24,36 +24,7 @@ describe('sbb-alert', () => { </sbb-alert> `, ); - expect(element).shadowDom.to.be.equal( - ` - <div class="sbb-alert__transition-wrapper"> - <div class="sbb-alert"> - <span class="sbb-alert__icon"> - <slot name="icon"> - <sbb-icon - aria-hidden="true" - data-namespace="default" - name="info" - role="img" - ></sbb-icon> - </slot> - </span> - <span class="sbb-alert__content"> - <sbb-title class="sbb-alert__title" aria-level="3" level="3" negative visual-level="5" role="heading"> - <slot name="title">Interruption</slot> - </sbb-title> - <p class="sbb-alert__content-slot"> - <slot></slot> - </p> - </span> - <span class="sbb-alert__close-button-wrapper"> - <sbb-divider aria-orientation="vertical" role="separator" class="sbb-alert__close-button-divider" negative="" orientation="vertical" aria-orientation="vertical"></sbb-divider> - <sbb-button aria-label="Close message" dir="ltr" class="sbb-alert__close-button" icon-name="cross-small" negative role="button" size="m" tabindex="0" variant="transparent"></sbb-button> - </span> - </div> - </div> - `, - ); + await expect(element).shadowDom.to.be.equalSnapshot(); }); it('should render customized properties', async () => { @@ -82,46 +53,20 @@ describe('sbb-alert', () => { </sbb-alert> `, ); - expect(element).shadowDom.to.be.equal( - ` - <div class="sbb-alert__transition-wrapper"> - <div class="sbb-alert"> - <span class="sbb-alert__icon"> - <slot name="icon"> - <sbb-icon - aria-hidden="true" - data-namespace="default" - name="disruption" - role="img" - ></sbb-icon> - </slot> - </span> - <span class="sbb-alert__content"> - <sbb-title class="sbb-alert__title" aria-level="2" role="heading" level="2" negative visual-level="3"> - <slot name="title">Interruption</slot> - </sbb-title> - <p class="sbb-alert__content-slot"> - <slot></slot> - </p> - <sbb-link negative variant="inline" aria-label="label" dir="ltr" role="link" size="s" tabindex="0" href="https://www.sbb.ch" rel="noopener" target="_blank" data-slot-names="unnamed"> - Show much more - </sbb-link> - </span> - <span class="sbb-alert__close-button-wrapper"> - <sbb-divider class="sbb-alert__close-button-divider" negative aria-orientation="vertical" orientation="vertical" role="separator"></sbb-divider> - <sbb-button aria-label="Close message" class="sbb-alert__close-button" dir="ltr" icon-name="cross-small" negative size="m" role="button" tabindex="0" variant="transparent"></sbb-button> - </span> - </div> - </div> - `, - ); + await expect(element).shadowDom.to.be.equalSnapshot(); }); - it('should hide close button in readonly mode', async () => { - element = await fixture( - html`<sbb-alert title-content="Interruption" readonly>Alert content</sbb-alert>`, - ); - - expect(element.shadowRoot!.querySelector('.sbb-alert__close-button-wrapper')).to.be.null; - }); + testA11yTreeSnapshot( + undefined, + html` + <sbb-alert + disable-animation + title-content="Interruption" + href="https://www.sbb.ch" + accessibility-label="test-a11y-label" + > + Alert content + </sbb-alert> + `, + ); }); diff --git a/src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js b/src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js new file mode 100644 index 00000000000..7f868c6a24b --- /dev/null +++ b/src/components/autocomplete/__snapshots__/autocomplete.spec.snap.js @@ -0,0 +1,377 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-autocomplete renders standalone Chrome-Firefox Dom"] = +`<sbb-autocomplete + data-state="closed" + dir="ltr" + origin="origin" + trigger="trigger" +> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-1" + role="option" + value="1" + > + 1 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-2" + role="option" + value="2" + > + 2 + </sbb-option> +</sbb-autocomplete> +`; +/* end snapshot sbb-autocomplete renders standalone Chrome-Firefox Dom */ + +snapshots["sbb-autocomplete renders in form field Chrome-Firefox Dom"] = +`<sbb-form-field + data-input-empty="" + data-input-type="input" + data-slot-names="unnamed" + error-space="none" + size="m" + width="default" +> + <input + aria-autocomplete="list" + aria-controls="sbb-autocomplete-3" + aria-expanded="false" + aria-haspopup="listbox" + aria-owns="sbb-autocomplete-3" + autocomplete="off" + role="combobox" + > + <sbb-autocomplete + data-state="closed" + dir="ltr" + > + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-5" + role="option" + value="1" + > + 1 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-6" + role="option" + value="2" + > + 2 + </sbb-option> + </sbb-autocomplete> +</sbb-form-field> +`; +/* end snapshot sbb-autocomplete renders in form field Chrome-Firefox Dom */ + +snapshots["sbb-autocomplete renders in form field Chrome-Firefox ShadowDom"] = +`<div class="sbb-form-field__space-wrapper"> + <div + class="sbb-form-field__wrapper" + id="overlay-anchor" + > + <slot name="prefix"> + </slot> + <div class="sbb-form-field__input-container"> + <span + aria-hidden="true" + class="sbb-form-field__label-spacer" + > + </span> + <span class="sbb-form-field__label"> + <span class="sbb-form-field__label-ellipsis"> + <slot name="label"> + </slot> + </span> + </span> + <div class="sbb-form-field__input"> + <slot> + </slot> + </div> + </div> + <slot name="suffix"> + </slot> + </div> + <div class="sbb-form-field__error"> + <slot name="error"> + </slot> + </div> +</div> +`; +/* end snapshot sbb-autocomplete renders in form field Chrome-Firefox ShadowDom */ + +snapshots["sbb-autocomplete renders in form field A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "" + }, + { + "role": "combobox", + "name": "", + "autocomplete": "list", + "haspopup": "listbox" + } + ] +} +</p> +`; +/* end snapshot sbb-autocomplete renders in form field A11y tree Chrome */ + +snapshots["sbb-autocomplete renders standalone Chrome-Firefox ShadowDom"] = +`<div class="sbb-autocomplete__gap-fix"> +</div> +<div class="sbb-autocomplete__container"> + <div class="sbb-autocomplete__gap-fix"> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="left" + > + </div> + </div> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="right" + > + </div> + </div> + </div> + <div class="sbb-autocomplete__panel"> + <div class="sbb-autocomplete__wrapper"> + <div + class="sbb-autocomplete__options" + id="sbb-autocomplete-2" + role="listbox" + > + <slot> + </slot> + </div> + </div> + </div> +</div> +`; +/* end snapshot sbb-autocomplete renders standalone Chrome-Firefox ShadowDom */ + +snapshots["sbb-autocomplete renders in form field A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "statictext", + "name": "" + }, + { + "role": "combobox", + "name": "", + "autocomplete": "list", + "haspopup": "listbox" + } + ] +} +</p> +`; +/* end snapshot sbb-autocomplete renders in form field A11y tree Firefox */ + +snapshots["sbb-autocomplete renders standalone Safari Dom"] = +`<sbb-autocomplete + data-state="closed" + dir="ltr" + id="sbb-autocomplete-1" + origin="origin" + role="listbox" + trigger="trigger" +> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-1" + role="option" + value="1" + > + 1 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-2" + role="option" + value="2" + > + 2 + </sbb-option> +</sbb-autocomplete> +`; +/* end snapshot sbb-autocomplete renders standalone Safari Dom */ + +snapshots["sbb-autocomplete renders standalone Safari ShadowDom"] = +`<div class="sbb-autocomplete__gap-fix"> +</div> +<div class="sbb-autocomplete__container"> + <div class="sbb-autocomplete__gap-fix"> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="left" + > + </div> + </div> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="right" + > + </div> + </div> + </div> + <div class="sbb-autocomplete__panel"> + <div class="sbb-autocomplete__wrapper"> + <div class="sbb-autocomplete__options"> + <slot> + </slot> + </div> + </div> + </div> +</div> +`; +/* end snapshot sbb-autocomplete renders standalone Safari ShadowDom */ + +snapshots["sbb-autocomplete renders in form field Safari Dom"] = +`<sbb-form-field + data-input-empty="" + data-input-type="input" + data-slot-names="unnamed" + error-space="none" + size="m" + width="default" +> + <input + aria-autocomplete="list" + aria-controls="sbb-autocomplete-3" + aria-expanded="false" + aria-haspopup="listbox" + aria-owns="sbb-autocomplete-3" + autocomplete="off" + role="combobox" + > + <sbb-autocomplete + data-state="closed" + dir="ltr" + id="sbb-autocomplete-3" + role="listbox" + > + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-5" + role="option" + value="1" + > + 1 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-6" + role="option" + value="2" + > + 2 + </sbb-option> + </sbb-autocomplete> +</sbb-form-field> +`; +/* end snapshot sbb-autocomplete renders in form field Safari Dom */ + +snapshots["sbb-autocomplete renders in form field Safari ShadowDom"] = +`<div class="sbb-form-field__space-wrapper"> + <div + class="sbb-form-field__wrapper" + id="overlay-anchor" + > + <slot name="prefix"> + </slot> + <div class="sbb-form-field__input-container"> + <span + aria-hidden="true" + class="sbb-form-field__label-spacer" + > + </span> + <span class="sbb-form-field__label"> + <span class="sbb-form-field__label-ellipsis"> + <slot name="label"> + </slot> + </span> + </span> + <div class="sbb-form-field__input"> + <slot> + </slot> + </div> + </div> + <slot name="suffix"> + </slot> + </div> + <div class="sbb-form-field__error"> + <slot name="error"> + </slot> + </div> +</div> +`; +/* end snapshot sbb-autocomplete renders in form field Safari ShadowDom */ + +snapshots["sbb-autocomplete renders in form field A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "" + }, + { + "role": "combobox", + "name": "", + "autocomplete": "list", + "haspopup": "listbox" + } + ] +} +</p> +`; +/* end snapshot sbb-autocomplete renders in form field A11y tree Safari */ + diff --git a/src/components/autocomplete/autocomplete.spec.ts b/src/components/autocomplete/autocomplete.spec.ts index 1a0d75976e4..27c4d958151 100644 --- a/src/components/autocomplete/autocomplete.spec.ts +++ b/src/components/autocomplete/autocomplete.spec.ts @@ -1,96 +1,90 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { isSafari } from '../core/dom'; +import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; +import type { SbbFormFieldElement } from '../form-field'; + +import type { SbbAutocompleteElement } from './autocomplete'; import '../form-field'; import '../option'; import './autocomplete'; -import { isSafari } from '../core/dom'; describe('sbb-autocomplete', () => { - it('renders standalone', async () => { - await fixture(html` - <div id="origin"></div> - <input id="trigger" /> - <sbb-autocomplete origin="origin" trigger="trigger"> - <sbb-option value="1">1</sbb-option> - <sbb-option value="2">2</sbb-option> - </sbb-autocomplete> - `); - const elem = document.querySelector('sbb-autocomplete'); - const listboxAttr = 'id="sbb-autocomplete-1" role="listbox"'; - - expect(elem).dom.to.be.equal(` - <sbb-autocomplete data-state="closed" origin="origin" trigger="trigger" - dir="ltr" ${isSafari() ? listboxAttr : ''}> - <sbb-option value="1" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-1" role="option" data-slot-names="unnamed">1</sbb-option> - <sbb-option value="2" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-2" role="option" data-slot-names="unnamed">2</sbb-option> - </sbb-autocomplete> - `); - expect(elem).shadowDom.to.be.equal(` - <div class="sbb-autocomplete__gap-fix"></div> - <div class="sbb-autocomplete__container"> - <div class="sbb-autocomplete__gap-fix"> - <div class="sbb-gap-fix-wrapper"> - <div class="sbb-gap-fix-corner" id="left"></div> - </div> - <div class="sbb-gap-fix-wrapper"> - <div class="sbb-gap-fix-corner" id="right"></div> - </div> - </div> - <div class="sbb-autocomplete__panel"> - <div class="sbb-autocomplete__wrapper"> - <div class="sbb-autocomplete__options" ${!isSafari() ? listboxAttr : ''}> - <slot></slot> - </div> - </div> - </div> - </div> - `); - }); + describe('renders standalone', async () => { + let elem: SbbAutocompleteElement; - it('renders in form field', async () => { - const root = await fixture(html` - <sbb-form-field> - <input /> - <sbb-autocomplete> + beforeEach(async () => { + await fixture(html` + <div id="origin"></div> + <input id="trigger" /> + <sbb-autocomplete origin="origin" trigger="trigger"> <sbb-option value="1">1</sbb-option> <sbb-option value="2">2</sbb-option> </sbb-autocomplete> - </sbb-form-field> - `); - const elem = root.querySelector('sbb-autocomplete'); - const listboxAttr = 'id="sbb-autocomplete-4" role="listbox"'; + `); + elem = document.querySelector('sbb-autocomplete')!; + await waitForLitRender(elem); + }); - expect(root).dom.to.be.equal(` - <sbb-form-field error-space="none" size="m" width="default" data-input-empty data-input-type="input" data-slot-names="unnamed"> - <input - aria-autocomplete="list" aria-controls="sbb-autocomplete-4" aria-expanded="false" aria-haspopup="listbox" - aria-owns="sbb-autocomplete-4" autocomplete="off" role="combobox"> - <sbb-autocomplete data-state="closed" dir="ltr" ${isSafari() ? listboxAttr : ''}> - <sbb-option value="1" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-7" role="option" data-slot-names="unnamed">1</sbb-option> - <sbb-option value="2" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-8" role="option" data-slot-names="unnamed">2</sbb-option> - </sbb-autocomplete> - </sbb-form-field> - `); - expect(elem).shadowDom.to.equal(` - <div class="sbb-autocomplete__gap-fix"></div> - <div class="sbb-autocomplete__container"> - <div class="sbb-autocomplete__gap-fix"> - <div class="sbb-gap-fix-wrapper"> - <div class="sbb-gap-fix-corner" id="left"></div> - </div> - <div class="sbb-gap-fix-wrapper"> - <div class="sbb-gap-fix-corner" id="right"></div> - </div> - </div> - <div class="sbb-autocomplete__panel"> - <div class="sbb-autocomplete__wrapper"> - <div class="sbb-autocomplete__options" ${!isSafari() ? listboxAttr : ''}> - <slot></slot> - </div> - </div> - </div> - </div> - `); + (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); + + (isSafari() ? describe : describe.skip)('Safari', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); + }); + + describe('renders in form field', async () => { + let root: SbbFormFieldElement; + + beforeEach(async () => { + root = await fixture(html` + <sbb-form-field> + <input /> + <sbb-autocomplete> + <sbb-option value="1">1</sbb-option> + <sbb-option value="2">2</sbb-option> + </sbb-autocomplete> + </sbb-form-field> + `); + await waitForLitRender(root); + }); + + (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => { + it('Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); + }); + + (isSafari() ? describe : describe.skip)('Safari', async () => { + it('Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); + }); + + testA11yTreeSnapshot(); }); }); diff --git a/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js b/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js index 98925817665..cf2a31c8584 100644 --- a/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js +++ b/src/components/breadcrumb/breadcrumb-group/__snapshots__/breadcrumb-group.spec.snap.js @@ -1,7 +1,44 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-breadcrumb-group renders"] = +snapshots["sbb-breadcrumb-group renders - Dom"] = +`<sbb-breadcrumb-group + data-loaded="" + role="navigation" +> + <sbb-breadcrumb + dir="ltr" + href="/" + icon-name="pie-small" + role="link" + slot="li-0" + tabindex="0" + > + </sbb-breadcrumb> + <sbb-breadcrumb + dir="ltr" + href="/one" + role="link" + slot="li-1" + tabindex="0" + > + One + </sbb-breadcrumb> + <sbb-breadcrumb + aria-current="page" + dir="ltr" + href="/one" + role="link" + slot="li-2" + tabindex="0" + > + Two + </sbb-breadcrumb> +</sbb-breadcrumb-group> +`; +/* end snapshot sbb-breadcrumb-group renders - Dom */ + +snapshots["sbb-breadcrumb-group renders - ShadowDom"] = `<ol class="sbb-breadcrumb-group"> <li class="sbb-breadcrumb-group__item"> <slot name="li-0"> @@ -37,5 +74,146 @@ snapshots["sbb-breadcrumb-group renders"] = </slot> </span> `; -/* end snapshot sbb-breadcrumb-group renders */ +/* end snapshot sbb-breadcrumb-group renders - ShadowDom */ + +snapshots["sbb-breadcrumb-group A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "" + } + ] + }, + { + "role": "link", + "name": "One", + "children": [ + { + "role": "link", + "name": "One" + } + ] + }, + { + "role": "link", + "name": "Two", + "children": [ + { + "role": "link", + "name": "Two" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-breadcrumb-group A11y tree Chrome */ + +snapshots["sbb-breadcrumb-group A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "", + "value": "http://localhost:8000/" + } + ] + }, + { + "role": "link", + "name": "One", + "children": [ + { + "role": "link", + "name": "One", + "value": "http://localhost:8000/one" + } + ] + }, + { + "role": "link", + "name": "Two", + "children": [ + { + "role": "link", + "name": "Two", + "value": "http://localhost:8000/one" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-breadcrumb-group A11y tree Firefox */ + +snapshots["sbb-breadcrumb-group A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "" + } + ] + }, + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "One", + "children": [ + { + "role": "text", + "name": "One" + } + ] + } + ] + }, + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "Two", + "children": [ + { + "role": "text", + "name": "Two" + } + ] + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-breadcrumb-group A11y tree Safari */ diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts index 3adb44d2067..5734d3cc676 100644 --- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts +++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.spec.ts @@ -1,34 +1,34 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbBreadcrumbGroupElement } from './breadcrumb-group'; import '../breadcrumb'; import './breadcrumb-group'; -import { waitForLitRender } from '../../core/testing'; describe('sbb-breadcrumb-group', () => { - it('renders', async () => { - const root = await fixture(html` + let root: SbbBreadcrumbGroupElement; + + beforeEach(async () => { + root = await fixture(html` <sbb-breadcrumb-group> <sbb-breadcrumb href="/" icon-name="pie-small"></sbb-breadcrumb> <sbb-breadcrumb href="/one">One</sbb-breadcrumb> <sbb-breadcrumb href="/one">Two</sbb-breadcrumb> </sbb-breadcrumb-group> `); - await waitForLitRender(root); + }); - expect(root).dom.to.be.equal(` - <sbb-breadcrumb-group role='navigation' data-loaded> - <sbb-breadcrumb href="/" icon-name="pie-small" slot="li-0" dir="ltr" role="link" tabindex="0"></sbb-breadcrumb> - <sbb-breadcrumb href="/one" slot="li-1" dir="ltr" role="link" tabindex="0"> - One - </sbb-breadcrumb> - <sbb-breadcrumb href="/one" slot="li-2" aria-current="page" dir="ltr" role="link" tabindex="0"> - Two - </sbb-breadcrumb> - </sbb-breadcrumb-group> - `); + it('renders - Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + it('renders - ShadowDom', async () => { await expect(root).shadowDom.to.equalSnapshot(); }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js b/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js index 9de65f093b8..484b92e69c5 100644 --- a/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js +++ b/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js @@ -89,3 +89,76 @@ snapshots["sbb-breadcrumb renders as span if no href is provided"] = `; /* end snapshot sbb-breadcrumb renders as span if no href is provided */ +snapshots["sbb-breadcrumb A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "Breadcrumb", + "children": [ + { + "role": "link", + "name": "Breadcrumb" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-breadcrumb A11y tree Chrome */ + +snapshots["sbb-breadcrumb A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "link", + "name": "Breadcrumb", + "children": [ + { + "role": "link", + "name": "Breadcrumb", + "value": "http://localhost:8000/test" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-breadcrumb A11y tree Firefox */ + +snapshots["sbb-breadcrumb A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "Breadcrumb", + "children": [ + { + "role": "text", + "name": "Breadcrumb" + } + ] + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-breadcrumb A11y tree Safari */ + diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts index 6da7c4ac3ff..fa2b4ece570 100644 --- a/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts +++ b/src/components/breadcrumb/breadcrumb/breadcrumb.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import './breadcrumb'; @@ -33,8 +34,8 @@ describe('sbb-breadcrumb', () => { const root = await fixture(html` <sbb-breadcrumb href="/" icon-name="house-small"></sbb-breadcrumb> `); - await waitForLitRender(root); + expect(root).dom.to.be.equal(` <sbb-breadcrumb dir="ltr" @@ -51,8 +52,8 @@ describe('sbb-breadcrumb', () => { const root = await fixture(html` <sbb-breadcrumb href="/" icon-name="house-small">Home</sbb-breadcrumb> `); - await waitForLitRender(root); + expect(root).dom.to.be.equal(` <sbb-breadcrumb dir="ltr" @@ -78,4 +79,6 @@ describe('sbb-breadcrumb', () => { await expect(root).shadowDom.to.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html` <sbb-breadcrumb href="/test">Breadcrumb</sbb-breadcrumb> `); }); diff --git a/src/components/calendar/__snapshots__/calendar.spec.snap.js b/src/components/calendar/__snapshots__/calendar.spec.snap.js new file mode 100644 index 00000000000..fe036caec11 --- /dev/null +++ b/src/components/calendar/__snapshots__/calendar.spec.snap.js @@ -0,0 +1,1320 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-calendar renders"] = +`<div class="sbb-calendar__wrapper"> + <div class="sbb-calendar__controls"> + <sbb-button + aria-label="Change to the previous month" + dir="ltr" + icon-name="chevron-small-left-small" + id="sbb-calendar__controls-previous" + role="button" + size="m" + tabindex="0" + variant="secondary" + > + </sbb-button> + <div class="sbb-calendar__controls-month"> + <button + aria-label="Choose year and month January 2023" + class="sbb-calendar__controls-change-date" + id="sbb-calendar__date-selection" + type="button" + > + January 2023 + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="chevron-small-down-small" + role="img" + > + </sbb-icon> + </button> + <span + class="sbb-calendar__visually-hidden" + role="status" + > + January 2023 + </span> + </div> + <sbb-button + aria-label="Change to the next month" + dir="ltr" + icon-name="chevron-small-right-small" + id="sbb-calendar__controls-next" + role="button" + size="m" + tabindex="0" + variant="secondary" + > + </sbb-button> + </div> + <div class="sbb-calendar__table-container sbb-calendar__table-day-view"> + <table class="sbb-calendar__table"> + <thead class="sbb-calendar__table-header"> + <tr class="sbb-calendar__table-header-row"> + <th class="sbb-calendar__table-header"> + <span class="sbb-calendar__visually-hidden"> + Monday + </span> + <span aria-hidden="true"> + M + </span> + </th> + <th class="sbb-calendar__table-header"> + <span class="sbb-calendar__visually-hidden"> + Tuesday + </span> + <span aria-hidden="true"> + T + </span> + </th> + <th class="sbb-calendar__table-header"> + <span class="sbb-calendar__visually-hidden"> + Wednesday + </span> + <span aria-hidden="true"> + W + </span> + </th> + <th class="sbb-calendar__table-header"> + <span class="sbb-calendar__visually-hidden"> + Thursday + </span> + <span aria-hidden="true"> + T + </span> + </th> + <th class="sbb-calendar__table-header"> + <span class="sbb-calendar__visually-hidden"> + Friday + </span> + <span aria-hidden="true"> + F + </span> + </th> + <th class="sbb-calendar__table-header"> + <span class="sbb-calendar__visually-hidden"> + Saturday + </span> + <span aria-hidden="true"> + S + </span> + </th> + <th class="sbb-calendar__table-header"> + <span class="sbb-calendar__visually-hidden"> + Sunday + </span> + <span aria-hidden="true"> + S + </span> + </th> + </tr> + </thead> + <tbody class="sbb-calendar__table-body"> + <tr> + <td + class="sbb-calendar__table-data" + data-day="0 1 2023" + > + </td> + <td + class="sbb-calendar__table-data" + data-day="0 1 2023" + > + </td> + <td + class="sbb-calendar__table-data" + data-day="0 1 2023" + > + </td> + <td + class="sbb-calendar__table-data" + data-day="0 1 2023" + > + </td> + <td + class="sbb-calendar__table-data" + data-day="0 1 2023" + > + </td> + <td + class="sbb-calendar__table-data" + data-day="0 1 2023" + > + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 1, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="1 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 1 + </button> + </td> + </tr> + <tr> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 2, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="2 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 2 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 3, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="3 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 3 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-current="date" + aria-disabled="false" + aria-label="January 4, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__cell-current sbb-calendar__day" + data-day="4 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 4 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 5, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="5 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 5 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 6, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="6 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 6 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 7, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="7 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 7 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 8, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="8 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 8 + </button> + </td> + </tr> + <tr> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 9, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="9 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 9 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 10, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="10 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 10 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 11, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="11 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 11 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 12, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="12 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 12 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 13, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="13 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 13 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 14, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="14 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 14 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 15, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="15 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 15 + </button> + </td> + </tr> + <tr> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 16, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="16 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 16 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 17, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="17 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 17 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 18, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="18 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 18 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 19, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="19 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 19 + </button> + </td> + <td class="sbb-calendar__table-data sbb-calendar__table-data-selected"> + <button + aria-disabled="false" + aria-label="January 20, 2023" + aria-pressed="true" + class="sbb-calendar__cell sbb-calendar__day sbb-calendar__selected" + data-day="20 1 2023" + sbb-tooltip-close="" + tabindex="0" + > + 20 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 21, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="21 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 21 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 22, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="22 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 22 + </button> + </td> + </tr> + <tr> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 23, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="23 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 23 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 24, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="24 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 24 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 25, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="25 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 25 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 26, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="26 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 26 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 27, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="27 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 27 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 28, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="28 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 28 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 29, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="29 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 29 + </button> + </td> + </tr> + <tr> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 30, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="30 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 30 + </button> + </td> + <td class="sbb-calendar__table-data"> + <button + aria-disabled="false" + aria-label="January 31, 2023" + aria-pressed="false" + class="sbb-calendar__cell sbb-calendar__day" + data-day="31 1 2023" + sbb-tooltip-close="" + tabindex="-1" + > + 31 + </button> + </td> + </tr> + </tbody> + </table> + </div> +</div> +`; +/* end snapshot sbb-calendar renders */ + +snapshots["sbb-calendar A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Change to the previous month" + }, + { + "role": "button", + "name": "Choose year and month January 2023" + }, + { + "role": "text", + "name": "January 2023" + }, + { + "role": "button", + "name": "Change to the next month" + }, + { + "role": "text", + "name": "Monday" + }, + { + "role": "text", + "name": "Tuesday" + }, + { + "role": "text", + "name": "Wednesday" + }, + { + "role": "text", + "name": "Thursday" + }, + { + "role": "text", + "name": "Friday" + }, + { + "role": "text", + "name": "Saturday" + }, + { + "role": "text", + "name": "Sunday" + }, + { + "role": "button", + "name": "January 1, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 2, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 3, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 4, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 5, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 6, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 7, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 8, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 9, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 10, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 11, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 12, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 13, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 14, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 15, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 16, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 17, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 18, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 19, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 20, 2023", + "pressed": true + }, + { + "role": "button", + "name": "January 21, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 22, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 23, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 24, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 25, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 26, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 27, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 28, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 29, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 30, 2023", + "pressed": false + }, + { + "role": "button", + "name": "January 31, 2023", + "pressed": false + } + ] +} +</p> +`; +/* end snapshot sbb-calendar A11y tree Chrome */ + +snapshots["sbb-calendar A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "Change to the previous month" + }, + { + "role": "button", + "name": "Choose year and month January 2023" + }, + { + "role": "text leaf", + "name": "January 2023 " + }, + { + "role": "button", + "name": "Change to the next month" + }, + { + "role": "text leaf", + "name": "Monday" + }, + { + "role": "text leaf", + "name": "Tuesday" + }, + { + "role": "text leaf", + "name": "Wednesday" + }, + { + "role": "text leaf", + "name": "Thursday" + }, + { + "role": "text leaf", + "name": "Friday" + }, + { + "role": "text leaf", + "name": "Saturday" + }, + { + "role": "text leaf", + "name": "Sunday" + }, + { + "role": "toggle button", + "name": "January 1, 2023" + }, + { + "role": "toggle button", + "name": "January 2, 2023" + }, + { + "role": "toggle button", + "name": "January 3, 2023" + }, + { + "role": "toggle button", + "name": "January 4, 2023" + }, + { + "role": "toggle button", + "name": "January 5, 2023" + }, + { + "role": "toggle button", + "name": "January 6, 2023" + }, + { + "role": "toggle button", + "name": "January 7, 2023" + }, + { + "role": "toggle button", + "name": "January 8, 2023" + }, + { + "role": "toggle button", + "name": "January 9, 2023" + }, + { + "role": "toggle button", + "name": "January 10, 2023" + }, + { + "role": "toggle button", + "name": "January 11, 2023" + }, + { + "role": "toggle button", + "name": "January 12, 2023" + }, + { + "role": "toggle button", + "name": "January 13, 2023" + }, + { + "role": "toggle button", + "name": "January 14, 2023" + }, + { + "role": "toggle button", + "name": "January 15, 2023" + }, + { + "role": "toggle button", + "name": "January 16, 2023" + }, + { + "role": "toggle button", + "name": "January 17, 2023" + }, + { + "role": "toggle button", + "name": "January 18, 2023" + }, + { + "role": "toggle button", + "name": "January 19, 2023" + }, + { + "role": "toggle button", + "name": "January 20, 2023", + "pressed": true + }, + { + "role": "toggle button", + "name": "January 21, 2023" + }, + { + "role": "toggle button", + "name": "January 22, 2023" + }, + { + "role": "toggle button", + "name": "January 23, 2023" + }, + { + "role": "toggle button", + "name": "January 24, 2023" + }, + { + "role": "toggle button", + "name": "January 25, 2023" + }, + { + "role": "toggle button", + "name": "January 26, 2023" + }, + { + "role": "toggle button", + "name": "January 27, 2023" + }, + { + "role": "toggle button", + "name": "January 28, 2023" + }, + { + "role": "toggle button", + "name": "January 29, 2023" + }, + { + "role": "toggle button", + "name": "January 30, 2023" + }, + { + "role": "toggle button", + "name": "January 31, 2023" + } + ] +} +</p> +`; +/* end snapshot sbb-calendar A11y tree Firefox */ + +snapshots["sbb-calendar A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Change to the previous month" + }, + { + "role": "button", + "name": "Choose year and month January 2023" + }, + { + "role": "text", + "name": "January 2023" + }, + { + "role": "button", + "name": "Change to the next month" + }, + { + "role": "text", + "name": "Monday" + }, + { + "role": "text", + "name": "Tuesday" + }, + { + "role": "text", + "name": "Wednesday" + }, + { + "role": "text", + "name": "Thursday" + }, + { + "role": "text", + "name": "Friday" + }, + { + "role": "text", + "name": "Saturday" + }, + { + "role": "text", + "name": "Sunday" + }, + { + "role": "button", + "name": "January 1, 2023" + }, + { + "role": "button", + "name": "January 2, 2023" + }, + { + "role": "button", + "name": "January 3, 2023" + }, + { + "role": "button", + "name": "January 4, 2023" + }, + { + "role": "button", + "name": "January 5, 2023" + }, + { + "role": "button", + "name": "January 6, 2023" + }, + { + "role": "button", + "name": "January 7, 2023" + }, + { + "role": "button", + "name": "January 8, 2023" + }, + { + "role": "button", + "name": "January 9, 2023" + }, + { + "role": "button", + "name": "January 10, 2023" + }, + { + "role": "button", + "name": "January 11, 2023" + }, + { + "role": "button", + "name": "January 12, 2023" + }, + { + "role": "button", + "name": "January 13, 2023" + }, + { + "role": "button", + "name": "January 14, 2023" + }, + { + "role": "button", + "name": "January 15, 2023" + }, + { + "role": "button", + "name": "January 16, 2023" + }, + { + "role": "button", + "name": "January 17, 2023" + }, + { + "role": "button", + "name": "January 18, 2023" + }, + { + "role": "button", + "name": "January 19, 2023" + }, + { + "role": "button", + "name": "January 20, 2023" + }, + { + "role": "button", + "name": "January 21, 2023" + }, + { + "role": "button", + "name": "January 22, 2023" + }, + { + "role": "button", + "name": "January 23, 2023" + }, + { + "role": "button", + "name": "January 24, 2023" + }, + { + "role": "button", + "name": "January 25, 2023" + }, + { + "role": "button", + "name": "January 26, 2023" + }, + { + "role": "button", + "name": "January 27, 2023" + }, + { + "role": "button", + "name": "January 28, 2023" + }, + { + "role": "button", + "name": "January 29, 2023" + }, + { + "role": "button", + "name": "January 30, 2023" + }, + { + "role": "button", + "name": "January 31, 2023" + }, + { + "role": "text", + "name": "Monday" + }, + { + "role": "button", + "name": "January 2, 2023" + }, + { + "role": "button", + "name": "January 9, 2023" + }, + { + "role": "button", + "name": "January 16, 2023" + }, + { + "role": "button", + "name": "January 23, 2023" + }, + { + "role": "button", + "name": "January 30, 2023" + }, + { + "role": "text", + "name": "Tuesday" + }, + { + "role": "button", + "name": "January 3, 2023" + }, + { + "role": "button", + "name": "January 10, 2023" + }, + { + "role": "button", + "name": "January 17, 2023" + }, + { + "role": "button", + "name": "January 24, 2023" + }, + { + "role": "button", + "name": "January 31, 2023" + }, + { + "role": "text", + "name": "Wednesday" + }, + { + "role": "button", + "name": "January 4, 2023" + }, + { + "role": "button", + "name": "January 11, 2023" + }, + { + "role": "button", + "name": "January 18, 2023" + }, + { + "role": "button", + "name": "January 25, 2023" + }, + { + "role": "text", + "name": "Thursday" + }, + { + "role": "button", + "name": "January 5, 2023" + }, + { + "role": "button", + "name": "January 12, 2023" + }, + { + "role": "button", + "name": "January 19, 2023" + }, + { + "role": "button", + "name": "January 26, 2023" + }, + { + "role": "text", + "name": "Friday" + }, + { + "role": "button", + "name": "January 6, 2023" + }, + { + "role": "button", + "name": "January 13, 2023" + }, + { + "role": "button", + "name": "January 20, 2023" + }, + { + "role": "button", + "name": "January 27, 2023" + }, + { + "role": "text", + "name": "Saturday" + }, + { + "role": "button", + "name": "January 7, 2023" + }, + { + "role": "button", + "name": "January 14, 2023" + }, + { + "role": "button", + "name": "January 21, 2023" + }, + { + "role": "button", + "name": "January 28, 2023" + }, + { + "role": "text", + "name": "Sunday" + }, + { + "role": "button", + "name": "January 1, 2023" + }, + { + "role": "button", + "name": "January 8, 2023" + }, + { + "role": "button", + "name": "January 15, 2023" + }, + { + "role": "button", + "name": "January 22, 2023" + }, + { + "role": "button", + "name": "January 29, 2023" + }, + { + "role": "text", + "name": "Monday" + }, + { + "role": "text", + "name": "Tuesday" + }, + { + "role": "text", + "name": "Wednesday" + }, + { + "role": "text", + "name": "Thursday" + }, + { + "role": "text", + "name": "Friday" + }, + { + "role": "text", + "name": "Saturday" + }, + { + "role": "text", + "name": "Sunday" + } + ] +} +</p> +`; +/* end snapshot sbb-calendar A11y tree Safari */ + diff --git a/src/components/calendar/calendar.spec.ts b/src/components/calendar/calendar.spec.ts index e99063cb744..2f607267344 100644 --- a/src/components/calendar/calendar.spec.ts +++ b/src/components/calendar/calendar.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import './calendar'; import '../button'; @@ -14,242 +15,12 @@ describe('sbb-calendar', () => { data-now="1672790400000" ></sbb-calendar>`, ); - await waitForLitRender(root); expect(root).dom.to.be.equal( `<sbb-calendar data-now="1672790400000" selected-date="2023-01-20T00:00:00"></sbb-calendar>`, ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-calendar__wrapper"> - <div class="sbb-calendar__controls"> - <sbb-button tabindex="0" role="button" dir="ltr" aria-label="Change to the previous month" icon-name="chevron-small-left-small" id="sbb-calendar__controls-previous" size="m" variant="secondary"></sbb-button> - <div class="sbb-calendar__controls-month"> - <button type="button" aria-label="Choose year and month January 2023" id="sbb-calendar__date-selection" class="sbb-calendar__controls-change-date"> - January 2023 - <sbb-icon aria-hidden="true" data-namespace="default" name="chevron-small-down-small" role="img"></sbb-icon> - </button> - <span class="sbb-calendar__visually-hidden" role="status"> - January 2023 - </span> - </div> - <sbb-button tabindex="0" role="button" dir="ltr" aria-label="Change to the next month" icon-name="chevron-small-right-small" id="sbb-calendar__controls-next" size="m" variant="secondary"></sbb-button> - </div> - <div class="sbb-calendar__table-container sbb-calendar__table-day-view"> - <table class="sbb-calendar__table"> - <thead class="sbb-calendar__table-header"> - <tr class="sbb-calendar__table-header-row"> - <th class="sbb-calendar__table-header"> - <span class="sbb-calendar__visually-hidden">Monday</span> - <span aria-hidden="true">M</span> - </th> - <th class="sbb-calendar__table-header"> - <span class="sbb-calendar__visually-hidden">Tuesday</span> - <span aria-hidden="true">T</span> - </th> - <th class="sbb-calendar__table-header"> - <span class="sbb-calendar__visually-hidden">Wednesday</span> - <span aria-hidden="true">W</span> - </th> - <th class="sbb-calendar__table-header"> - <span class="sbb-calendar__visually-hidden">Thursday</span> - <span aria-hidden="true">T</span> - </th> - <th class="sbb-calendar__table-header"> - <span class="sbb-calendar__visually-hidden">Friday</span> - <span aria-hidden="true">F</span> - </th> - <th class="sbb-calendar__table-header"> - <span class="sbb-calendar__visually-hidden">Saturday</span> - <span aria-hidden="true">S</span> - </th> - <th class="sbb-calendar__table-header"> - <span class="sbb-calendar__visually-hidden">Sunday</span> - <span aria-hidden="true">S</span> - </th> - </tr> - </thead> - <tbody class="sbb-calendar__table-body"> - <tr> - <td class="sbb-calendar__table-data" data-day="0 1 2023"></td> - <td class="sbb-calendar__table-data" data-day="0 1 2023"></td> - <td class="sbb-calendar__table-data" data-day="0 1 2023"></td> - <td class="sbb-calendar__table-data" data-day="0 1 2023"></td> - <td class="sbb-calendar__table-data" data-day="0 1 2023"></td> - <td class="sbb-calendar__table-data" data-day="0 1 2023"></td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 1, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="1 1 2023" sbb-tooltip-close="" tabindex="-1"> - 1 - </button> - </td> - </tr> - <tr> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 2, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="2 1 2023" sbb-tooltip-close="" tabindex="-1"> - 2 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 3, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="3 1 2023" sbb-tooltip-close="" tabindex="-1"> - 3 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-current="date" aria-disabled="false" aria-label="January 4, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day sbb-calendar__cell-current" data-day="4 1 2023" sbb-tooltip-close="" tabindex="-1"> - 4 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 5, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="5 1 2023" sbb-tooltip-close="" tabindex="-1"> - 5 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 6, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="6 1 2023" sbb-tooltip-close="" tabindex="-1"> - 6 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 7, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="7 1 2023" sbb-tooltip-close="" tabindex="-1"> - 7 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 8, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="8 1 2023" sbb-tooltip-close="" tabindex="-1"> - 8 - </button> - </td> - </tr> - <tr> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 9, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="9 1 2023" sbb-tooltip-close="" tabindex="-1"> - 9 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 10, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="10 1 2023" sbb-tooltip-close="" tabindex="-1"> - 10 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 11, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="11 1 2023" sbb-tooltip-close="" tabindex="-1"> - 11 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 12, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="12 1 2023" sbb-tooltip-close="" tabindex="-1"> - 12 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 13, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="13 1 2023" sbb-tooltip-close="" tabindex="-1"> - 13 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 14, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="14 1 2023" sbb-tooltip-close="" tabindex="-1"> - 14 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 15, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="15 1 2023" sbb-tooltip-close="" tabindex="-1"> - 15 - </button> - </td> - </tr> - <tr> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 16, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="16 1 2023" sbb-tooltip-close="" tabindex="-1"> - 16 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 17, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="17 1 2023" sbb-tooltip-close="" tabindex="-1"> - 17 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 18, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="18 1 2023" sbb-tooltip-close="" tabindex="-1"> - 18 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 19, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="19 1 2023" sbb-tooltip-close="" tabindex="-1"> - 19 - </button> - </td> - <td class="sbb-calendar__table-data sbb-calendar__table-data-selected"> - <button aria-disabled="false" aria-label="January 20, 2023" aria-pressed="true" class="sbb-calendar__cell sbb-calendar__day sbb-calendar__selected" data-day="20 1 2023" sbb-tooltip-close="" tabindex="0"> - 20 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 21, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="21 1 2023" sbb-tooltip-close="" tabindex="-1"> - 21 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 22, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="22 1 2023" sbb-tooltip-close="" tabindex="-1"> - 22 - </button> - </td> - </tr> - <tr> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 23, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="23 1 2023" sbb-tooltip-close="" tabindex="-1"> - 23 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 24, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="24 1 2023" sbb-tooltip-close="" tabindex="-1"> - 24 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 25, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="25 1 2023" sbb-tooltip-close="" tabindex="-1"> - 25 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 26, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="26 1 2023" sbb-tooltip-close="" tabindex="-1"> - 26 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 27, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="27 1 2023" sbb-tooltip-close="" tabindex="-1"> - 27 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 28, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="28 1 2023" sbb-tooltip-close="" tabindex="-1"> - 28 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 29, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="29 1 2023" sbb-tooltip-close="" tabindex="-1"> - 29 - </button> - </td> - </tr> - <tr> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 30, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="30 1 2023" sbb-tooltip-close="" tabindex="-1"> - 30 - </button> - </td> - <td class="sbb-calendar__table-data"> - <button aria-disabled="false" aria-label="January 31, 2023" aria-pressed="false" class="sbb-calendar__cell sbb-calendar__day" data-day="31 1 2023" sbb-tooltip-close="" tabindex="-1"> - 31 - </button> - </td> - </tr> - </tbody> - </table> - </div> - </div> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders with min and max', async () => { @@ -287,4 +58,12 @@ describe('sbb-calendar', () => { expect(firstDisabledMaxDate).to.have.attribute('disabled'); expect(firstDisabledMaxDate).to.have.attribute('aria-disabled', 'true'); }); + + testA11yTreeSnapshot( + undefined, + html`<sbb-calendar + selected-date="2023-01-20T00:00:00" + data-now="1672790400000" + ></sbb-calendar>`, + ); }); diff --git a/src/components/card/card-badge/__snapshots__/card-badge.spec.snap.js b/src/components/card/card-badge/__snapshots__/card-badge.spec.snap.js new file mode 100644 index 00000000000..ca05f6439fb --- /dev/null +++ b/src/components/card/card-badge/__snapshots__/card-badge.spec.snap.js @@ -0,0 +1,80 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-card-badge renders - Dom"] = +`<sbb-card-badge + color="charcoal" + dir="ltr" + role="text" + slot="badge" +> + Black Friday Special +</sbb-card-badge> +`; +/* end snapshot sbb-card-badge renders - Dom */ + +snapshots["sbb-card-badge renders - ShadowDom"] = +`<span class="sbb-card-badge-wrapper"> + <span class="sbb-card-badge"> + <span + aria-hidden="true" + class="sbb-card-badge-background" + > + </span> + <span class="sbb-card-badge-content"> + <slot> + </slot> + </span> + </span> +</span> +`; +/* end snapshot sbb-card-badge renders - ShadowDom */ + +snapshots["sbb-card-badge A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Black Friday Special" + } + ] +} +</p> +`; +/* end snapshot sbb-card-badge A11y tree Chrome */ + +snapshots["sbb-card-badge A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Black Friday Special" + } + ] +} +</p> +`; +/* end snapshot sbb-card-badge A11y tree Firefox */ + +snapshots["sbb-card-badge A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Black Friday Special" + } + ] +} +</p> +`; +/* end snapshot sbb-card-badge A11y tree Safari */ + diff --git a/src/components/card/card-badge/card-badge.spec.ts b/src/components/card/card-badge/card-badge.spec.ts index b84980afe8a..7f4e89bf238 100644 --- a/src/components/card/card-badge/card-badge.spec.ts +++ b/src/components/card/card-badge/card-badge.spec.ts @@ -1,28 +1,25 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbCardBadgeElement } from './card-badge'; import './card-badge'; describe('sbb-card-badge', () => { - it('renders', async () => { - const root = await fixture(html`<sbb-card-badge></sbb-card-badge>`); + let element: SbbCardBadgeElement; + + beforeEach(async () => { + element = await fixture(html`<sbb-card-badge>Black Friday Special</sbb-card-badge>`); + }); - expect(root).dom.to.be.equal( - ` - <sbb-card-badge slot="badge" color="charcoal" role="text" dir="ltr"> - </sbb-card-badge> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <span class="sbb-card-badge-wrapper"> - <span class="sbb-card-badge"> - <span class="sbb-card-badge-background" aria-hidden="true"></span> - <span class="sbb-card-badge-content"> - <slot></slot> - </span> - </span> - </span> - `, - ); + it('renders - Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); }); + + it('renders - ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/card/card/__snapshots__/card.spec.snap.js b/src/components/card/card/__snapshots__/card.spec.snap.js new file mode 100644 index 00000000000..6536d56fd2f --- /dev/null +++ b/src/components/card/card/__snapshots__/card.spec.snap.js @@ -0,0 +1,148 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-card should render with sbb-card-badge - Dom"] = +`<sbb-card + color="white" + data-has-card-badge="" + size="xl" +> + <h2> + Title + </h2> + Content text + <sbb-card-badge + color="charcoal" + dir="ltr" + role="text" + slot="badge" + > + <span> + % + </span> + <span> + from CHF + </span> + <span> + 19.99 + </span> + </sbb-card-badge> +</sbb-card> +`; +/* end snapshot sbb-card should render with sbb-card-badge - Dom */ + +snapshots["sbb-card should render with sbb-card-badge - ShadowDom"] = +`<span class="sbb-card"> + <slot name="action"> + </slot> + <span class="sbb-card__wrapper"> + <slot> + </slot> + </span> + <span class="sbb-card__badge-wrapper"> + <slot name="badge"> + </slot> + </span> +</span> +`; +/* end snapshot sbb-card should render with sbb-card-badge - ShadowDom */ + +snapshots["sbb-card A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Title", + "level": 2 + }, + { + "role": "text", + "name": "Content text" + }, + { + "role": "text", + "name": "%" + }, + { + "role": "text", + "name": "from CHF" + }, + { + "role": "text", + "name": "19.99" + } + ] +} +</p> +`; +/* end snapshot sbb-card A11y tree Chrome */ + +snapshots["sbb-card A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "heading", + "name": "Title", + "level": 2 + }, + { + "role": "text leaf", + "name": "Content text " + }, + { + "role": "text leaf", + "name": "%" + }, + { + "role": "text leaf", + "name": "from CHF" + }, + { + "role": "text leaf", + "name": "19.99" + } + ] +} +</p> +`; +/* end snapshot sbb-card A11y tree Firefox */ + +snapshots["sbb-card A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Title", + "level": 2 + }, + { + "role": "text", + "name": "Content text" + }, + { + "role": "text", + "name": "%" + }, + { + "role": "text", + "name": "from CHF" + }, + { + "role": "text", + "name": "19.99" + } + ] +} +</p> +`; +/* end snapshot sbb-card A11y tree Safari */ + diff --git a/src/components/card/card/card.e2e.ts b/src/components/card/card/card.e2e.ts index 599aa2ffa1c..c663b82c635 100644 --- a/src/components/card/card/card.e2e.ts +++ b/src/components/card/card/card.e2e.ts @@ -31,28 +31,6 @@ describe('sbb-card', () => { ).getPropertyValue('display'), ).not.to.be.equal('none'); expect(element).to.have.attribute('data-has-card-badge'); - expect(element).dom.to.be.equal(` - <sbb-card color="white" data-has-card-badge size="xl"> - <h2>Title</h2> - Content text - <sbb-card-badge color="charcoal" dir="ltr" role="text" slot="badge"> - <span>%</span> - <span>from CHF</span> - <span>19.99</span> - </sbb-card-badge> - </sbb-card> - `); - expect(element).shadowDom.to.be.equal(` - <span class="sbb-card"> - <slot name="action"></slot> - <span class="sbb-card__wrapper"> - <slot></slot> - </span> - <span class="sbb-card__badge-wrapper"> - <slot name="badge"></slot> - </span> - </span> - `); }); it('should render without sbb-card-badge', async () => { @@ -70,4 +48,20 @@ describe('sbb-card', () => { ).to.be.equal('none'); expect(element).not.to.have.attribute('data-has-card-badge'); }); + + it('should not render sbb-card-badge for small sizes', async () => { + const root = await fixture( + html` <sbb-card size="xs"> + <h2>Title</h2> + Content text + <sbb-card-badge> + <span>%</span> + <span>from CHF</span> + <span>19.99</span> + </sbb-card-badge> + </sbb-card>`, + ); + + expect(root.shadowRoot!.querySelector('.sbb-card__badge-wrapper')).not.to.be.ok; + }); }); diff --git a/src/components/card/card/card.spec.ts b/src/components/card/card/card.spec.ts index 7b1c5b21fce..67f9f2aa2ec 100644 --- a/src/components/card/card/card.spec.ts +++ b/src/components/card/card/card.spec.ts @@ -1,16 +1,20 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbCardElement } from './card'; import './card'; import '../card-badge'; -const cardBadgeWrapperSelector = '.sbb-card__badge-wrapper'; - describe('sbb-card', () => { - it('should not render sbb-card-badge for small sizes', async () => { + let element: SbbCardElement; + + beforeEach(async () => { // Note: for easier testing, we add the slot="badge" // to <sbb-card-badge> which would not be needed in real. - const root = await fixture( - html` <sbb-card size="xs"> + element = await fixture(html` + <sbb-card size="xl"> <h2>Title</h2> Content text <sbb-card-badge slot="badge"> @@ -18,9 +22,17 @@ describe('sbb-card', () => { <span>from CHF</span> <span>19.99</span> </sbb-card-badge> - </sbb-card>`, - ); + </sbb-card> + `); + }); + + it('should render with sbb-card-badge - Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - expect(root.shadowRoot!.querySelector(cardBadgeWrapperSelector)).not.to.be.ok; + it('should render with sbb-card-badge - ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/checkbox/checkbox-group/__snapshots__/checkbox-group.spec.snap.js b/src/components/checkbox/checkbox-group/__snapshots__/checkbox-group.spec.snap.js new file mode 100644 index 00000000000..3d04b3f57b8 --- /dev/null +++ b/src/components/checkbox/checkbox-group/__snapshots__/checkbox-group.spec.snap.js @@ -0,0 +1,141 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-checkbox-group renders - ShadowDom"] = +`<div class="sbb-checkbox-group"> + <slot> + </slot> +</div> +<div class="sbb-checkbox-group__error"> + <slot name="error"> + </slot> +</div> +`; +/* end snapshot sbb-checkbox-group renders - ShadowDom */ + +snapshots["sbb-checkbox-group renders - Dom"] = +`<sbb-checkbox-group + data-slot-names="unnamed" + orientation="horizontal" +> + <sbb-checkbox + aria-checked="false" + aria-disabled="false" + aria-required="false" + data-slot-names="unnamed" + icon-placement="end" + role="checkbox" + size="m" + tabindex="0" + value="checkbox-1" + > + Label 1 + </sbb-checkbox> + <sbb-checkbox + aria-checked="false" + aria-disabled="false" + aria-required="false" + data-slot-names="unnamed" + icon-placement="end" + role="checkbox" + size="m" + tabindex="0" + value="checkbox-2" + > + Label 2 + </sbb-checkbox> + <sbb-checkbox + aria-checked="false" + aria-disabled="false" + aria-required="false" + data-slot-names="unnamed" + icon-placement="end" + role="checkbox" + size="m" + tabindex="0" + value="checkbox-3" + > + Label 3 + </sbb-checkbox> +</sbb-checkbox-group> +`; +/* end snapshot sbb-checkbox-group renders - Dom */ + +snapshots["sbb-checkbox-group A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "checkbox", + "name": " Label 1", + "checked": false + }, + { + "role": "checkbox", + "name": " Label 2", + "checked": false + }, + { + "role": "checkbox", + "name": " Label 3", + "checked": false + } + ] +} +</p> +`; +/* end snapshot sbb-checkbox-group A11y tree Chrome */ + +snapshots["sbb-checkbox-group A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "checkbox", + "name": " Label 1" + }, + { + "role": "checkbox", + "name": " Label 2" + }, + { + "role": "checkbox", + "name": " Label 3" + } + ] +} +</p> +`; +/* end snapshot sbb-checkbox-group A11y tree Firefox */ + +snapshots["sbb-checkbox-group A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "checkbox", + "name": " Label 1", + "checked": false + }, + { + "role": "checkbox", + "name": " Label 2", + "checked": false + }, + { + "role": "checkbox", + "name": " Label 3", + "checked": false + } + ] +} +</p> +`; +/* end snapshot sbb-checkbox-group A11y tree Safari */ + diff --git a/src/components/checkbox/checkbox-group/checkbox-group.spec.ts b/src/components/checkbox/checkbox-group/checkbox-group.spec.ts index 5c7fe969199..e364947114b 100644 --- a/src/components/checkbox/checkbox-group/checkbox-group.spec.ts +++ b/src/components/checkbox/checkbox-group/checkbox-group.spec.ts @@ -1,35 +1,32 @@ -import './checkbox-group'; - import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbCheckboxGroupElement } from './checkbox-group'; +import './checkbox-group'; +import '../checkbox'; + describe('sbb-checkbox-group', () => { - it('renders', async () => { - const root = await fixture(html` + let element: SbbCheckboxGroupElement; + + beforeEach(async () => { + element = await fixture(html` <sbb-checkbox-group> <sbb-checkbox value="checkbox-1">Label 1</sbb-checkbox> <sbb-checkbox value="checkbox-2">Label 2</sbb-checkbox> <sbb-checkbox value="checkbox-3">Label 3</sbb-checkbox> </sbb-checkbox-group> `); + }); - expect(root).dom.to.be.equal( - ` - <sbb-checkbox-group orientation="horizontal" data-slot-names="unnamed"> - <sbb-checkbox value="checkbox-1">Label 1</sbb-checkbox> - <sbb-checkbox value="checkbox-2">Label 2</sbb-checkbox> - <sbb-checkbox value="checkbox-3">Label 3</sbb-checkbox> - </sbb-checkbox-group> - `, - ); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-checkbox-group"> - <slot></slot> - </div> - <div class="sbb-checkbox-group__error"> - <slot name="error"> - </slot> - </div> - `); + it('renders - Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); }); + + it('renders - ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/checkbox/checkbox/__snapshots__/checkbox.spec.snap.js b/src/components/checkbox/checkbox/__snapshots__/checkbox.spec.snap.js index 6e701468ab3..d5f4803ba25 100644 --- a/src/components/checkbox/checkbox/__snapshots__/checkbox.spec.snap.js +++ b/src/components/checkbox/checkbox/__snapshots__/checkbox.spec.snap.js @@ -172,3 +172,104 @@ snapshots["sbb-checkbox icon position with slotted icon"] = `; /* end snapshot sbb-checkbox icon position with slotted icon */ +snapshots["sbb-checkbox Unchecked - A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "checkbox", + "name": " Label", + "checked": false + } + ] +} +</p> +`; +/* end snapshot sbb-checkbox Unchecked - A11y tree Chrome */ + +snapshots["sbb-checkbox Checked - A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "checkbox", + "name": " Label", + "checked": true + } + ] +} +</p> +`; +/* end snapshot sbb-checkbox Checked - A11y tree Chrome */ + +snapshots["sbb-checkbox Unchecked - A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "checkbox", + "name": " Label" + } + ] +} +</p> +`; +/* end snapshot sbb-checkbox Unchecked - A11y tree Firefox */ + +snapshots["sbb-checkbox Checked - A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "checkbox", + "name": " Label", + "checked": true + } + ] +} +</p> +`; +/* end snapshot sbb-checkbox Checked - A11y tree Firefox */ + +snapshots["sbb-checkbox Unchecked - A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "checkbox", + "name": " Label", + "checked": false + } + ] +} +</p> +`; +/* end snapshot sbb-checkbox Unchecked - A11y tree Safari */ + +snapshots["sbb-checkbox Checked - A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "checkbox", + "name": " Label", + "checked": true + } + ] +} +</p> +`; +/* end snapshot sbb-checkbox Checked - A11y tree Safari */ + diff --git a/src/components/checkbox/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox/checkbox.spec.ts index 9ccd5da2210..ae88216ef59 100644 --- a/src/components/checkbox/checkbox/checkbox.spec.ts +++ b/src/components/checkbox/checkbox/checkbox.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import './checkbox'; @@ -96,4 +97,8 @@ describe('sbb-checkbox', () => { await expect(root).shadowDom.to.be.equalSnapshot(); }); }); + + testA11yTreeSnapshot('Unchecked - A11y tree', html`<sbb-checkbox>Label</sbb-checkbox>`); + + testA11yTreeSnapshot('Checked - A11y tree', html`<sbb-checkbox checked>Label</sbb-checkbox>`); }); diff --git a/src/components/chip/__snapshots__/chip.spec.snap.js b/src/components/chip/__snapshots__/chip.spec.snap.js new file mode 100644 index 00000000000..8b154609289 --- /dev/null +++ b/src/components/chip/__snapshots__/chip.spec.snap.js @@ -0,0 +1,71 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-chip renders - Dom"] = +`<sbb-chip + color="milk" + size="xxs" +> + Label +</sbb-chip> +`; +/* end snapshot sbb-chip renders - Dom */ + +snapshots["sbb-chip renders - ShadowDom"] = +`<span class="sbb-chip"> + <span class="sbb-chip__text-wrapper"> + <slot> + </slot> + </span> +</span> +`; +/* end snapshot sbb-chip renders - ShadowDom */ + +snapshots["sbb-chip A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Label" + } + ] +} +</p> +`; +/* end snapshot sbb-chip A11y tree Chrome */ + +snapshots["sbb-chip A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Label" + } + ] +} +</p> +`; +/* end snapshot sbb-chip A11y tree Firefox */ + +snapshots["sbb-chip A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Label" + } + ] +} +</p> +`; +/* end snapshot sbb-chip A11y tree Safari */ + diff --git a/src/components/chip/chip.spec.ts b/src/components/chip/chip.spec.ts index 452f2d5324c..f267b6fda45 100644 --- a/src/components/chip/chip.spec.ts +++ b/src/components/chip/chip.spec.ts @@ -1,19 +1,25 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + +import type { SbbChipElement } from './chip'; import './chip'; describe('sbb-chip', () => { - it('renders', async () => { - const root: Element = await fixture(html`<sbb-chip>Label</sbb-chip>`); + let element: SbbChipElement; + + beforeEach(async () => { + element = await fixture(html`<sbb-chip>Label</sbb-chip>`); + }); - expect(root).dom.to.be.equal(`<sbb-chip color="milk" size="xxs">Label</sbb-chip>`); + it('renders - Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - expect(root).shadowDom.to.be.equal(` - <span class="sbb-chip"> - <span class="sbb-chip__text-wrapper"> - <slot></slot> - </span> - </span> - `); + it('renders - ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/clock/__snapshots__/clock.spec.snap.js b/src/components/clock/__snapshots__/clock.spec.snap.js new file mode 100644 index 00000000000..b19b2891c58 --- /dev/null +++ b/src/components/clock/__snapshots__/clock.spec.snap.js @@ -0,0 +1,64 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-clock renders"] = +`<div class="sbb-clock"> + <span class="sbb-clock__face"> + </span> + <span class="sbb-clock__hand-hours"> + </span> + <span class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"> + </span> + <span class="sbb-clock__hand-seconds"> + </span> +</div> +`; +/* end snapshot sbb-clock renders */ + +snapshots["sbb-clock renders with a fixed time"] = +`<div class="sbb-clock"> + <span class="sbb-clock__face"> + </span> + <span class="sbb-clock__hand-hours sbb-clock__hand-hours--initial-hour"> + </span> + <span + class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition" + style="transform: rotateZ(180deg);" + > + </span> + <span class="sbb-clock__hand-seconds sbb-clock__hand-seconds--initial-minute"> + </span> +</div> +`; +/* end snapshot sbb-clock renders with a fixed time */ + +snapshots["sbb-clock A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-clock A11y tree Chrome */ + +snapshots["sbb-clock A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-clock A11y tree Firefox */ + +snapshots["sbb-clock A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-clock A11y tree Safari */ + diff --git a/src/components/clock/clock.spec.ts b/src/components/clock/clock.spec.ts index 629bff5723d..df3613c69a7 100644 --- a/src/components/clock/clock.spec.ts +++ b/src/components/clock/clock.spec.ts @@ -1,6 +1,8 @@ import { assert, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + import { SbbClockElement } from './clock'; describe('sbb-clock', () => { @@ -12,16 +14,7 @@ describe('sbb-clock', () => { expect(element).dom.to.be.equal(`<sbb-clock></sbb-clock>`); - expect(element).shadowDom.to.be.equal( - ` - <div class="sbb-clock"> - <span class="sbb-clock__face"></span> - <span class="sbb-clock__hand-hours"></span> - <span class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"></span> - <span class="sbb-clock__hand-seconds"></span> - </div> - `, - ); + await expect(element).shadowDom.to.be.equalSnapshot(); }); it('renders with a fixed time', async () => { @@ -30,35 +23,8 @@ describe('sbb-clock', () => { expect(element).to.have.attribute('data-initialized'); - expect(element).shadowDom.to.be.equal(` - <div class="sbb-clock"> - <span class="sbb-clock__face"> - <svg focusable="false" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg"> - <g class="face"> - <circle cx="52.5" cy="52.5" fill="#FFF" r="52.5"></circle> - <path d="M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z"></path> - <g> - <path d="M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z"></path> - </g> - </g> - </svg> - </span> - <span class="sbb-clock__hand-hours sbb-clock__hand-hours--initial-hour"> - <svg focusable="false" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg"> - <path d="M55.7 64.5h-6.4l.6-44h5.2z" id="mod_clock_svg_hours"></path> - </svg> - </span> - <span class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition" style="transform: rotateZ(180deg);"> - <svg focusable="false" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg"> - <path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"></path> - </svg> - </span> - <span class="sbb-clock__hand-seconds sbb-clock__hand-seconds--initial-minute"> - <svg focusable="false" viewBox="0 0 105 105" xmlns="http://www.w3.org/2000/svg"> - <path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"></path> - </svg> - </span> - </div> -`); + await expect(element).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html`<sbb-clock></sbb-clock>`); }); diff --git a/src/components/datepicker/datepicker-next-day/__snapshots__/datepicker-next-day.spec.snap.js b/src/components/datepicker/datepicker-next-day/__snapshots__/datepicker-next-day.spec.snap.js index ba1fde6d468..53c5d2d594b 100644 --- a/src/components/datepicker/datepicker-next-day/__snapshots__/datepicker-next-day.spec.snap.js +++ b/src/components/datepicker/datepicker-next-day/__snapshots__/datepicker-next-day.spec.snap.js @@ -14,3 +14,67 @@ snapshots["sbb-datepicker-next-day renders"] = `; /* end snapshot sbb-datepicker-next-day renders */ +snapshots["sbb-datepicker-next-day renders with connected datepicker"] = +`<sbb-datepicker-next-day + aria-label="Change to the next day, currently selected December 31, 2022." + date-picker="datepicker" + dir="ltr" + role="button" + slot="suffix" + tabindex="0" +> +</sbb-datepicker-next-day> +`; +/* end snapshot sbb-datepicker-next-day renders with connected datepicker */ + +snapshots["sbb-datepicker-next-day A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Next day", + "disabled": true + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker-next-day A11y tree Chrome */ + +snapshots["sbb-datepicker-next-day A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "Next day", + "disabled": true + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker-next-day A11y tree Firefox */ + +snapshots["sbb-datepicker-next-day A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Next day", + "disabled": true + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker-next-day A11y tree Safari */ + diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts index 54b9e61c3d5..1430433e673 100644 --- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts +++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts @@ -1,6 +1,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import type { SbbFormFieldElement } from '../../form-field'; import type { SbbDatepickerNextDayElement } from './datepicker-next-day'; @@ -34,16 +35,8 @@ describe('sbb-datepicker-next-day', () => { const element: SbbDatepickerNextDayElement = page.querySelector<SbbDatepickerNextDayElement>('sbb-datepicker-next-day')!; - expect(element).dom.to.be.equal(` - <sbb-datepicker-next-day - date-picker="datepicker" - dir="ltr" - role="button" - slot="suffix" - tabindex="0" - aria-label="Change to the next day, currently selected December 31, 2022."> - </sbb-datepicker-next-day> - `); + + await expect(element).dom.to.be.equalSnapshot(); expect(element).shadowDom.to.be.equal(` <span class="sbb-datepicker-next-day"> @@ -79,4 +72,6 @@ describe('sbb-datepicker-next-day', () => { page.querySelector<SbbDatepickerNextDayElement>('sbb-datepicker-next-day')!; expect(element).to.have.attribute('data-disabled'); }); + + testA11yTreeSnapshot(undefined, html`<sbb-datepicker-next-day></sbb-datepicker-next-day>`); }); diff --git a/src/components/datepicker/datepicker-previous-day/__snapshots__/datepicker-previous-day.spec.snap.js b/src/components/datepicker/datepicker-previous-day/__snapshots__/datepicker-previous-day.spec.snap.js index 9fe33d4f1ea..0deee4e6eb3 100644 --- a/src/components/datepicker/datepicker-previous-day/__snapshots__/datepicker-previous-day.spec.snap.js +++ b/src/components/datepicker/datepicker-previous-day/__snapshots__/datepicker-previous-day.spec.snap.js @@ -14,3 +14,67 @@ snapshots["sbb-datepicker-previous-day renders"] = `; /* end snapshot sbb-datepicker-previous-day renders */ +snapshots["sbb-datepicker-previous-day renders with connected datepicker"] = +`<sbb-datepicker-previous-day + aria-label="Change to the previous day, currently selected December 31, 2022." + date-picker="datepicker" + dir="ltr" + role="button" + slot="prefix" + tabindex="0" +> +</sbb-datepicker-previous-day> +`; +/* end snapshot sbb-datepicker-previous-day renders with connected datepicker */ + +snapshots["sbb-datepicker-previous-day A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Previous day", + "disabled": true + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker-previous-day A11y tree Chrome */ + +snapshots["sbb-datepicker-previous-day A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "Previous day", + "disabled": true + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker-previous-day A11y tree Firefox */ + +snapshots["sbb-datepicker-previous-day A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Previous day", + "disabled": true + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker-previous-day A11y tree Safari */ + diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts index bc26fd0932e..df85bfd50d8 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts @@ -1,6 +1,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import type { SbbFormFieldElement } from '../../form-field'; import type { SbbDatepickerPreviousDayElement } from './datepicker-previous-day'; @@ -34,16 +35,8 @@ describe('sbb-datepicker-previous-day', () => { const element: SbbDatepickerPreviousDayElement = page.querySelector<SbbDatepickerPreviousDayElement>('sbb-datepicker-previous-day')!; - expect(element).dom.to.be.equal(` - <sbb-datepicker-previous-day - date-picker="datepicker" - dir="ltr" - role="button" - slot="prefix" - tabindex="0" - aria-label="Change to the previous day, currently selected December 31, 2022."> - </sbb-datepicker-previous-day> - `); + + await expect(element).dom.to.be.equalSnapshot(); expect(element).shadowDom.to.be.equal(` <span class="sbb-datepicker-previous-day"> @@ -79,4 +72,9 @@ describe('sbb-datepicker-previous-day', () => { page.querySelector<SbbDatepickerPreviousDayElement>('sbb-datepicker-previous-day')!; expect(element).to.have.attribute('data-disabled'); }); + + testA11yTreeSnapshot( + undefined, + html`<sbb-datepicker-previous-day></sbb-datepicker-previous-day>`, + ); }); diff --git a/src/components/datepicker/datepicker-toggle/__snapshots__/datepicker-toggle.spec.snap.js b/src/components/datepicker/datepicker-toggle/__snapshots__/datepicker-toggle.spec.snap.js new file mode 100644 index 00000000000..53574eaff47 --- /dev/null +++ b/src/components/datepicker/datepicker-toggle/__snapshots__/datepicker-toggle.spec.snap.js @@ -0,0 +1,159 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-datepicker-toggle renders"] = +`<sbb-tooltip-trigger + aria-controls="sbb-tooltip-1" + aria-disabled="true" + aria-expanded="false" + aria-haspopup="dialog" + aria-label="Show calendar" + data-icon-small="" + dir="ltr" + disabled="" + icon-name="calendar-small" + role="button" +> +</sbb-tooltip-trigger> +<sbb-tooltip + data-state="closed" + hide-close-button="" + id="sbb-tooltip-1" + role="tooltip" +> + <sbb-calendar> + </sbb-calendar> +</sbb-tooltip> +`; +/* end snapshot sbb-datepicker-toggle renders */ + +snapshots["sbb-datepicker-toggle renders in form-field renders in form-field"] = +`<sbb-tooltip-trigger + aria-controls="sbb-tooltip-3" + aria-expanded="false" + aria-haspopup="dialog" + aria-label="Show calendar" + data-icon-small="" + dir="ltr" + icon-name="calendar-small" + role="button" + tabindex="0" +> +</sbb-tooltip-trigger> +<sbb-tooltip + data-state="closed" + hide-close-button="" + id="sbb-tooltip-3" + role="tooltip" +> + <sbb-calendar> + </sbb-calendar> +</sbb-tooltip> +`; +/* end snapshot sbb-datepicker-toggle renders in form-field renders in form-field */ + +snapshots["sbb-datepicker-toggle renders in form-field renders in disabled form-field"] = +`<sbb-tooltip-trigger + aria-controls="sbb-tooltip-5" + aria-disabled="true" + aria-expanded="false" + aria-haspopup="dialog" + aria-label="Show calendar" + data-icon-small="" + dir="ltr" + disabled="" + icon-name="calendar-small" + role="button" +> +</sbb-tooltip-trigger> +<sbb-tooltip + data-state="closed" + hide-close-button="" + id="sbb-tooltip-5" + role="tooltip" +> + <sbb-calendar> + </sbb-calendar> +</sbb-tooltip> +`; +/* end snapshot sbb-datepicker-toggle renders in form-field renders in disabled form-field */ + +snapshots["sbb-datepicker-toggle renders in form-field renders in form-field with calendar parameters"] = +`<sbb-tooltip-trigger + aria-controls="sbb-tooltip-7" + aria-expanded="false" + aria-haspopup="dialog" + aria-label="Show calendar" + data-icon-small="" + dir="ltr" + icon-name="calendar-small" + role="button" + tabindex="0" +> +</sbb-tooltip-trigger> +<sbb-tooltip + data-state="closed" + hide-close-button="" + id="sbb-tooltip-7" + role="tooltip" +> + <sbb-calendar wide=""> + </sbb-calendar> +</sbb-tooltip> +`; +/* end snapshot sbb-datepicker-toggle renders in form-field renders in form-field with calendar parameters */ + +snapshots["sbb-datepicker-toggle A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Show calendar", + "disabled": true, + "haspopup": "dialog" + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker-toggle A11y tree Chrome */ + +snapshots["sbb-datepicker-toggle A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "Show calendar", + "disabled": true, + "haspopup": "dialog" + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker-toggle A11y tree Firefox */ + +snapshots["sbb-datepicker-toggle A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Show calendar", + "disabled": true, + "haspopup": "dialog" + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker-toggle A11y tree Safari */ + diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts index 049c82c0705..21f92a6058e 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts @@ -1,6 +1,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import type { SbbFormFieldElement } from '../../form-field'; import type { SbbDatepickerToggleElement } from './datepicker-toggle'; @@ -13,29 +14,7 @@ describe('sbb-datepicker-toggle', () => { const page = await fixture(html`<sbb-datepicker-toggle></sbb-datepicker-toggle>`); expect(page).dom.to.equal(`<sbb-datepicker-toggle slot="prefix"></sbb-datepicker-toggle>`); - expect(page).shadowDom.to.equal(` - <sbb-tooltip-trigger - aria-label="Show calendar" - aria-controls="sbb-tooltip-1" - aria-expanded="false" - aria-haspopup="dialog" - dir="ltr" - aria-disabled="true" - icon-name="calendar-small" - role="button" - disabled="" - data-icon-small="" - ></sbb-tooltip-trigger> - <sbb-tooltip - hide-close-button="" - data-state="closed" - hide-close-button="" - id="sbb-tooltip-1" - role="tooltip" - > - <sbb-calendar></sbb-calendar> - </sbb-tooltip> - `); + await expect(page).shadowDom.to.equalSnapshot(); }); describe('renders in form-field', () => { @@ -52,29 +31,7 @@ describe('sbb-datepicker-toggle', () => { expect(element).dom.to.be.equal( `<sbb-datepicker-toggle slot="prefix"></sbb-datepicker-toggle>`, ); - expect(element).shadowDom.to.be.equal( - ` - <sbb-tooltip-trigger - tabindex="0" - aria-label="Show calendar" - dir="ltr" - aria-haspopup="dialog" - aria-expanded="false" - icon-name="calendar-small" - data-icon-small="" - role="button" - aria-controls="sbb-tooltip-4" - ></sbb-tooltip-trigger> - <sbb-tooltip - hide-close-button="" - data-state="closed" - id="sbb-tooltip-4" - role="tooltip" - > - <sbb-calendar></sbb-calendar> - </sbb-tooltip> - `, - ); + await expect(element).shadowDom.to.be.equalSnapshot(); }); it('renders in disabled form-field', async () => { @@ -90,30 +47,7 @@ describe('sbb-datepicker-toggle', () => { expect(element).dom.to.be.equal( `<sbb-datepicker-toggle slot="prefix"></sbb-datepicker-toggle>`, ); - expect(element).shadowDom.to.be.equal( - ` - <sbb-tooltip-trigger - aria-label="Show calendar" - aria-controls="sbb-tooltip-7" - aria-disabled="true" - aria-expanded="false" - aria-haspopup="dialog" - disabled="" - dir="ltr" - icon-name="calendar-small" - role="button" - data-icon-small="" - ></sbb-tooltip-trigger> - <sbb-tooltip - data-state="closed" - id="sbb-tooltip-7" - hide-close-button="" - role="tooltip" - > - <sbb-calendar></sbb-calendar> - </sbb-tooltip> - `, - ); + await expect(element).shadowDom.to.be.equalSnapshot(); }); it('renders in form-field with calendar parameters', async () => { @@ -129,29 +63,9 @@ describe('sbb-datepicker-toggle', () => { expect(element).dom.to.be.equal( `<sbb-datepicker-toggle slot="prefix"></sbb-datepicker-toggle>`, ); - expect(element).shadowDom.to.be.equal( - ` - <sbb-tooltip-trigger - tabindex="0" - aria-label="Show calendar" - dir="ltr" - aria-haspopup="dialog" - aria-expanded="false" - icon-name="calendar-small" - data-icon-small="" - role="button" - aria-controls="sbb-tooltip-10" - ></sbb-tooltip-trigger> - <sbb-tooltip - hide-close-button="" - data-state="closed" - id="sbb-tooltip-10" - role="tooltip" - > - <sbb-calendar wide=""></sbb-calendar> - </sbb-tooltip> - `, - ); + await expect(element).shadowDom.to.be.equalSnapshot(); }); }); + + testA11yTreeSnapshot(undefined, html`<sbb-datepicker-toggle></sbb-datepicker-toggle>`); }); diff --git a/src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js b/src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js index dc7008007f6..59f27a48da4 100644 --- a/src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js +++ b/src/components/datepicker/datepicker/__snapshots__/datepicker.spec.snap.js @@ -10,3 +10,96 @@ snapshots["sbb-datepicker renders"] = `; /* end snapshot sbb-datepicker renders */ +snapshots["sbb-datepicker A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "textbox", + "name": "DD.MM.YYYY" + }, + { + "role": "button", + "name": "Previous day", + "disabled": true + }, + { + "role": "button", + "name": "Next day", + "disabled": true + }, + { + "role": "button", + "name": "Show calendar", + "haspopup": "dialog" + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker A11y tree Chrome */ + +snapshots["sbb-datepicker A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "textbox", + "name": "DD.MM.YYYY" + }, + { + "role": "button", + "name": "Previous day", + "disabled": true + }, + { + "role": "button", + "name": "Next day", + "disabled": true + }, + { + "role": "button", + "name": "Show calendar", + "haspopup": "dialog" + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker A11y tree Firefox */ + +snapshots["sbb-datepicker A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "textbox", + "name": "DD.MM.YYYY" + }, + { + "role": "button", + "name": "Previous day", + "disabled": true + }, + { + "role": "button", + "name": "Next day", + "disabled": true + }, + { + "role": "button", + "name": "Show calendar", + "haspopup": "dialog" + } + ] +} +</p> +`; +/* end snapshot sbb-datepicker A11y tree Safari */ + diff --git a/src/components/datepicker/datepicker/datepicker.spec.ts b/src/components/datepicker/datepicker/datepicker.spec.ts index 4ee4819897e..21eecccf31b 100644 --- a/src/components/datepicker/datepicker/datepicker.spec.ts +++ b/src/components/datepicker/datepicker/datepicker.spec.ts @@ -3,6 +3,7 @@ import { html } from 'lit/static-html.js'; import { NativeDateAdapter } from '../../core/datetime'; import { findInput } from '../../core/dom'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import type { SbbFormFieldElement } from '../../form-field'; import type { SbbDatepickerNextDayElement, SbbDatepickerPreviousDayElement } from '../index'; @@ -14,6 +15,9 @@ import { findNextAvailableDate, isDateAvailable, } from './datepicker'; +import '../datepicker-next-day'; +import '../datepicker-previous-day'; +import '../datepicker-toggle'; describe('sbb-datepicker', () => { it('renders', async () => { @@ -22,6 +26,19 @@ describe('sbb-datepicker', () => { expect(root).dom.to.be.equal(`<sbb-datepicker></sbb-datepicker>`); await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot( + undefined, + html` + <sbb-form-field> + <input /> + <sbb-datepicker></sbb-datepicker> + <sbb-datepicker-previous-day></sbb-datepicker-previous-day> + <sbb-datepicker-next-day></sbb-datepicker-next-day> + <sbb-datepicker-toggle></sbb-datepicker-toggle> + </sbb-form-field> + `, + ); }); describe('getDatePicker', () => { diff --git a/src/components/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/__snapshots__/dialog.spec.snap.js index 47a26582569..4106207d37a 100644 --- a/src/components/dialog/__snapshots__/dialog.spec.snap.js +++ b/src/components/dialog/__snapshots__/dialog.spec.snap.js @@ -53,3 +53,33 @@ snapshots["sbb-dialog renders"] = `; /* end snapshot sbb-dialog renders */ +snapshots["sbb-dialog A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-dialog A11y tree Chrome */ + +snapshots["sbb-dialog A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-dialog A11y tree Firefox */ + +snapshots["sbb-dialog A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-dialog A11y tree Safari */ + diff --git a/src/components/dialog/dialog.spec.ts b/src/components/dialog/dialog.spec.ts index 065cecf7f4b..896b3c6d1c1 100644 --- a/src/components/dialog/dialog.spec.ts +++ b/src/components/dialog/dialog.spec.ts @@ -1,6 +1,8 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + import '.'; describe('sbb-dialog', () => { @@ -11,4 +13,6 @@ describe('sbb-dialog', () => { await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html`<sbb-dialog></sbb-dialog>`); }); diff --git a/src/components/divider/__snapshots__/divider.spec.snap.js b/src/components/divider/__snapshots__/divider.spec.snap.js new file mode 100644 index 00000000000..d494526a59c --- /dev/null +++ b/src/components/divider/__snapshots__/divider.spec.snap.js @@ -0,0 +1,33 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-divider A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-divider A11y tree Chrome */ + +snapshots["sbb-divider A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-divider A11y tree Firefox */ + +snapshots["sbb-divider A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-divider A11y tree Safari */ + diff --git a/src/components/divider/divider.spec.ts b/src/components/divider/divider.spec.ts index b7f10442653..ee40538ee7f 100644 --- a/src/components/divider/divider.spec.ts +++ b/src/components/divider/divider.spec.ts @@ -1,8 +1,10 @@ -import './divider'; - import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + +import './divider'; + describe('sbb-divider', () => { it('should render with default values', async () => { const element: Element = await fixture(html`<sbb-divider></sbb-divider>`); @@ -31,4 +33,6 @@ describe('sbb-divider', () => { ); expect(element).shadowDom.to.be.equal(`<div class='sbb-divider'></div>`); }); + + testA11yTreeSnapshot(undefined, html`<sbb-divider></sbb-divider>`); }); diff --git a/src/components/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.spec.snap.js b/src/components/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.spec.snap.js new file mode 100644 index 00000000000..49881a885ee --- /dev/null +++ b/src/components/expansion-panel/expansion-panel-content/__snapshots__/expansion-panel-content.spec.snap.js @@ -0,0 +1,67 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-expansion-panel-content renders"] = +`<div class="sbb-expansion-panel-content"> + <slot> + </slot> +</div> +`; +/* end snapshot sbb-expansion-panel-content renders */ + +snapshots["sbb-expansion-panel-content renders expanded"] = +`<div class="sbb-expansion-panel-content"> + <slot> + </slot> +</div> +`; +/* end snapshot sbb-expansion-panel-content renders expanded */ + +snapshots["sbb-expansion-panel-content A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Content" + } + ] +} +</p> +`; +/* end snapshot sbb-expansion-panel-content A11y tree Chrome */ + +snapshots["sbb-expansion-panel-content A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Content" + } + ] +} +</p> +`; +/* end snapshot sbb-expansion-panel-content A11y tree Firefox */ + +snapshots["sbb-expansion-panel-content A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Content" + } + ] +} +</p> +`; +/* end snapshot sbb-expansion-panel-content A11y tree Safari */ + diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts index ab40a795634..085c9791e84 100644 --- a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts +++ b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.spec.ts @@ -1,5 +1,8 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + import './expansion-panel-content'; describe('sbb-expansion-panel-content', () => { @@ -15,13 +18,7 @@ describe('sbb-expansion-panel-content', () => { </sbb-expansion-panel-content> `, ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-expansion-panel-content"> - <slot></slot> - </div> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders expanded', async () => { @@ -36,12 +33,11 @@ describe('sbb-expansion-panel-content', () => { </sbb-expansion-panel-content> `, ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-expansion-panel-content"> - <slot></slot> - </div> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot( + undefined, + html`<sbb-expansion-panel-content>Content</sbb-expansion-panel-content>`, + ); }); diff --git a/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js b/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js index 9bec3a80bdd..3faa70d2203 100644 --- a/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js +++ b/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js @@ -80,3 +80,51 @@ snapshots["sbb-expansion-panel-header renders with slotted icon"] = `; /* end snapshot sbb-expansion-panel-header renders with slotted icon */ +snapshots["sbb-expansion-panel-header A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Header" + } + ] +} +</p> +`; +/* end snapshot sbb-expansion-panel-header A11y tree Chrome */ + +snapshots["sbb-expansion-panel-header A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "Header" + } + ] +} +</p> +`; +/* end snapshot sbb-expansion-panel-header A11y tree Firefox */ + +snapshots["sbb-expansion-panel-header A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Header" + } + ] +} +</p> +`; +/* end snapshot sbb-expansion-panel-header A11y tree Safari */ + diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts index 057cf524b8a..85568beb0b4 100644 --- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts +++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import './expansion-panel-header'; @@ -74,4 +75,9 @@ describe('sbb-expansion-panel-header', () => { ); await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot( + undefined, + html`<sbb-expansion-panel-header>Header</sbb-expansion-panel-header>`, + ); }); diff --git a/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js b/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js new file mode 100644 index 00000000000..0a075040704 --- /dev/null +++ b/src/components/expansion-panel/expansion-panel/__snapshots__/expansion-panel.spec.snap.js @@ -0,0 +1,137 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-expansion-panel renders Dom"] = +`<sbb-expansion-panel> + <sbb-expansion-panel-header + aria-controls="sbb-expansion-panel-content-1" + aria-expanded="false" + data-slot-names="unnamed" + dir="ltr" + id="sbb-expansion-panel-header-1" + role="button" + slot="header" + tabindex="0" + > + Header + </sbb-expansion-panel-header> + <sbb-expansion-panel-content + aria-hidden="true" + aria-labelledby="sbb-expansion-panel-header-1" + id="sbb-expansion-panel-content-1" + role="region" + slot="content" + > + Content + </sbb-expansion-panel-content> +</sbb-expansion-panel> +`; +/* end snapshot sbb-expansion-panel renders Dom */ + +snapshots["sbb-expansion-panel renders ShadowDom"] = +`<div class="sbb-expansion-panel"> + <div class="sbb-expansion-panel__header"> + <slot name="header"> + </slot> + </div> + <div class="sbb-expansion-panel__content-wrapper"> + <span class="sbb-expansion-panel__content"> + <slot name="content"> + </slot> + </span> + </div> +</div> +`; +/* end snapshot sbb-expansion-panel renders ShadowDom */ + +snapshots["sbb-expansion-panel renders A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Header" + } + ] +} +</p> +`; +/* end snapshot sbb-expansion-panel renders A11y tree Chrome */ + +snapshots["sbb-expansion-panel renders with level set Dom"] = +`<sbb-expansion-panel title-level="4"> + <sbb-expansion-panel-header + aria-controls="sbb-expansion-panel-content-4" + aria-expanded="false" + data-slot-names="unnamed" + dir="ltr" + id="sbb-expansion-panel-header-4" + role="button" + slot="header" + tabindex="0" + > + Header + </sbb-expansion-panel-header> + <sbb-expansion-panel-content + aria-hidden="true" + aria-labelledby="sbb-expansion-panel-header-4" + id="sbb-expansion-panel-content-4" + role="region" + slot="content" + > + Content + </sbb-expansion-panel-content> +</sbb-expansion-panel> +`; +/* end snapshot sbb-expansion-panel renders with level set Dom */ + +snapshots["sbb-expansion-panel renders with level set ShadowDom"] = +`<div class="sbb-expansion-panel"> + <h4 class="sbb-expansion-panel__header"> + <slot name="header"> + </slot> + </h4> + <div class="sbb-expansion-panel__content-wrapper"> + <span class="sbb-expansion-panel__content"> + <slot name="content"> + </slot> + </span> + </div> +</div> +`; +/* end snapshot sbb-expansion-panel renders with level set ShadowDom */ + +snapshots["sbb-expansion-panel renders A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "Header" + } + ] +} +</p> +`; +/* end snapshot sbb-expansion-panel renders A11y tree Firefox */ + +snapshots["sbb-expansion-panel renders A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Header" + } + ] +} +</p> +`; +/* end snapshot sbb-expansion-panel renders A11y tree Safari */ + diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts index 26259936414..6b0a611d70b 100644 --- a/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts +++ b/src/components/expansion-panel/expansion-panel/expansion-panel.spec.ts @@ -1,69 +1,55 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbExpansionPanelElement } from './expansion-panel'; import './expansion-panel'; +import '../expansion-panel-header'; +import '../expansion-panel-content'; describe('sbb-expansion-panel', () => { - it('renders', async () => { - const root = await fixture(html` - <sbb-expansion-panel> - <sbb-expansion-panel-header>Header</sbb-expansion-panel-header> - <sbb-expansion-panel-content>Content</sbb-expansion-panel-content> - </sbb-expansion-panel> - `); + describe('renders', () => { + let element: SbbExpansionPanelElement; - expect(root).dom.to.be.equal( - ` + beforeEach(async () => { + element = await fixture(html` <sbb-expansion-panel> <sbb-expansion-panel-header>Header</sbb-expansion-panel-header> <sbb-expansion-panel-content>Content</sbb-expansion-panel-content> </sbb-expansion-panel> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-expansion-panel"> - <div class="sbb-expansion-panel__header"> - <slot name="header"></slot> - </div> - <div class="sbb-expansion-panel__content-wrapper"> - <span class="sbb-expansion-panel__content"> - <slot name="content"></slot> - </span> - </div> - </div> - `, - ); + `); + }); + + it('Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); - it('renders with level set', async () => { - const root = await fixture(html` - <sbb-expansion-panel title-level="4"> - <sbb-expansion-panel-header>Header</sbb-expansion-panel-header> - <sbb-expansion-panel-content>Content</sbb-expansion-panel-content> - </sbb-expansion-panel> - `); + describe('renders with level set', () => { + let element: SbbExpansionPanelElement; - expect(root).dom.to.be.equal( - ` + beforeEach(async () => { + element = await fixture(html` <sbb-expansion-panel title-level="4"> <sbb-expansion-panel-header>Header</sbb-expansion-panel-header> <sbb-expansion-panel-content>Content</sbb-expansion-panel-content> </sbb-expansion-panel> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-expansion-panel"> - <h4 class="sbb-expansion-panel__header"> - <slot name="header"></slot> - </h4> - <div class="sbb-expansion-panel__content-wrapper"> - <span class="sbb-expansion-panel__content"> - <slot name="content"></slot> - </span> - </div> - </div> - `, - ); + `); + }); + + it('Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); }); diff --git a/src/components/file-selector/__snapshots__/file-selector.spec.snap.js b/src/components/file-selector/__snapshots__/file-selector.spec.snap.js index 352c4c6b84c..ace155dead5 100644 --- a/src/components/file-selector/__snapshots__/file-selector.spec.snap.js +++ b/src/components/file-selector/__snapshots__/file-selector.spec.snap.js @@ -84,3 +84,75 @@ snapshots["sbb-file-selector renders with dropzone area"] = `; /* end snapshot sbb-file-selector renders with dropzone area */ +snapshots["sbb-file-selector A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Choose a file" + }, + { + "role": "button", + "name": "Choose a file", + "value": "No file chosen" + } + ] +} +</p> +`; +/* end snapshot sbb-file-selector A11y tree Chrome */ + +snapshots["sbb-file-selector A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Choose a file" + }, + { + "role": "group", + "name": "", + "children": [ + { + "role": "button", + "name": "Browse…" + }, + { + "role": "text leaf", + "name": "…" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-file-selector A11y tree Firefox */ + +snapshots["sbb-file-selector A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Choose a file" + }, + { + "role": "button", + "name": "Choose File", + "roledescription": "file upload button" + } + ] +} +</p> +`; +/* end snapshot sbb-file-selector A11y tree Safari */ + diff --git a/src/components/file-selector/file-selector.spec.ts b/src/components/file-selector/file-selector.spec.ts index 2b6634ff7bc..cfb89375a5b 100644 --- a/src/components/file-selector/file-selector.spec.ts +++ b/src/components/file-selector/file-selector.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import './file-selector'; @@ -27,4 +28,6 @@ describe('sbb-file-selector', () => { `); await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html`<sbb-file-selector></sbb-file-selector>`); }); diff --git a/src/components/footer/__snapshots__/footer.spec.snap.js b/src/components/footer/__snapshots__/footer.spec.snap.js new file mode 100644 index 00000000000..44a5fec6d49 --- /dev/null +++ b/src/components/footer/__snapshots__/footer.spec.snap.js @@ -0,0 +1,67 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-footer renders"] = +`<footer class="sbb-footer"> + <div class="sbb-footer-wrapper"> + <h1 class="sbb-footer__title"> + Footer + </h1> + <slot> + </slot> + </div> +</footer> +`; +/* end snapshot sbb-footer renders */ + +snapshots["sbb-footer A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Footer", + "level": 1 + } + ] +} +</p> +`; +/* end snapshot sbb-footer A11y tree Chrome */ + +snapshots["sbb-footer A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "heading", + "name": "Footer", + "level": 1 + } + ] +} +</p> +`; +/* end snapshot sbb-footer A11y tree Firefox */ + +snapshots["sbb-footer A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Footer", + "level": 1 + } + ] +} +</p> +`; +/* end snapshot sbb-footer A11y tree Safari */ + diff --git a/src/components/footer/footer.spec.ts b/src/components/footer/footer.spec.ts index ae3bb7b853d..f5c1cd47863 100644 --- a/src/components/footer/footer.spec.ts +++ b/src/components/footer/footer.spec.ts @@ -1,6 +1,8 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + import type { SbbFooterElement } from './footer'; import './footer'; @@ -16,15 +18,8 @@ describe('sbb-footer', () => { <sbb-footer accessibility-title="Footer" variant="default"></sbb-footer> `, ); - expect(element).shadowDom.to.be.equal( - ` - <footer class="sbb-footer"> - <div class="sbb-footer-wrapper"> - <h1 class="sbb-footer__title">Footer</h1> - <slot></slot> - </div> - </footer> - `, - ); + await expect(element).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html`<sbb-footer accessibility-title="Footer"></sbb-footer>`); }); diff --git a/src/components/form-error/__snapshots__/form-error.spec.snap.js b/src/components/form-error/__snapshots__/form-error.spec.snap.js new file mode 100644 index 00000000000..e4126a44bf3 --- /dev/null +++ b/src/components/form-error/__snapshots__/form-error.spec.snap.js @@ -0,0 +1,63 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-form-error renders"] = +`<span class="form-error__icon"> + <slot name="icon"> + </slot> +</span> +<span class="form-error-content"> + <slot> + </slot> +</span> +`; +/* end snapshot sbb-form-error renders */ + +snapshots["sbb-form-error A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Required" + } + ] +} +</p> +`; +/* end snapshot sbb-form-error A11y tree Chrome */ + +snapshots["sbb-form-error A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Required" + } + ] +} +</p> +`; +/* end snapshot sbb-form-error A11y tree Firefox */ + +snapshots["sbb-form-error A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Required" + } + ] +} +</p> +`; +/* end snapshot sbb-form-error A11y tree Safari */ + diff --git a/src/components/form-error/form-error.spec.ts b/src/components/form-error/form-error.spec.ts index e6229a8af2e..12d74386905 100644 --- a/src/components/form-error/form-error.spec.ts +++ b/src/components/form-error/form-error.spec.ts @@ -1,5 +1,8 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + import './form-error'; describe('sbb-form-error', () => { @@ -11,27 +14,8 @@ describe('sbb-form-error', () => { Required </sbb-form-error> `); - expect(root).shadowDom.to.be.equal(` - <span class="form-error__icon"> - <slot name='icon'> - <svg - class="form-error__icon-svg" - aria-hidden="true" - width="14" - height="14" - viewBox="0 0 14 14" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <line x1="7" y1="3" x2="7" y2="8.5" /> - <line x1="7" y1="10" x2="7" y2="11" /> - <circle cx="7" cy="7" r="6.5" /> - </svg> - </slot> - </span> - <span class="form-error-content"> - <slot></slot> - </span> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html`<sbb-form-error>Required</sbb-form-error>`); }); diff --git a/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js b/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js new file mode 100644 index 00000000000..96e3de1e544 --- /dev/null +++ b/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js @@ -0,0 +1,173 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-form-field-clear renders Formfield Dom"] = +`<sbb-form-field + data-input-type="input" + data-slot-names="label suffix unnamed" + error-space="none" + label="Label" + size="m" + width="default" +> + <label + data-creator="SBB-FORM-FIELD" + for="sbb-form-field-input-0" + slot="label" + > + Label + </label> + <input + id="sbb-form-field-input-0" + placeholder="Input placeholder" + type="text" + value="Input value" + > + <sbb-form-field-clear + aria-label="Clear input value" + dir="ltr" + role="button" + slot="suffix" + tabindex="0" + > + </sbb-form-field-clear> +</sbb-form-field> +`; +/* end snapshot sbb-form-field-clear renders Formfield Dom */ + +snapshots["sbb-form-field-clear renders Formfield ShadowDom"] = +`<div class="sbb-form-field__space-wrapper"> + <div + class="sbb-form-field__wrapper" + id="overlay-anchor" + > + <slot name="prefix"> + </slot> + <div class="sbb-form-field__input-container"> + <span + aria-hidden="true" + class="sbb-form-field__label-spacer" + > + </span> + <span class="sbb-form-field__label"> + <span class="sbb-form-field__label-ellipsis"> + <slot name="label"> + </slot> + </span> + </span> + <div class="sbb-form-field__input"> + <slot> + </slot> + </div> + </div> + <slot name="suffix"> + </slot> + </div> + <div class="sbb-form-field__error"> + <slot name="error"> + </slot> + </div> +</div> +`; +/* end snapshot sbb-form-field-clear renders Formfield ShadowDom */ + +snapshots["sbb-form-field-clear renders FormfieldClear ShadowDom"] = +`<span class="sbb-form-field-clear"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="cross-small" + role="img" + > + </sbb-icon> +</span> +`; +/* end snapshot sbb-form-field-clear renders FormfieldClear ShadowDom */ + +snapshots["sbb-form-field-clear renders A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "" + }, + { + "role": "text", + "name": "Label" + }, + { + "role": "textbox", + "name": "Label", + "value": "Input value" + }, + { + "role": "button", + "name": "Clear input value" + } + ] +} +</p> +`; +/* end snapshot sbb-form-field-clear renders A11y tree Chrome */ + +snapshots["sbb-form-field-clear renders A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "statictext", + "name": "" + }, + { + "role": "text leaf", + "name": "Label" + }, + { + "role": "textbox", + "name": "Label", + "value": "Input value" + }, + { + "role": "button", + "name": "Clear input value" + } + ] +} +</p> +`; +/* end snapshot sbb-form-field-clear renders A11y tree Firefox */ + +snapshots["sbb-form-field-clear renders A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "" + }, + { + "role": "text", + "name": "Label" + }, + { + "role": "textbox", + "name": "Label", + "value": "Input value" + }, + { + "role": "button", + "name": "Clear input value" + } + ] +} +</p> +`; +/* end snapshot sbb-form-field-clear renders A11y tree Safari */ + diff --git a/src/components/form-field/form-field-clear/form-field-clear.spec.ts b/src/components/form-field/form-field-clear/form-field-clear.spec.ts index 70784ce1c50..cdd15f940df 100644 --- a/src/components/form-field/form-field-clear/form-field-clear.spec.ts +++ b/src/components/form-field/form-field-clear/form-field-clear.spec.ts @@ -2,60 +2,41 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; +import type { SbbFormFieldElement } from '../form-field'; +import type { SbbFormFieldClearElement } from './form-field-clear'; import './form-field-clear'; import '../form-field'; describe('sbb-form-field-clear', () => { - it('renders', async () => { - const formField = await fixture(html` - <sbb-form-field label="Label"> - <input type="text" placeholder="Input placeholder" value="Input value" /> - <sbb-form-field-clear></sbb-form-field-clear> - </sbb-form-field> - `); - await waitForLitRender(formField); - - const formFieldClear = formField.querySelector('sbb-form-field-clear'); - - expect(formField).dom.to.be.equal(` - <sbb-form-field error-space="none" label="Label" size="m" width="default" data-input-type="input" data-slot-names="label suffix unnamed"> - <label data-creator="SBB-FORM-FIELD" slot="label" for="sbb-form-field-input-0"> - Label - </label> - <input placeholder="Input placeholder" type="text" value="Input value" id="sbb-form-field-input-0"> - <sbb-form-field-clear aria-label="Clear input value" dir="ltr" role="button" slot="suffix" tabindex="0"> - </sbb-form-field-clear> - </sbb-form-field> - `); - - expect(formField).shadowDom.to.be.equal(` - <div class="sbb-form-field__space-wrapper"> - <div class="sbb-form-field__wrapper" id="overlay-anchor"> - <slot name="prefix"></slot> - <div class="sbb-form-field__input-container"> - <span aria-hidden="true" class="sbb-form-field__label-spacer"></span> - <span class="sbb-form-field__label"> - <span class="sbb-form-field__label-ellipsis"> - <slot name="label"></slot> - </span> - </span> - <div class="sbb-form-field__input"> - <slot></slot> - </div> - </div> - <slot name="suffix"></slot> - </div> - <div class="sbb-form-field__error"> - <slot name="error"></slot> - </div> - </div> - `); - - expect(formFieldClear).shadowDom.to.be.equal(` - <span class="sbb-form-field-clear"> - <sbb-icon name="cross-small" aria-hidden="true" data-namespace="default" role="img"></sbb-icon> - </span> - `); + describe('renders', () => { + let root: SbbFormFieldElement; + let element: SbbFormFieldClearElement; + + beforeEach(async () => { + root = await fixture(html` + <sbb-form-field label="Label"> + <input type="text" placeholder="Input placeholder" value="Input value" /> + <sbb-form-field-clear></sbb-form-field-clear> + </sbb-form-field> + `); + element = root.querySelector('sbb-form-field-clear')!; + await waitForLitRender(root); + }); + + it('Formfield Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + + it('Formfield ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); + + it('FormfieldClear ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); }); diff --git a/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js b/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js index b44ad795745..22ef9376a9c 100644 --- a/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js +++ b/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js @@ -236,3 +236,75 @@ snapshots["sbb-form-field renders select with optional flag and borderless"] = `; /* end snapshot sbb-form-field renders select with optional flag and borderless */ +snapshots["sbb-form-field A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "" + }, + { + "role": "text", + "name": "Fill input" + }, + { + "role": "textbox", + "name": "Fill input" + } + ] +} +</p> +`; +/* end snapshot sbb-form-field A11y tree Chrome */ + +snapshots["sbb-form-field A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "statictext", + "name": "" + }, + { + "role": "text leaf", + "name": "Fill input" + }, + { + "role": "textbox", + "name": "Fill input" + } + ] +} +</p> +`; +/* end snapshot sbb-form-field A11y tree Firefox */ + +snapshots["sbb-form-field A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "" + }, + { + "role": "text", + "name": "Fill input" + }, + { + "role": "textbox", + "name": "Fill input" + } + ] +} +</p> +`; +/* end snapshot sbb-form-field A11y tree Safari */ + diff --git a/src/components/form-field/form-field/form-field.spec.ts b/src/components/form-field/form-field/form-field.spec.ts index 032f159b320..1bca75495f9 100644 --- a/src/components/form-field/form-field/form-field.spec.ts +++ b/src/components/form-field/form-field/form-field.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import './form-field'; @@ -158,4 +159,14 @@ describe('sbb-form-field', () => { `); await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot( + undefined, + html` + <sbb-form-field> + <label slot="label">Fill input</label> + <input class="input" placeholder="This is an input" /> + </sbb-form-field> + `, + ); }); diff --git a/src/components/header/header/__snapshots__/header.spec.snap.js b/src/components/header/header/__snapshots__/header.spec.snap.js new file mode 100644 index 00000000000..e0bb08b19b1 --- /dev/null +++ b/src/components/header/header/__snapshots__/header.spec.snap.js @@ -0,0 +1,85 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-header renders"] = +`<header class="sbb-header"> + <div class="sbb-header__wrapper"> + <slot> + </slot> + <div class="sbb-header__logo"> + <slot name="logo"> + <sbb-logo protective-room="none"> + </sbb-logo> + </slot> + </div> + </div> +</header> +`; +/* end snapshot sbb-header renders */ + +snapshots["sbb-header renders actions and logo Dom"] = +`<sbb-header> + <sbb-header-action + href="https://github.com/lyne-design-system/lyne-components" + icon-name="hamburger-menu-small" + text="Menu" + > + </sbb-header-action> + <div slot="logo"> + <circle + cx="25" + cy="75" + r="20" + > + </circle> + </div> +</sbb-header> +`; +/* end snapshot sbb-header renders actions and logo Dom */ + +snapshots["sbb-header renders actions and logo ShadowDom"] = +`<header class="sbb-header"> + <div class="sbb-header__wrapper"> + <slot> + </slot> + <div class="sbb-header__logo"> + <slot name="logo"> + <sbb-logo protective-room="none"> + </sbb-logo> + </slot> + </div> + </div> +</header> +`; +/* end snapshot sbb-header renders actions and logo ShadowDom */ + +snapshots["sbb-header renders actions and logo A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-header renders actions and logo A11y tree Chrome */ + +snapshots["sbb-header renders actions and logo A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-header renders actions and logo A11y tree Firefox */ + +snapshots["sbb-header renders actions and logo A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-header renders actions and logo A11y tree Safari */ + diff --git a/src/components/header/header/header.spec.ts b/src/components/header/header/header.spec.ts index 45cbcc83165..0e132c56d0c 100644 --- a/src/components/header/header/header.spec.ts +++ b/src/components/header/header/header.spec.ts @@ -1,69 +1,47 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbHeaderElement } from './header'; import './header'; describe('sbb-header', () => { it('renders', async () => { const root = await fixture(html`<sbb-header></sbb-header>`); - expect(root).dom.to.be.equal( - ` - <sbb-header></sbb-header> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <header class="sbb-header"> - <div class="sbb-header__wrapper"> - <slot></slot> - <div class="sbb-header__logo"> - <slot name="logo"> - <sbb-logo protective-room="none"></sbb-logo> - </slot> - </div> - </div> - </header> - `, - ); + expect(root).dom.to.be.equal(`<sbb-header></sbb-header>`); + await expect(root).shadowDom.to.be.equalSnapshot(); }); - it('renders actions and logo', async () => { - const root = await fixture(html` - <sbb-header> - <sbb-header-action - icon-name="hamburger-menu-small" - href="https://github.com/lyne-design-system/lyne-components" - text="Menu" - ></sbb-header-action> - <div slot="logo"> - <circle cx="25" cy="75" r="20"></circle> - </div> - </sbb-header> - `); + describe('renders actions and logo', () => { + let element: SbbHeaderElement; + + beforeEach(async () => { + element = await fixture(html` + <sbb-header> + <sbb-header-action + icon-name="hamburger-menu-small" + href="https://github.com/lyne-design-system/lyne-components" + text="Menu" + ></sbb-header-action> + <div slot="logo"> + <circle cx="25" cy="75" r="20"></circle> + </div> + </sbb-header> + `); + await waitForLitRender(element); + }); + + it('Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); - expect(root).dom.to.be.equal( - ` - <sbb-header> - <sbb-header-action icon-name="hamburger-menu-small" href="https://github.com/lyne-design-system/lyne-components" text="Menu"></sbb-header-action> - <div slot="logo"> - <circle cx="25" cy="75" r="20"></circle> - </div> - </sbb-header> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <header class="sbb-header"> - <div class="sbb-header__wrapper"> - <slot></slot> - <div class="sbb-header__logo"> - <slot name="logo"> - <sbb-logo protective-room="none"></sbb-logo> - </slot> - </div> - </div> - </header> - `, - ); + testA11yTreeSnapshot(); }); }); diff --git a/src/components/icon/__snapshots__/icon.spec.snap.js b/src/components/icon/__snapshots__/icon.spec.snap.js index 9f337a98d23..ea3fa061013 100644 --- a/src/components/icon/__snapshots__/icon.spec.snap.js +++ b/src/components/icon/__snapshots__/icon.spec.snap.js @@ -52,3 +52,33 @@ snapshots["sbb-icon registers a custom namespace"] = `; /* end snapshot sbb-icon registers a custom namespace */ +snapshots["sbb-icon A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-icon A11y tree Chrome */ + +snapshots["sbb-icon A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-icon A11y tree Firefox */ + +snapshots["sbb-icon A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-icon A11y tree Safari */ + diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts index 4dbade117e6..757274ef59c 100644 --- a/src/components/icon/icon.spec.ts +++ b/src/components/icon/icon.spec.ts @@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js'; import type { SbbIconConfig } from '../core/config'; import { readConfig } from '../core/config'; import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import type { SbbIconElement } from './icon'; @@ -120,4 +121,6 @@ describe('sbb-icon', () => { // Reset icon config delete (globalThis as any).sbbConfig.icon; // FIXME any type }); + + testA11yTreeSnapshot(undefined, html`<sbb-icon name="app-icon-medium"></sbb-icon>`); }); diff --git a/src/components/journey-header/__snapshots__/journey-header.spec.snap.js b/src/components/journey-header/__snapshots__/journey-header.spec.snap.js new file mode 100644 index 00000000000..c7f96304ed7 --- /dev/null +++ b/src/components/journey-header/__snapshots__/journey-header.spec.snap.js @@ -0,0 +1,155 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-journey-header renders"] = +`<sbb-title + aria-level="3" + level="3" + role="heading" + visual-level="5" +> + <span + class="sbb-journey-header" + dir="ltr" + > + <span class="sbb-journey-header__origin"> + <span class="sbb-journey-header__connection--visually-hidden"> + Connection from + </span> + A + </span> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="arrow-long-right-small" + role="img" + > + </sbb-icon> + <span class="sbb-journey-header__destination"> + <span class="sbb-journey-header__connection--visually-hidden"> + to + </span> + B + </span> + </span> +</sbb-title> +`; +/* end snapshot sbb-journey-header renders */ + +snapshots["sbb-journey-header renders H1 L-sized round-trip negative"] = +`<sbb-title + aria-level="1" + level="1" + negative="" + role="heading" + visual-level="4" +> + <span + class="sbb-journey-header" + dir="ltr" + > + <span class="sbb-journey-header__origin"> + <span class="sbb-journey-header__connection--visually-hidden"> + Connection from + </span> + B + </span> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="arrows-long-right-left-small" + role="img" + > + </sbb-icon> + <span class="sbb-journey-header__destination"> + <span class="sbb-journey-header__connection--visually-hidden"> + to + </span> + C + <span class="sbb-journey-header__connection--visually-hidden"> + and back to B. + </span> + </span> + </span> +</sbb-title> +`; +/* end snapshot sbb-journey-header renders H1 L-sized round-trip negative */ + +snapshots["sbb-journey-header A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Connection from B to C and back to B.", + "level": 1 + } + ] +} +</p> +`; +/* end snapshot sbb-journey-header A11y tree Chrome */ + +snapshots["sbb-journey-header A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "heading", + "name": "Connection from B to C and back to B.", + "level": 1 + } + ] +} +</p> +`; +/* end snapshot sbb-journey-header A11y tree Firefox */ + +snapshots["sbb-journey-header A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Connection from" + }, + { + "role": "text", + "name": " " + }, + { + "role": "text", + "name": "B" + }, + { + "role": "text", + "name": " " + }, + { + "role": "text", + "name": "to" + }, + { + "role": "text", + "name": " " + }, + { + "role": "text", + "name": "C" + }, + { + "role": "text", + "name": "and back to B." + } + ] +} +</p> +`; +/* end snapshot sbb-journey-header A11y tree Safari */ + diff --git a/src/components/journey-header/journey-header.spec.ts b/src/components/journey-header/journey-header.spec.ts index e8bf6511cb9..ee95808be3d 100644 --- a/src/components/journey-header/journey-header.spec.ts +++ b/src/components/journey-header/journey-header.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import './journey-header'; @@ -17,25 +18,7 @@ describe('sbb-journey-header', () => { <sbb-journey-header origin="A" destination="B" size="m"> </sbb-journey-header> `); - expect(root).shadowDom.to.be.equal(` - <sbb-title role="heading" level="3" visual-level="5" aria-level="3"> - <span class="sbb-journey-header" dir="ltr"> - <span class="sbb-journey-header__origin"> - <span class="sbb-journey-header__connection--visually-hidden"> - Connection from - </span> - A - </span> - <sbb-icon name="arrow-long-right-small" aria-hidden="true" data-namespace="default" role="img"></sbb-icon> - <span class="sbb-journey-header__destination"> - <span class="sbb-journey-header__connection--visually-hidden"> - to - </span> - B - </span> - </span> - </sbb-title> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders H1 L-sized round-trip negative', async () => { @@ -56,27 +39,18 @@ describe('sbb-journey-header', () => { <sbb-journey-header level="1" size="l" round-trip="" origin="B" destination="C" negative> </sbb-journey-header> `); - expect(root).shadowDom.to.be.equal(` - <sbb-title level="1" aria-level="1" visual-level="4" role="heading" negative> - <span class="sbb-journey-header" dir="ltr"> - <span class="sbb-journey-header__origin"> - <span class="sbb-journey-header__connection--visually-hidden"> - Connection from - </span> - B - </span> - <sbb-icon name="arrows-long-right-left-small" aria-hidden="true" data-namespace="default" role="img"></sbb-icon> - <span class="sbb-journey-header__destination"> - <span class="sbb-journey-header__connection--visually-hidden"> - to - </span> - C - <span class="sbb-journey-header__connection--visually-hidden"> - and back to B. - </span> - </span> - </span> - </sbb-title> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot( + undefined, + html`<sbb-journey-header + level="1" + size="l" + round-trip + origin="B" + destination="C" + negative + ></sbb-journey-header>`, + ); }); diff --git a/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js b/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js new file mode 100644 index 00000000000..53e39e9fe6c --- /dev/null +++ b/src/components/journey-summary/__snapshots__/journey-summary.spec.snap.js @@ -0,0 +1,128 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-journey-summary renders"] = +`<div class="sbb-journey-summary"> + <div> + <div class="sbb-journey-summary__via-block"> + <span class="sbb-journey-summary__via-text"> + Via + </span> + <ul + class="sbb-journey-summary__vias" + role="presentation" + > + <li class="sbb-journey-summary__via"> + via + </li> + </ul> + </div> + <div class="sbb-journey-summary__date"> + <time datetime="29 8"> + Mo. 29.08.2022 + </time> + , + <time> + <span class="sbb-screenreaderonly"> + Travel time 1 Hour + </span> + <span aria-hidden="true"> + 1 h + </span> + </time> + </div> + <sbb-pearl-chain-time data-now="1661806800000"> + </sbb-pearl-chain-time> + </div> +</div> +`; +/* end snapshot sbb-journey-summary renders */ + +snapshots["sbb-journey-summary renders without vias"] = +`<div class="sbb-journey-summary"> + <div> + <div class="sbb-journey-summary__date"> + <time datetime="29 8"> + Mo. 29.08.2022 + </time> + , + <time> + <span class="sbb-screenreaderonly"> + Travel time 1 Hour 40 Minutes + </span> + <span aria-hidden="true"> + 1 h 40 min + </span> + </time> + </div> + <sbb-pearl-chain-time data-now="1661806800000"> + </sbb-pearl-chain-time> + </div> +</div> +`; +/* end snapshot sbb-journey-summary renders without vias */ + +snapshots["sbb-journey-summary renders with second journey"] = +`<div class="sbb-journey-summary"> + <div> + <div class="sbb-journey-summary__date"> + <time datetime="29 8"> + Mo. 29.08.2022 + </time> + , + <time> + <span class="sbb-screenreaderonly"> + Travel time 1 Hour 40 Minutes + </span> + <span aria-hidden="true"> + 1 h 40 min + </span> + </time> + </div> + <sbb-pearl-chain-time data-now="1661806800000"> + </sbb-pearl-chain-time> + </div> + <div> + <sbb-divider + aria-orientation="horizontal" + class="sbb-journey-summary__divider" + orientation="horizontal" + role="separator" + > + </sbb-divider> + <div> + <div class="sbb-journey-summary__via-block"> + <span class="sbb-journey-summary__via-text"> + Via + </span> + <ul + class="sbb-journey-summary__vias" + role="presentation" + > + <li class="sbb-journey-summary__via"> + via + </li> + </ul> + </div> + <div class="sbb-journey-summary__date"> + <time datetime="29 8"> + Mo. 29.08.2022 + </time> + , + <time> + <span class="sbb-screenreaderonly"> + Travel time 1 Hour + </span> + <span aria-hidden="true"> + 1 h + </span> + </time> + </div> + <sbb-pearl-chain-time data-now="1661806800000"> + </sbb-pearl-chain-time> + </div> + </div> +</div> +`; +/* end snapshot sbb-journey-summary renders with second journey */ + diff --git a/src/components/journey-summary/journey-summary.spec.ts b/src/components/journey-summary/journey-summary.spec.ts index b7fdf73d864..f90a8171c0e 100644 --- a/src/components/journey-summary/journey-summary.spec.ts +++ b/src/components/journey-summary/journey-summary.spec.ts @@ -48,37 +48,7 @@ describe('sbb-journey-summary', () => { expect(root).dom.to.be.equal(` <sbb-journey-summary data-now="1661806800000"> </sbb-journey-summary>`); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-journey-summary"> - <div> - <div class="sbb-journey-summary__via-block"> - <span class="sbb-journey-summary__via-text"> - Via - </span> - <ul class="sbb-journey-summary__vias" role="presentation"> - <li class="sbb-journey-summary__via"> - via - </li> - </ul> - </div> - <div class="sbb-journey-summary__date"> - <time datetime="29 8"> - Mo. 29.08.2022 - </time> - , - <time> - <span class="sbb-screenreaderonly"> - Travel time 1 Hour - </span> - <span aria-hidden="true"> - 1 h - </span> - </time> - </div> - <sbb-pearl-chain-time data-now="1661806800000"></sbb-pearl-chain-time> - </div> - </div> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders without vias', async () => { @@ -92,27 +62,7 @@ describe('sbb-journey-summary', () => { expect(root).dom.to.be.equal(` <sbb-journey-summary data-now="1661806800000"> </sbb-journey-summary>`); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-journey-summary"> - <div> - <div class="sbb-journey-summary__date"> - <time datetime="29 8"> - Mo. 29.08.2022 - </time> - , - <time> - <span class="sbb-screenreaderonly"> - Travel time 1 Hour 40 Minutes - </span> - <span aria-hidden="true"> - 1 h 40 min - </span> - </time> - </div> - <sbb-pearl-chain-time data-now="1661806800000"></sbb-pearl-chain-time> - </div> - </div> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders with second journey', async () => { @@ -128,56 +78,6 @@ describe('sbb-journey-summary', () => { expect(root).dom.to.be.equal(` <sbb-journey-summary data-now="1661806800000"> </sbb-journey-summary>`); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-journey-summary"> - <div> - <div class="sbb-journey-summary__date"> - <time datetime="29 8"> - Mo. 29.08.2022 - </time> - , - <time> - <span class="sbb-screenreaderonly"> - Travel time 1 Hour 40 Minutes - </span> - <span aria-hidden="true"> - 1 h 40 min - </span> - </time> - </div> - <sbb-pearl-chain-time data-now="1661806800000"></sbb-pearl-chain-time> - </div> - <div> - <sbb-divider class="sbb-journey-summary__divider" role="separator" orientation="horizontal" aria-orientation="horizontal"></sbb-divider> - <div> - <div class="sbb-journey-summary__via-block"> - <span class="sbb-journey-summary__via-text"> - Via - </span> - <ul class="sbb-journey-summary__vias" role="presentation"> - <li class="sbb-journey-summary__via"> - via - </li> - </ul> - </div> - <div class="sbb-journey-summary__date"> - <time datetime="29 8"> - Mo. 29.08.2022 - </time> - , - <time> - <span class="sbb-screenreaderonly"> - Travel time 1 Hour - </span> - <span aria-hidden="true"> - 1 h - </span> - </time> - </div> - <sbb-pearl-chain-time data-now="1661806800000"></sbb-pearl-chain-time> - </div> - </div> - </div> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); }); diff --git a/src/components/link-list/__snapshots__/link-list.spec.snap.js b/src/components/link-list/__snapshots__/link-list.spec.snap.js index d53482db5d8..d214b69ed22 100644 --- a/src/components/link-list/__snapshots__/link-list.spec.snap.js +++ b/src/components/link-list/__snapshots__/link-list.spec.snap.js @@ -394,3 +394,33 @@ snapshots["sbb-link-list rendered without a title in shadow DOM"] = `; /* end snapshot sbb-link-list rendered without a title in shadow DOM */ +snapshots["sbb-link-list rendered with a slotted title A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-link-list rendered with a slotted title A11y tree Chrome */ + +snapshots["sbb-link-list rendered with a slotted title A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-link-list rendered with a slotted title A11y tree Firefox */ + +snapshots["sbb-link-list rendered with a slotted title A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-link-list rendered with a slotted title A11y tree Safari */ + diff --git a/src/components/link-list/link-list.spec.ts b/src/components/link-list/link-list.spec.ts index 38dc3146f9d..5a6a03c58c3 100644 --- a/src/components/link-list/link-list.spec.ts +++ b/src/components/link-list/link-list.spec.ts @@ -1,6 +1,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import type { SbbLinkElement } from '../link'; import type { SbbLinkListElement } from './link-list'; @@ -51,6 +52,8 @@ describe('sbb-link-list', () => { it('in shadow DOM', async () => { await expect(element).shadowDom.to.equalSnapshot(); }); + + testA11yTreeSnapshot(); }); describe('rendered with a title from properties', () => { diff --git a/src/components/loading-indicator/__snapshots__/loading-indicator.spec.snap.js b/src/components/loading-indicator/__snapshots__/loading-indicator.spec.snap.js new file mode 100644 index 00000000000..b1a7c69a845 --- /dev/null +++ b/src/components/loading-indicator/__snapshots__/loading-indicator.spec.snap.js @@ -0,0 +1,123 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-loading-indicator renders with variant `window`"] = +`<span class="sbb-loading-indicator"> + <span class="sbb-loading-indicator__animated-element"> + <span> + <span> + <span> + </span> + <span> + </span> + <span> + </span> + <span> + </span> + <span> + </span> + </span> + </span> + </span> +</span> +`; +/* end snapshot sbb-loading-indicator renders with variant `window` */ + +snapshots["sbb-loading-indicator renders with variant `window` and color smoke"] = +`<span class="sbb-loading-indicator"> + <span class="sbb-loading-indicator__animated-element"> + <span> + <span> + <span> + </span> + <span> + </span> + <span> + </span> + <span> + </span> + <span> + </span> + </span> + </span> + </span> +</span> +`; +/* end snapshot sbb-loading-indicator renders with variant `window` and color smoke */ + +snapshots["sbb-loading-indicator renders with variant `window` and color white"] = +`<span class="sbb-loading-indicator"> + <span class="sbb-loading-indicator__animated-element"> + <span> + <span> + <span> + </span> + <span> + </span> + <span> + </span> + <span> + </span> + <span> + </span> + </span> + </span> + </span> +</span> +`; +/* end snapshot sbb-loading-indicator renders with variant `window` and color white */ + +snapshots["sbb-loading-indicator renders with variant `circle`"] = +`<span class="sbb-loading-indicator"> + <span class="sbb-loading-indicator__animated-element"> + </span> +</span> +`; +/* end snapshot sbb-loading-indicator renders with variant `circle` */ + +snapshots["sbb-loading-indicator renders with variant `circle` and color smoke"] = +`<span class="sbb-loading-indicator"> + <span class="sbb-loading-indicator__animated-element"> + </span> +</span> +`; +/* end snapshot sbb-loading-indicator renders with variant `circle` and color smoke */ + +snapshots["sbb-loading-indicator renders with variant `circle` and color white"] = +`<span class="sbb-loading-indicator"> + <span class="sbb-loading-indicator__animated-element"> + </span> +</span> +`; +/* end snapshot sbb-loading-indicator renders with variant `circle` and color white */ + +snapshots["sbb-loading-indicator A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-loading-indicator A11y tree Chrome */ + +snapshots["sbb-loading-indicator A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-loading-indicator A11y tree Firefox */ + +snapshots["sbb-loading-indicator A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-loading-indicator A11y tree Safari */ + diff --git a/src/components/loading-indicator/loading-indicator.spec.ts b/src/components/loading-indicator/loading-indicator.spec.ts index 4c2377053d4..7bb274b64f5 100644 --- a/src/components/loading-indicator/loading-indicator.spec.ts +++ b/src/components/loading-indicator/loading-indicator.spec.ts @@ -1,5 +1,8 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + import './loading-indicator'; describe('sbb-loading-indicator', () => { @@ -14,23 +17,7 @@ describe('sbb-loading-indicator', () => { </sbb-loading-indicator> `, ); - expect(root).shadowDom.to.be.equal( - ` - <span class="sbb-loading-indicator"> - <span class="sbb-loading-indicator__animated-element"> - <span> - <span> - <span></span> - <span></span> - <span></span> - <span></span> - <span></span> - </span> - </span> - </span> - </span> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders with variant `window` and color smoke', async () => { @@ -41,27 +28,10 @@ describe('sbb-loading-indicator', () => { expect(root).dom.to.be.equal( ` <sbb-loading-indicator variant="window" size="m" color="smoke" role="progressbar" aria-busy='true'> - </sbb-loading-indicator> `, ); - expect(root).shadowDom.to.be.equal( - ` - <span class="sbb-loading-indicator"> - <span class="sbb-loading-indicator__animated-element"> - <span> - <span> - <span></span> - <span></span> - <span></span> - <span></span> - <span></span> - </span> - </span> - </span> - </span> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders with variant `window` and color white', async () => { @@ -75,23 +45,7 @@ describe('sbb-loading-indicator', () => { </sbb-loading-indicator> `, ); - expect(root).shadowDom.to.be.equal( - ` - <span class="sbb-loading-indicator"> - <span class="sbb-loading-indicator__animated-element"> - <span> - <span> - <span></span> - <span></span> - <span></span> - <span></span> - <span></span> - </span> - </span> - </span> - </span> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders with variant `circle`', async () => { @@ -105,13 +59,7 @@ describe('sbb-loading-indicator', () => { </sbb-loading-indicator> `, ); - expect(root).shadowDom.to.be.equal( - ` - <span class="sbb-loading-indicator"> - <span class="sbb-loading-indicator__animated-element"></span> - </span> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders with variant `circle` and color smoke', async () => { @@ -125,13 +73,7 @@ describe('sbb-loading-indicator', () => { </sbb-loading-indicator> `, ); - expect(root).shadowDom.to.be.equal( - ` - <span class="sbb-loading-indicator"> - <span class="sbb-loading-indicator__animated-element"></span> - </span> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders with variant `circle` and color white', async () => { @@ -145,12 +87,11 @@ describe('sbb-loading-indicator', () => { </sbb-loading-indicator> `, ); - expect(root).shadowDom.to.be.equal( - ` - <span class="sbb-loading-indicator"> - <span class="sbb-loading-indicator__animated-element"></span> - </span> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot( + undefined, + html`<sbb-loading-indicator variant="window" size="m"></sbb-loading-indicator>`, + ); }); diff --git a/src/components/map-container/__snapshots__/map-container.spec.snap.js b/src/components/map-container/__snapshots__/map-container.spec.snap.js new file mode 100644 index 00000000000..a1c0d1fc8cf --- /dev/null +++ b/src/components/map-container/__snapshots__/map-container.spec.snap.js @@ -0,0 +1,77 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-map-container renders the container with button"] = +`<div class="sbb-map-container"> + <div class="sbb-map-container__sidebar"> + <span> + </span> + <slot> + </slot> + <sbb-button + class="sbb-map-container__sidebar-button" + data-slot-names="unnamed" + dir="ltr" + icon-name="location-pin-map-small" + inert="" + role="button" + size="l" + tabindex="0" + type="button" + variant="tertiary" + > + Show map + </sbb-button> + </div> + <div class="sbb-map-container__map"> + <slot name="map"> + </slot> + </div> +</div> +`; +/* end snapshot sbb-map-container renders the container with button */ + +snapshots["sbb-map-container renders the container without button"] = +`<div class="sbb-map-container"> + <div class="sbb-map-container__sidebar"> + <slot> + </slot> + </div> + <div class="sbb-map-container__map"> + <slot name="map"> + </slot> + </div> +</div> +`; +/* end snapshot sbb-map-container renders the container without button */ + +snapshots["sbb-map-container A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-map-container A11y tree Chrome */ + +snapshots["sbb-map-container A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-map-container A11y tree Firefox */ + +snapshots["sbb-map-container A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-map-container A11y tree Safari */ + diff --git a/src/components/map-container/map-container.spec.ts b/src/components/map-container/map-container.spec.ts index de6d347c0c3..c71ae7e94a0 100644 --- a/src/components/map-container/map-container.spec.ts +++ b/src/components/map-container/map-container.spec.ts @@ -1,6 +1,8 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + import type { SbbMapContainerElement } from './map-container'; import '.'; @@ -16,32 +18,9 @@ describe('sbb-map-container', () => { </sbb-map-container> `, ); - expect(element).shadowDom.to.be.equal( - ` - <div class="sbb-map-container"> - <div class="sbb-map-container__sidebar"> - <span></span> - <slot></slot> - <sbb-button - dir="ltr" - class="sbb-map-container__sidebar-button" - variant="tertiary" - inert - role="button" - size="l" - tabindex="0" - icon-name="location-pin-map-small" - type="button" - data-slot-names="unnamed" - >Show map</sbb-button> - </div> - <div class="sbb-map-container__map"> - <slot name="map"></slot> - </div> - </div> - `, - ); + await expect(element).shadowDom.to.be.equalSnapshot(); }); + it('renders the container without button', async () => { element = await fixture(html`<sbb-map-container hide-scroll-up-button></sbb-map-container>`); @@ -51,17 +30,11 @@ describe('sbb-map-container', () => { </sbb-map-container> `, ); - expect(element).shadowDom.to.be.equal( - ` - <div class="sbb-map-container"> - <div class="sbb-map-container__sidebar"> - <slot></slot> - </div> - <div class="sbb-map-container__map"> - <slot name="map"></slot> - </div> - </div> - `, - ); + await expect(element).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot( + undefined, + html`<sbb-map-container hide-scroll-up-button></sbb-map-container>`, + ); }); diff --git a/src/components/message/__snapshots__/message.spec.snap.js b/src/components/message/__snapshots__/message.spec.snap.js new file mode 100644 index 00000000000..95784b127a2 --- /dev/null +++ b/src/components/message/__snapshots__/message.spec.snap.js @@ -0,0 +1,163 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-message renders without optional slots"] = +`<div class="sbb-message__container"> + <slot name="image"> + </slot> + <sbb-title + aria-level="3" + class="sbb-message__title" + level="3" + role="heading" + visual-level="5" + > + <slot name="title"> + Title. + </slot> + </sbb-title> + <slot name="subtitle"> + </slot> + <slot name="legend"> + </slot> + <slot name="action"> + </slot> +</div> +`; +/* end snapshot sbb-message renders without optional slots */ + +snapshots["sbb-message renders Dom"] = +`<sbb-message title-content="Title."> + <sbb-image slot="image"> + </sbb-image> + <p slot="subtitle"> + Subtitle. + </p> + <p slot="legend"> + Error code: 0001 + </p> + <sbb-button + dir="ltr" + icon-name="arrows-circle-small" + role="button" + size="l" + slot="action" + tabindex="0" + variant="primary" + > + </sbb-button> +</sbb-message> +`; +/* end snapshot sbb-message renders Dom */ + +snapshots["sbb-message renders ShadowDom"] = +`<div class="sbb-message__container"> + <slot name="image"> + </slot> + <sbb-title + aria-level="3" + class="sbb-message__title" + level="3" + role="heading" + visual-level="5" + > + <slot name="title"> + Title. + </slot> + </sbb-title> + <slot name="subtitle"> + </slot> + <slot name="legend"> + </slot> + <slot name="action"> + </slot> +</div> +`; +/* end snapshot sbb-message renders ShadowDom */ + +snapshots["sbb-message renders A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Title.", + "level": 3 + }, + { + "role": "text", + "name": "Subtitle." + }, + { + "role": "text", + "name": "Error code: 0001" + }, + { + "role": "button", + "name": "" + } + ] +} +</p> +`; +/* end snapshot sbb-message renders A11y tree Chrome */ + +snapshots["sbb-message renders A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "heading", + "name": "Title.", + "level": 3 + }, + { + "role": "text leaf", + "name": "Subtitle." + }, + { + "role": "text leaf", + "name": "Error code: 0001" + }, + { + "role": "button", + "name": "" + } + ] +} +</p> +`; +/* end snapshot sbb-message renders A11y tree Firefox */ + +snapshots["sbb-message renders A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Title." + }, + { + "role": "text", + "name": "Subtitle." + }, + { + "role": "text", + "name": "Error code: 0001" + }, + { + "role": "button", + "name": "" + } + ] +} +</p> +`; +/* end snapshot sbb-message renders A11y tree Safari */ + diff --git a/src/components/message/message.spec.ts b/src/components/message/message.spec.ts index 6d31c867c96..ac4e3311dd9 100644 --- a/src/components/message/message.spec.ts +++ b/src/components/message/message.spec.ts @@ -1,48 +1,37 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import '.'; -describe('sbb-message', () => { - it('renders', async () => { - const root = await fixture( - html` <sbb-message title-content="Title."> - <sbb-image slot="image"></sbb-image> - <p slot="subtitle">Subtitle.</p> - <p slot="legend">Error code: 0001</p> - <sbb-button slot="action" icon-name="arrows-circle-small"></sbb-button> - </sbb-message>`, - ); +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; - expect(root).dom.to.be.equal( - ` - <sbb-message title-content="Title."> +import type { SbbMessageElement } from './message'; +import './message'; +import '../image'; +import '../button'; + +describe('sbb-message', () => { + describe('renders', () => { + let root: SbbMessageElement; + beforeEach(async () => { + root = await fixture( + html` <sbb-message title-content="Title."> <sbb-image slot="image"></sbb-image> - <p slot="subtitle"> - Subtitle. - </p> - <p slot="legend"> - Error code: 0001 - </p> - <sbb-button icon-name="arrows-circle-small" slot="action"></sbb-button> - </sbb-message> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-message__container"> - <slot name="image"></slot> - <sbb-title level="3" visual-level="5" class="sbb-message__title" aria-level="3" role="heading"> - <slot name="title"> - Title. - </slot> - </sbb-title> - <slot name="subtitle"></slot> - <slot name="legend"></slot> - <slot name="action"></slot> - </div> - `, - ); + <p slot="subtitle">Subtitle.</p> + <p slot="legend">Error code: 0001</p> + <sbb-button slot="action" icon-name="arrows-circle-small"></sbb-button> + </sbb-message>`, + ); + }); + + it('Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); it('renders without optional slots', async () => { @@ -55,27 +44,12 @@ describe('sbb-message', () => { expect(root).dom.to.be.equal( ` <sbb-message title-content="Title."> - <p slot="subtitle"> Subtitle. </p> </sbb-message> `, ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-message__container"> - <slot name="image"></slot> - <sbb-title level="3" visual-level="5" class="sbb-message__title" aria-level="3" role="heading"> - <slot name="title"> - Title. - </slot> - </sbb-title> - <slot name="subtitle"></slot> - <slot name="legend"></slot> - <slot name="action"></slot> - </div> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); }); diff --git a/src/components/notification/__snapshots__/notification.spec.snap.js b/src/components/notification/__snapshots__/notification.spec.snap.js index 566415d0728..ea926bb7e47 100644 --- a/src/components/notification/__snapshots__/notification.spec.snap.js +++ b/src/components/notification/__snapshots__/notification.spec.snap.js @@ -183,3 +183,33 @@ snapshots["sbb-notification renders without the close button"] = `; /* end snapshot sbb-notification renders without the close button */ +snapshots["sbb-notification A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-notification A11y tree Chrome */ + +snapshots["sbb-notification A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-notification A11y tree Firefox */ + +snapshots["sbb-notification A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-notification A11y tree Safari */ + diff --git a/src/components/notification/notification.spec.ts b/src/components/notification/notification.spec.ts index 30a8522680d..6ae157c92f3 100644 --- a/src/components/notification/notification.spec.ts +++ b/src/components/notification/notification.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import './notification'; import '../link'; @@ -16,7 +17,6 @@ describe('sbb-notification', () => { >The quick brown fox jumps over the lazy dog.</sbb-notification >`, ); - await waitForLitRender(root); expect(root).dom.to.be.equal( @@ -34,7 +34,6 @@ describe('sbb-notification', () => { >The quick brown fox jumps over the lazy dog.</sbb-notification >`, ); - await waitForLitRender(root); expect(root).dom.to.be.equal( @@ -53,7 +52,6 @@ describe('sbb-notification', () => { The quick brown fox jumps over the lazy dog. </sbb-notification>`, ); - await waitForLitRender(root); expect(root).dom.to.be.equal( @@ -74,7 +72,6 @@ describe('sbb-notification', () => { >The quick brown fox jumps over the lazy dog.</sbb-notification >`, ); - await waitForLitRender(root); expect(root).dom.to.be.equal( @@ -85,4 +82,11 @@ describe('sbb-notification', () => { ); await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot( + undefined, + html`<sbb-notification disable-animation title-content="Test title" + >Lorem ipsum ...</sbb-notification + >`, + ); }); diff --git a/src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js b/src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js new file mode 100644 index 00000000000..ba7ae1fc1d6 --- /dev/null +++ b/src/components/option/optgroup/__snapshots__/optgroup.spec.snap.js @@ -0,0 +1,272 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-optgroup autocomplete renders Chrome-Firefox Dom"] = +`<sbb-optgroup + aria-disabled="false" + aria-label="Label" + data-variant="autocomplete" + label="Label" + role="group" +> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-1" + role="option" + value="1" + > + 1 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-2" + role="option" + value="2" + > + 2 + </sbb-option> +</sbb-optgroup> +`; +/* end snapshot sbb-optgroup autocomplete renders Chrome-Firefox Dom */ + +snapshots["sbb-optgroup autocomplete renders Chrome-Firefox ShadowDom"] = +`<div class="sbb-optgroup__divider"> + <sbb-divider + aria-orientation="horizontal" + orientation="horizontal" + role="separator" + > + </sbb-divider> +</div> +<div + aria-hidden="true" + class="sbb-optgroup__label" +> + <div class="sbb-optgroup__icon-space"> + </div> + <span> + Label + </span> +</div> +<slot> +</slot> +`; +/* end snapshot sbb-optgroup autocomplete renders Chrome-Firefox ShadowDom */ + +snapshots["sbb-optgroup autocomplete renders A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-optgroup autocomplete renders A11y tree Chrome */ + +snapshots["sbb-optgroup autocomplete renders disabled Chrome-Firefox Dom"] = +`<sbb-optgroup + aria-disabled="true" + aria-label="Label" + data-variant="autocomplete" + disabled="" + label="Label" + role="group" +> + <sbb-option + aria-disabled="true" + aria-selected="false" + data-group-disabled="" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-7" + role="option" + value="1" + > + 1 + </sbb-option> + <sbb-option + aria-disabled="true" + aria-selected="false" + data-group-disabled="" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-8" + role="option" + value="2" + > + 2 + </sbb-option> +</sbb-optgroup> +`; +/* end snapshot sbb-optgroup autocomplete renders disabled Chrome-Firefox Dom */ + +snapshots["sbb-optgroup autocomplete renders disabled Chrome-Firefox ShadowDom"] = +`<div class="sbb-optgroup__divider"> + <sbb-divider + aria-orientation="horizontal" + orientation="horizontal" + role="separator" + > + </sbb-divider> +</div> +<div + aria-hidden="true" + class="sbb-optgroup__label" +> + <div class="sbb-optgroup__icon-space"> + </div> + <span> + Label + </span> +</div> +<slot> +</slot> +`; +/* end snapshot sbb-optgroup autocomplete renders disabled Chrome-Firefox ShadowDom */ + +snapshots["sbb-optgroup autocomplete renders A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-optgroup autocomplete renders A11y tree Firefox */ + +snapshots["sbb-optgroup autocomplete renders Safari Dom"] = +`<sbb-optgroup + data-variant="autocomplete" + label="Label" +> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-1" + role="option" + value="1" + > + 1 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-2" + role="option" + value="2" + > + 2 + </sbb-option> +</sbb-optgroup> +`; +/* end snapshot sbb-optgroup autocomplete renders Safari Dom */ + +snapshots["sbb-optgroup autocomplete renders Safari ShadowDom"] = +`<div class="sbb-optgroup__divider"> + <sbb-divider + aria-orientation="horizontal" + orientation="horizontal" + role="separator" + > + </sbb-divider> +</div> +<div + aria-hidden="true" + class="sbb-optgroup__label" +> + <div class="sbb-optgroup__icon-space"> + </div> + <span> + Label + </span> +</div> +<slot> +</slot> +`; +/* end snapshot sbb-optgroup autocomplete renders Safari ShadowDom */ + +snapshots["sbb-optgroup autocomplete renders A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "listbox", + "name": "", + "orientation": "vertical" + } + ] +} +</p> +`; +/* end snapshot sbb-optgroup autocomplete renders A11y tree Safari */ + +snapshots["sbb-optgroup autocomplete renders disabled Safari Dom"] = +`<sbb-optgroup + data-variant="autocomplete" + disabled="" + label="Label" +> + <sbb-option + aria-disabled="true" + aria-selected="false" + data-group-disabled="" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-7" + role="option" + value="1" + > + 1 + </sbb-option> + <sbb-option + aria-disabled="true" + aria-selected="false" + data-group-disabled="" + data-slot-names="unnamed" + data-variant="autocomplete" + id="sbb-option-8" + role="option" + value="2" + > + 2 + </sbb-option> +</sbb-optgroup> +`; +/* end snapshot sbb-optgroup autocomplete renders disabled Safari Dom */ + +snapshots["sbb-optgroup autocomplete renders disabled Safari ShadowDom"] = +`<div class="sbb-optgroup__divider"> + <sbb-divider + aria-orientation="horizontal" + orientation="horizontal" + role="separator" + > + </sbb-divider> +</div> +<div + aria-hidden="true" + class="sbb-optgroup__label" +> + <div class="sbb-optgroup__icon-space"> + </div> + <span> + Label + </span> +</div> +<slot> +</slot> +`; +/* end snapshot sbb-optgroup autocomplete renders disabled Safari ShadowDom */ + diff --git a/src/components/option/optgroup/optgroup.spec.ts b/src/components/option/optgroup/optgroup.spec.ts index 0a1d5a8eda8..7d09fdea1f4 100644 --- a/src/components/option/optgroup/optgroup.spec.ts +++ b/src/components/option/optgroup/optgroup.spec.ts @@ -1,15 +1,21 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { isSafari } from '../../core/dom'; +import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbOptGroupElement } from './optgroup'; import '../../autocomplete'; import '../option'; import './optgroup'; -import { isSafari } from '../../core/dom'; describe('sbb-optgroup', () => { - describe('autocomplete', function () { - it('renders', async () => { - const root = ( + describe('autocomplete', () => { + describe('renders', () => { + let elem: SbbOptGroupElement; + + beforeEach(async () => { await fixture(html` <sbb-autocomplete origin="anchor"> <sbb-optgroup label="Label"> @@ -18,30 +24,38 @@ describe('sbb-optgroup', () => { </sbb-optgroup> </sbb-autocomplete> <div id="anchor"></div> - `) - ).querySelector('sbb-optgroup'); - const groupRoleAttr = 'aria-disabled="false" aria-label="Label" role="group"'; + `); + elem = document.querySelector('sbb-optgroup')!; + await waitForLitRender(elem); + }); + + (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); - expect(root).dom.to.be.equal(` - <sbb-optgroup data-variant="autocomplete" label="Label" ${!isSafari() ? groupRoleAttr : ''}> - <sbb-option value="1" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-1" role="option" data-slot-names="unnamed">1</sbb-option> - <sbb-option value="2" aria-disabled="false" aria-selected="false" data-variant="autocomplete" id="sbb-option-2" role="option" data-slot-names="unnamed">2</sbb-option> - </sbb-optgroup> - `); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-optgroup__divider"> - <sbb-divider aria-orientation="horizontal" orientation="horizontal" role="separator"></sbb-divider> - </div> - <div class="sbb-optgroup__label" aria-hidden="true"> - <div class="sbb-optgroup__icon-space"></div> - <span>Label</span> - </div> - <slot></slot> - `); + (isSafari() ? describe : describe.skip)('Safari', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); + + testA11yTreeSnapshot(); }); - it('renders disabled', async () => { - const root = ( + describe('renders disabled', () => { + let elem: SbbOptGroupElement; + + beforeEach(async () => { await fixture(html` <sbb-autocomplete origin="anchor"> <sbb-optgroup label="Label" disabled> @@ -50,29 +64,30 @@ describe('sbb-optgroup', () => { </sbb-optgroup> </sbb-autocomplete> <div id="anchor"></div> - `) - ).querySelector('sbb-optgroup'); - const groupRoleAttr = 'aria-disabled="true" aria-label="Label" role="group"'; + `); + elem = document.querySelector('sbb-optgroup')!; + await waitForLitRender(elem); + }); + + (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); - expect(root).dom.to.be.equal(` - <sbb-optgroup disabled data-variant="autocomplete" label="Label" ${ - !isSafari() ? groupRoleAttr : '' - }> - <sbb-option value="1" data-group-disabled aria-disabled="true" aria-selected="false" data-variant="autocomplete" id="sbb-option-7" role="option" data-slot-names="unnamed">1</sbb-option> - <sbb-option value="2" data-group-disabled aria-disabled="true" aria-selected="false" data-variant="autocomplete" id="sbb-option-8" role="option" data-slot-names="unnamed">2</sbb-option> - </sbb-optgroup> - `); + (isSafari() ? describe : describe.skip)('Safari', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-optgroup__divider"> - <sbb-divider aria-orientation="horizontal" orientation="horizontal" role="separator"></sbb-divider> - </div> - <div class="sbb-optgroup__label" aria-hidden="true"> - <div class="sbb-optgroup__icon-space"></div> - <span>Label</span> - </div> - <slot></slot> - `); + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); }); }); }); diff --git a/src/components/option/option/__snapshots__/option.spec.snap.js b/src/components/option/option/__snapshots__/option.spec.snap.js new file mode 100644 index 00000000000..fb4798f6aa9 --- /dev/null +++ b/src/components/option/option/__snapshots__/option.spec.snap.js @@ -0,0 +1,87 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-option autocomplete renders selected and active"] = +`<div class="sbb-option__container"> + <div class="sbb-option"> + <span class="sbb-option__icon"> + <slot name="icon"> + </slot> + </span> + <span class="sbb-option__label"> + <slot> + </slot> + Option 1 + </span> + </div> +</div> +`; +/* end snapshot sbb-option autocomplete renders selected and active */ + +snapshots["sbb-option autocomplete renders disabled"] = +`<div class="sbb-option__container"> + <div class="sbb-option"> + <span class="sbb-option__icon"> + <slot name="icon"> + </slot> + </span> + <span class="sbb-option__label"> + <slot> + </slot> + Option 1 + </span> + </div> +</div> +`; +/* end snapshot sbb-option autocomplete renders disabled */ + +snapshots["sbb-option autocomplete A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Option 1" + } + ] +} +</p> +`; +/* end snapshot sbb-option autocomplete A11y tree Chrome */ + +snapshots["sbb-option autocomplete A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "option", + "name": "Option 1", + "selected": true + } + ] +} +</p> +`; +/* end snapshot sbb-option autocomplete A11y tree Firefox */ + +snapshots["sbb-option autocomplete A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "option", + "name": "Option 1", + "selected": true + } + ] +} +</p> +`; +/* end snapshot sbb-option autocomplete A11y tree Safari */ + diff --git a/src/components/option/option/option.spec.ts b/src/components/option/option/option.spec.ts index c3f819e1380..700b990db1d 100644 --- a/src/components/option/option/option.spec.ts +++ b/src/components/option/option/option.spec.ts @@ -1,12 +1,15 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + import '../../autocomplete'; import './option'; describe('sbb-option', () => { describe('autocomplete', () => { it('renders selected and active', async () => { - const root = ( + const option = ( await fixture(html` <sbb-autocomplete origin="anchor"> <sbb-option value="1" selected active>Option 1</sbb-option> @@ -15,28 +18,16 @@ describe('sbb-option', () => { `) ).querySelector('sbb-option'); - expect(root).dom.to.be.equal(` + expect(option).dom.to.be.equal(` <sbb-option selected="" active="" aria-disabled="false" aria-selected="true" data-variant="autocomplete" id="sbb-option-1" role="option" value="1" data-slot-names="unnamed"> Option 1 </sbb-option> `); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-option__container"> - <div class="sbb-option"> - <span class="sbb-option__icon"> - <slot name="icon"></slot> - </span> - <span class="sbb-option__label"> - <slot></slot> - Option 1 - </span> - </div> - </div> - `); + await expect(option).shadowDom.to.be.equalSnapshot(); }); it('renders disabled', async () => { - const root = ( + const option = ( await fixture(html` <sbb-autocomplete origin="anchor"> <sbb-option value="1" disabled>Option 1</sbb-option> @@ -45,24 +36,17 @@ describe('sbb-option', () => { `) ).querySelector('sbb-option'); - expect(root).dom.to.be.equal(` + expect(option).dom.to.be.equal(` <sbb-option disabled aria-disabled="true" aria-selected="false" data-variant="autocomplete" id="sbb-option-4" role="option" value="1" data-slot-names="unnamed"> Option 1 </sbb-option> `); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-option__container"> - <div class="sbb-option"> - <span class="sbb-option__icon"> - <slot name="icon"></slot> - </span> - <span class="sbb-option__label"> - <slot></slot> - Option 1 - </span> - </div> - </div> - `); + await expect(option).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot( + undefined, + html`<sbb-option value="1" selected active>Option 1</sbb-option>`, + ); }); }); diff --git a/src/components/radio-button/radio-button-group/__snapshots__/radio-button-group.spec.snap.js b/src/components/radio-button/radio-button-group/__snapshots__/radio-button-group.spec.snap.js new file mode 100644 index 00000000000..57e0acca907 --- /dev/null +++ b/src/components/radio-button/radio-button-group/__snapshots__/radio-button-group.spec.snap.js @@ -0,0 +1,54 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-radio-button-group renders - Dom"] = +`<sbb-radio-button-group + orientation="horizontal" + role="radiogroup" +> +</sbb-radio-button-group> +`; +/* end snapshot sbb-radio-button-group renders - Dom */ + +snapshots["sbb-radio-button-group renders - ShadowDom"] = +`<div class="sbb-radio-group"> + <slot> + </slot> +</div> +<div class="sbb-radio-group__error"> + <slot name="error"> + </slot> +</div> +`; +/* end snapshot sbb-radio-button-group renders - ShadowDom */ + +snapshots["sbb-radio-button-group A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-radio-button-group A11y tree Chrome */ + +snapshots["sbb-radio-button-group A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-radio-button-group A11y tree Firefox */ + +snapshots["sbb-radio-button-group A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-radio-button-group A11y tree Safari */ + diff --git a/src/components/radio-button/radio-button-group/radio-button-group.spec.ts b/src/components/radio-button/radio-button-group/radio-button-group.spec.ts index 8038487db25..200e6e58870 100644 --- a/src/components/radio-button/radio-button-group/radio-button-group.spec.ts +++ b/src/components/radio-button/radio-button-group/radio-button-group.spec.ts @@ -1,26 +1,25 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbRadioButtonGroupElement } from './radio-button-group'; import './radio-button-group'; describe('sbb-radio-button-group', () => { - it('renders', async () => { - const root = await fixture(html`<sbb-radio-button-group></sbb-radio-button-group>`); + let element: SbbRadioButtonGroupElement; + + beforeEach(async () => { + element = await fixture(html`<sbb-radio-button-group></sbb-radio-button-group>`); + }); - expect(root).dom.to.be.equal( - ` - <sbb-radio-button-group orientation="horizontal" role="radiogroup"> - </sbb-radio-button-group> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-radio-group"> - <slot></slot> - </div> - <div class="sbb-radio-group__error"> - <slot name="error"></slot> - </div> - `, - ); + it('renders - Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); }); + + it('renders - ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js b/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js new file mode 100644 index 00000000000..16db82dd82e --- /dev/null +++ b/src/components/radio-button/radio-button/__snapshots__/radio-button.spec.snap.js @@ -0,0 +1,83 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-radio-button renders - Dom"] = +`<sbb-radio-button + aria-checked="false" + aria-disabled="false" + aria-required="false" + role="radio" + size="m" + value="radio-value" +> +</sbb-radio-button> +`; +/* end snapshot sbb-radio-button renders - Dom */ + +snapshots["sbb-radio-button renders - ShadowDom"] = +`<label class="sbb-radio-button"> + <input + aria-hidden="true" + class="sbb-radio-button__input" + tabindex="-1" + type="radio" + value="radio-value" + > + <span class="sbb-radio-button__label-slot"> + <slot> + </slot> + </span> +</label> +`; +/* end snapshot sbb-radio-button renders - ShadowDom */ + +snapshots["sbb-radio-button A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "radio", + "name": "", + "checked": false + } + ] +} +</p> +`; +/* end snapshot sbb-radio-button A11y tree Chrome */ + +snapshots["sbb-radio-button A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "radio", + "name": "" + } + ] +} +</p> +`; +/* end snapshot sbb-radio-button A11y tree Firefox */ + +snapshots["sbb-radio-button A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "radio", + "name": "", + "checked": false + } + ] +} +</p> +`; +/* end snapshot sbb-radio-button A11y tree Safari */ + diff --git a/src/components/radio-button/radio-button/radio-button.spec.ts b/src/components/radio-button/radio-button/radio-button.spec.ts index 64fab9827c6..df3ea3d367e 100644 --- a/src/components/radio-button/radio-button/radio-button.spec.ts +++ b/src/components/radio-button/radio-button/radio-button.spec.ts @@ -1,26 +1,25 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbRadioButtonElement } from './radio-button'; import './radio-button'; describe('sbb-radio-button', () => { - it('renders', async () => { - const root = await fixture(html`<sbb-radio-button value="radio-value"></sbb-radio-button>`); + let element: SbbRadioButtonElement; + + beforeEach(async () => { + element = await fixture(html`<sbb-radio-button value="radio-value"></sbb-radio-button>`); + }); - expect(root).dom.to.be.equal( - ` - <sbb-radio-button aria-checked="false" aria-disabled="false" aria-required="false" size="m" value="radio-value" role="radio"> - </sbb-radio-button> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <label class="sbb-radio-button"> - <input aria-hidden="true" class="sbb-radio-button__input" tabindex="-1" type="radio" value="radio-value"> - <span class="sbb-radio-button__label-slot"> - <slot></slot> - </span> - </label> - `, - ); + it('renders - Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); }); + + it('renders - ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js b/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js index 6c617969308..2e126893951 100644 --- a/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js +++ b/src/components/screenreader-only/__snapshots__/screenreader-only.spec.snap.js @@ -13,3 +13,45 @@ snapshots["with Shadow DOM"] = `; /* end snapshot with Shadow DOM */ +snapshots["sbb-screenreader-only renders with Light DOM"] = +`<sbb-screenreader-only> +</sbb-screenreader-only> +`; +/* end snapshot sbb-screenreader-only renders with Light DOM */ + +snapshots["sbb-screenreader-only renders with Shadow DOM"] = +`<slot> +</slot> +`; +/* end snapshot sbb-screenreader-only renders with Shadow DOM */ + +snapshots["sbb-screenreader-only renders A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-screenreader-only renders A11y tree Chrome */ + +snapshots["sbb-screenreader-only renders A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-screenreader-only renders A11y tree Firefox */ + +snapshots["sbb-screenreader-only renders A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-screenreader-only renders A11y tree Safari */ + diff --git a/src/components/screenreader-only/screenreader-only.spec.ts b/src/components/screenreader-only/screenreader-only.spec.ts index aaa4ef72431..2550edf1653 100644 --- a/src/components/screenreader-only/screenreader-only.spec.ts +++ b/src/components/screenreader-only/screenreader-only.spec.ts @@ -1,10 +1,18 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + +import type { SbbScreenreaderOnlyElement } from './screenreader-only'; import './screenreader-only'; describe('sbb-screenreader-only', () => { describe('renders', async () => { - const root = await fixture(html`<sbb-screenreader-only></sbb-screenreader-only>`); + let root: SbbScreenreaderOnlyElement; + + beforeEach(async () => { + root = await fixture(html`<sbb-screenreader-only></sbb-screenreader-only>`); + }); it('with Light DOM', async () => { await expect(root).dom.to.be.equalSnapshot(); @@ -13,5 +21,7 @@ describe('sbb-screenreader-only', () => { it('with Shadow DOM', async () => { await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(); }); }); diff --git a/src/components/select/__snapshots__/select.spec.snap.js b/src/components/select/__snapshots__/select.spec.snap.js new file mode 100644 index 00000000000..c1b701a304e --- /dev/null +++ b/src/components/select/__snapshots__/select.spec.snap.js @@ -0,0 +1,467 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-select renders Chrome-Firefox Dom"] = +`<sbb-select + data-state="closed" + dir="ltr" +> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-1" + role="option" + value="1" + > + Option 1 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-2" + role="option" + value="2" + > + Option 2 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-3" + role="option" + value="3" + > + Option 3 + </sbb-option> +</sbb-select> +`; +/* end snapshot sbb-select renders Chrome-Firefox Dom */ + +snapshots["sbb-select renders Chrome-Firefox ShadowDom"] = +`<div + aria-hidden="true" + class="sbb-select__trigger" +> + <span class="sbb-select__trigger--placeholder"> + </span> +</div> +<div class="sbb-select__gap-fix"> +</div> +<div class="sbb-select__container"> + <div class="sbb-select__gap-fix"> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="left" + > + </div> + </div> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="right" + > + </div> + </div> + </div> + <div class="sbb-select__panel"> + <div class="sbb-select__wrapper"> + <div + class="sbb-select__options" + id="sbb-select-2" + role="listbox" + > + <slot> + </slot> + </div> + </div> + </div> +</div> +`; +/* end snapshot sbb-select renders Chrome-Firefox ShadowDom */ + +snapshots["sbb-select renders A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "combobox", + "name": "", + "haspopup": "listbox" + } + ] +} +</p> +`; +/* end snapshot sbb-select renders A11y tree Chrome */ + +snapshots["sbb-select renders multiple Chrome-Firefox Dom"] = +`<sbb-select + data-multiple="" + data-state="closed" + dir="ltr" + multiple="" +> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-multiple="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-10" + role="option" + value="1" + > + Option 1 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-multiple="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-11" + role="option" + value="2" + > + Option 2 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-multiple="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-12" + role="option" + value="3" + > + Option 3 + </sbb-option> +</sbb-select> +`; +/* end snapshot sbb-select renders multiple Chrome-Firefox Dom */ + +snapshots["sbb-select renders multiple Chrome-Firefox ShadowDom"] = +`<div + aria-hidden="true" + class="sbb-select__trigger" +> + <span class="sbb-select__trigger--placeholder"> + </span> +</div> +<div class="sbb-select__gap-fix"> +</div> +<div class="sbb-select__container"> + <div class="sbb-select__gap-fix"> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="left" + > + </div> + </div> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="right" + > + </div> + </div> + </div> + <div class="sbb-select__panel"> + <div class="sbb-select__wrapper"> + <div + aria-multiselectable="" + class="sbb-select__options" + id="sbb-select-5" + role="listbox" + > + <slot> + </slot> + </div> + </div> + </div> +</div> +`; +/* end snapshot sbb-select renders multiple Chrome-Firefox ShadowDom */ + +snapshots["sbb-select renders multiple A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "combobox", + "name": "", + "haspopup": "listbox" + } + ] +} +</p> +`; +/* end snapshot sbb-select renders multiple A11y tree Chrome */ + +snapshots["sbb-select renders A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "combobox", + "name": "", + "haspopup": "listbox" + } + ] +} +</p> +`; +/* end snapshot sbb-select renders A11y tree Firefox */ + +snapshots["sbb-select renders multiple A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "combobox", + "name": "", + "haspopup": "listbox" + } + ] +} +</p> +`; +/* end snapshot sbb-select renders multiple A11y tree Firefox */ + +snapshots["sbb-select renders Safari Dom"] = +`<sbb-select + data-state="closed" + dir="ltr" + id="sbb-select-1" + role="listbox" +> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-1" + role="option" + value="1" + > + Option 1 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-2" + role="option" + value="2" + > + Option 2 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-3" + role="option" + value="3" + > + Option 3 + </sbb-option> +</sbb-select> +`; +/* end snapshot sbb-select renders Safari Dom */ + +snapshots["sbb-select renders Safari ShadowDom"] = +`<div + aria-hidden="true" + class="sbb-select__trigger" +> + <span class="sbb-select__trigger--placeholder"> + </span> +</div> +<div class="sbb-select__gap-fix"> +</div> +<div class="sbb-select__container"> + <div class="sbb-select__gap-fix"> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="left" + > + </div> + </div> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="right" + > + </div> + </div> + </div> + <div class="sbb-select__panel"> + <div class="sbb-select__wrapper"> + <div class="sbb-select__options"> + <slot> + </slot> + </div> + </div> + </div> +</div> +`; +/* end snapshot sbb-select renders Safari ShadowDom */ + +snapshots["sbb-select renders A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "combobox", + "name": "", + "haspopup": "listbox" + } + ] +} +</p> +`; +/* end snapshot sbb-select renders A11y tree Safari */ + +snapshots["sbb-select renders multiple Safari Dom"] = +`<sbb-select + data-multiple="" + data-state="closed" + dir="ltr" + id="sbb-select-4" + multiple="" + role="listbox" +> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-multiple="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-10" + role="option" + value="1" + > + Option 1 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-multiple="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-11" + role="option" + value="2" + > + Option 2 + </sbb-option> + <sbb-option + aria-disabled="false" + aria-selected="false" + data-disable-highlight="" + data-multiple="" + data-slot-names="unnamed" + data-variant="select" + id="sbb-option-12" + role="option" + value="3" + > + Option 3 + </sbb-option> +</sbb-select> +`; +/* end snapshot sbb-select renders multiple Safari Dom */ + +snapshots["sbb-select renders multiple Safari ShadowDom"] = +`<div + aria-hidden="true" + class="sbb-select__trigger" +> + <span class="sbb-select__trigger--placeholder"> + </span> +</div> +<div class="sbb-select__gap-fix"> +</div> +<div class="sbb-select__container"> + <div class="sbb-select__gap-fix"> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="left" + > + </div> + </div> + <div class="sbb-gap-fix-wrapper"> + <div + class="sbb-gap-fix-corner" + id="right" + > + </div> + </div> + </div> + <div class="sbb-select__panel"> + <div class="sbb-select__wrapper"> + <div + aria-multiselectable="" + class="sbb-select__options" + > + <slot> + </slot> + </div> + </div> + </div> +</div> +`; +/* end snapshot sbb-select renders multiple Safari ShadowDom */ + +snapshots["sbb-select renders multiple A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "combobox", + "name": "", + "haspopup": "listbox" + } + ] +} +</p> +`; +/* end snapshot sbb-select renders multiple A11y tree Safari */ + diff --git a/src/components/select/select.spec.ts b/src/components/select/select.spec.ts index a9da8a24bff..c9896ef8950 100644 --- a/src/components/select/select.spec.ts +++ b/src/components/select/select.spec.ts @@ -1,86 +1,86 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import '../option'; -import './select'; import { isSafari } from '../core/dom'; +import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + +import type { SbbSelectElement } from './select'; +import './select'; +import '../option'; describe('sbb-select', () => { - it('renders', async () => { - const root = await fixture(html` - <sbb-select> - <sbb-option value="1">Option 1</sbb-option> - <sbb-option value="2">Option 2</sbb-option> - <sbb-option value="3">Option 3</sbb-option> - </sbb-select> - `); - const listboxAttr = 'id="sbb-select-1" role="listbox"'; - - expect(root.shadowRoot!.host).to.have.attribute('dir', 'ltr'); - expect(root.shadowRoot!.host).to.have.attribute('data-state', 'closed'); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-select__trigger" aria-hidden="true"> - <span class="sbb-select__trigger--placeholder"></span> - </div> - <div class="sbb-select__gap-fix"></div> - <div class="sbb-select__container"> - <div class="sbb-select__gap-fix"> - <div class="sbb-gap-fix-wrapper"> - <div class="sbb-gap-fix-corner" id="left"></div> - </div> - <div class="sbb-gap-fix-wrapper"> - <div class="sbb-gap-fix-corner" id="right"></div> - </div> - </div> - <div class="sbb-select__panel"> - <div class="sbb-select__wrapper"> - <div class="sbb-select__options" ${!isSafari() ? listboxAttr : ''}> - <slot></slot> - </div> - </div> - </div> - </div> - `); + describe('renders', () => { + let elem: SbbSelectElement; + + beforeEach(async () => { + elem = await fixture(html` + <sbb-select> + <sbb-option value="1">Option 1</sbb-option> + <sbb-option value="2">Option 2</sbb-option> + <sbb-option value="3">Option 3</sbb-option> + </sbb-select> + `); + await waitForLitRender(elem); + }); + + (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); + + (isSafari() ? describe : describe.skip)('Safari', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); + + testA11yTreeSnapshot(); }); - it('renders multiple', async () => { - const root = await fixture(html` - <sbb-select multiple> - <sbb-option value="1">Option 1</sbb-option> - <sbb-option value="2">Option 2</sbb-option> - <sbb-option value="3">Option 3</sbb-option> - </sbb-select> - `); - const listboxAttr = 'id="sbb-select-2" role="listbox"'; - - expect(root.shadowRoot!.host).to.have.attribute('dir', 'ltr'); - expect(root.shadowRoot!.host).to.have.attribute('data-state', 'closed'); - expect(root.shadowRoot!.host).to.have.attribute('data-multiple'); - expect(root.shadowRoot!.host).to.have.attribute('multiple'); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-select__trigger" aria-hidden="true"> - <span class="sbb-select__trigger--placeholder"></span> - </div> - <div class="sbb-select__gap-fix"></div> - <div class="sbb-select__container"> - <div class="sbb-select__gap-fix"> - <div class="sbb-gap-fix-wrapper"> - <div class="sbb-gap-fix-corner" id="left"></div> - </div> - <div class="sbb-gap-fix-wrapper"> - <div class="sbb-gap-fix-corner" id="right"></div> - </div> - </div> - <div class="sbb-select__panel"> - <div class="sbb-select__wrapper"> - <div class="sbb-select__options" aria-multiselectable="" ${ - !isSafari() ? listboxAttr : '' - }> - <slot></slot> - </div> - </div> - </div> - </div> - `); + describe('renders multiple', () => { + let elem: SbbSelectElement; + + beforeEach(async () => { + elem = await fixture(html` + <sbb-select multiple> + <sbb-option value="1">Option 1</sbb-option> + <sbb-option value="2">Option 2</sbb-option> + <sbb-option value="3">Option 3</sbb-option> + </sbb-select> + `); + await waitForLitRender(elem); + }); + + (!isSafari() ? describe : describe.skip)('Chrome-Firefox', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); + + (isSafari() ? describe : describe.skip)('Safari', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); + + testA11yTreeSnapshot(); }); }); diff --git a/src/components/selection-panel/selection-panel.spec.ts b/src/components/selection-panel/selection-panel.spec.ts index e525998ca15..21ec087eb3b 100644 --- a/src/components/selection-panel/selection-panel.spec.ts +++ b/src/components/selection-panel/selection-panel.spec.ts @@ -3,37 +3,42 @@ import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../core/testing'; import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + +import type { SbbSelectionPanelElement } from './selection-panel'; import './selection-panel'; import '../checkbox'; describe('sbb-selection-panel', () => { - // Note: for easier testing, we add the slot="badge" - // to <sbb-card-badge> which would not be needed in real. - const template = html`<sbb-selection-panel disable-animation> - <sbb-card-badge slot="badge"> - <span>%</span> - <span>from CHF</span> - <span>19.99</span> - </sbb-card-badge> - <sbb-checkbox> - Value one - <span slot="subtext">Subtext</span> - <span slot="suffix">Suffix</span> - </sbb-checkbox> - <div slot="content">Inner content</div> - </sbb-selection-panel>`; + let element: SbbSelectionPanelElement; + + beforeEach(async () => { + // Note: for easier testing, we add the slot="badge" + // to <sbb-card-badge> which would not be needed in real. + element = await fixture(html` + <sbb-selection-panel disable-animation> + <sbb-card-badge slot="badge"> + <span>%</span> + <span>from CHF</span> + <span>19.99</span> + </sbb-card-badge> + <sbb-checkbox> + Value one + <span slot="subtext">Subtext</span> + <span slot="suffix">Suffix</span> + </sbb-checkbox> + <div slot="content">Inner content</div> + </sbb-selection-panel> + `); + await waitForLitRender(element); + }); it('renders - Dom', async () => { - const root = await fixture(template); - await waitForLitRender(root); - await expect(root).dom.to.be.equalSnapshot(); + await expect(element).dom.to.be.equalSnapshot(); }); it('renders - ShadowDom', async () => { - const root = await fixture(template); - await waitForLitRender(root); - await expect(root).shadowDom.to.be.equalSnapshot(); + await expect(element).shadowDom.to.be.equalSnapshot(); }); - testA11yTreeSnapshot(undefined, template); + testA11yTreeSnapshot(); }); diff --git a/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js b/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js index fff23acc73c..3c654d017b5 100644 --- a/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js +++ b/src/components/skiplink-list/__snapshots__/skiplink-list.spec.snap.js @@ -122,3 +122,339 @@ snapshots["sbb-skiplink-list renders with title"] = `; /* end snapshot sbb-skiplink-list renders with title */ +snapshots["sbb-skiplink-list renders Dom"] = +`<sbb-skiplink-list data-slot-names="li-0 li-1 li-2"> + <sbb-link + data-slot-names="unnamed" + dir="ltr" + href="#" + negative="" + role="link" + size="m" + slot="li-0" + tabindex="0" + variant="block" + > + Link 1 + </sbb-link> + <sbb-link + data-slot-names="unnamed" + dir="ltr" + href="#" + negative="" + role="link" + size="m" + slot="li-1" + tabindex="0" + variant="block" + > + Link 2 + </sbb-link> + <sbb-link + data-slot-names="unnamed" + dir="ltr" + href="#" + negative="" + role="link" + size="m" + slot="li-2" + tabindex="0" + variant="block" + > + Link 3 + </sbb-link> +</sbb-skiplink-list> +`; +/* end snapshot sbb-skiplink-list renders Dom */ + +snapshots["sbb-skiplink-list renders ShadowDom"] = +`<div class="sbb-skiplink-list__wrapper"> + <sbb-title + aria-level="2" + class="sbb-link-list-title" + id="sbb-skiplink-list-title-id" + level="2" + negative="" + role="heading" + visual-level="5" + visually-hidden="" + > + <slot name="title"> + </slot> + </sbb-title> + <ul + aria-labelledby="sbb-skiplink-list-title-id" + class="sbb-skiplink-list" + > + <li> + <slot name="li-0"> + </slot> + </li> + <li> + <slot name="li-1"> + </slot> + </li> + <li> + <slot name="li-2"> + </slot> + </li> + </ul> + <span hidden=""> + <slot> + </slot> + </span> +</div> +`; +/* end snapshot sbb-skiplink-list renders ShadowDom */ + +snapshots["sbb-skiplink-list renders with title Dom"] = +`<sbb-skiplink-list + data-slot-names="li-0 li-1 li-2" + title-content="Skip to" + title-level="3" +> + <sbb-link + data-slot-names="unnamed" + dir="ltr" + href="https://www.sbb.ch" + negative="" + role="link" + size="m" + slot="li-0" + tabindex="0" + variant="block" + > + Link 1 + </sbb-link> + <sbb-link + data-slot-names="unnamed" + dir="ltr" + href="https://www.sbb.ch" + negative="" + role="link" + size="m" + slot="li-1" + tabindex="0" + variant="block" + > + Link 2 + </sbb-link> + <sbb-link + data-slot-names="unnamed" + dir="ltr" + href="https://www.sbb.ch" + negative="" + role="link" + size="m" + slot="li-2" + tabindex="0" + variant="block" + > + Link 3 + </sbb-link> +</sbb-skiplink-list> +`; +/* end snapshot sbb-skiplink-list renders with title Dom */ + +snapshots["sbb-skiplink-list renders with title ShadowDom"] = +`<div class="sbb-skiplink-list__wrapper"> + <sbb-title + aria-level="3" + class="sbb-link-list-title" + id="sbb-skiplink-list-title-id" + level="3" + negative="" + role="heading" + visual-level="5" + visually-hidden="" + > + <slot name="title"> + Skip to + </slot> + </sbb-title> + <ul + aria-labelledby="sbb-skiplink-list-title-id" + class="sbb-skiplink-list" + > + <li> + <slot name="li-0"> + </slot> + </li> + <li> + <slot name="li-1"> + </slot> + </li> + <li> + <slot name="li-2"> + </slot> + </li> + </ul> + <span hidden=""> + <slot> + </slot> + </span> +</div> +`; +/* end snapshot sbb-skiplink-list renders with title ShadowDom */ + +snapshots["sbb-skiplink-list renders with title A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Skip to", + "level": 3 + }, + { + "role": "link", + "name": "Link 1", + "children": [ + { + "role": "link", + "name": "Link 1" + } + ] + }, + { + "role": "link", + "name": "Link 2", + "children": [ + { + "role": "link", + "name": "Link 2" + } + ] + }, + { + "role": "link", + "name": "Link 3", + "children": [ + { + "role": "link", + "name": "Link 3" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-skiplink-list renders with title A11y tree Chrome */ + +snapshots["sbb-skiplink-list renders with title A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "heading", + "name": "Skip to", + "level": 3 + }, + { + "role": "link", + "name": "Link 1", + "children": [ + { + "role": "link", + "name": "Link 1", + "value": "https://www.sbb.ch/" + } + ] + }, + { + "role": "link", + "name": "Link 2", + "children": [ + { + "role": "link", + "name": "Link 2", + "value": "https://www.sbb.ch/" + } + ] + }, + { + "role": "link", + "name": "Link 3", + "children": [ + { + "role": "link", + "name": "Link 3", + "value": "https://www.sbb.ch/" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-skiplink-list renders with title A11y tree Firefox */ + +snapshots["sbb-skiplink-list renders with title A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Skip to" + }, + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "Link 1", + "children": [ + { + "role": "text", + "name": "Link 1" + } + ] + } + ] + }, + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "Link 2", + "children": [ + { + "role": "text", + "name": "Link 2" + } + ] + } + ] + }, + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "Link 3", + "children": [ + { + "role": "text", + "name": "Link 3" + } + ] + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-skiplink-list renders with title A11y tree Safari */ + diff --git a/src/components/skiplink-list/skiplink-list.spec.ts b/src/components/skiplink-list/skiplink-list.spec.ts index 8a813bcb06e..28be72fe397 100644 --- a/src/components/skiplink-list/skiplink-list.spec.ts +++ b/src/components/skiplink-list/skiplink-list.spec.ts @@ -1,50 +1,60 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + +import type { SbbSkiplinkListElement } from './skiplink-list'; import './skiplink-list'; import '../link'; describe('sbb-skiplink-list', () => { - it('renders', async () => { - const root = await fixture(html` - <sbb-skiplink-list> - <sbb-link href="#">Link 1</sbb-link> - <sbb-link href="#">Link 2</sbb-link> - <sbb-link href="#">Link 3</sbb-link> - </sbb-skiplink-list> - `); - - expect(root).dom.to.be.equal( - ` - <sbb-skiplink-list data-slot-names="li-0 li-1 li-2"> - <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-0" tabindex="0" variant="block" data-slot-names="unnamed">Link 1</sbb-link> - <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-1" tabindex="0" variant="block" data-slot-names="unnamed">Link 2</sbb-link> - <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-2" tabindex="0" variant="block" data-slot-names="unnamed">Link 3</sbb-link> - </sbb-skiplink-list> - `, - ); - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders', () => { + let element: SbbSkiplinkListElement; + + beforeEach(async () => { + element = await fixture(html` + <sbb-skiplink-list> + <sbb-link href="#">Link 1</sbb-link> + <sbb-link href="#">Link 2</sbb-link> + <sbb-link href="#">Link 3</sbb-link> + </sbb-skiplink-list> + `); + await waitForLitRender(element); + }); + + it('Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); - it('renders with title', async () => { - const root = await fixture(html` - <sbb-skiplink-list title-content="Skip to" title-level="3"> - <sbb-link href="#">Link 1</sbb-link> - <sbb-link href="#">Link 2</sbb-link> - <sbb-link href="#">Link 3</sbb-link> - </sbb-skiplink-list> - `); - - expect(root).dom.to.be.equal( - ` - <sbb-skiplink-list title-content="Skip to" title-level="3" data-slot-names="li-0 li-1 li-2"> - <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-0" tabindex="0" variant="block" data-slot-names="unnamed">Link 1</sbb-link> - <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-1" tabindex="0" variant="block" data-slot-names="unnamed">Link 2</sbb-link> - <sbb-link dir="ltr" href='#' negative="" role="link" size="m" slot="li-2" tabindex="0" variant="block" data-slot-names="unnamed">Link 3</sbb-link> - </sbb-skiplink-list> - `, - ); - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders with title', () => { + let element: SbbSkiplinkListElement; + + beforeEach(async () => { + element = await fixture(html` + <sbb-skiplink-list title-content="Skip to" title-level="3"> + <sbb-link href="https://www.sbb.ch">Link 1</sbb-link> + <sbb-link href="https://www.sbb.ch">Link 2</sbb-link> + <sbb-link href="https://www.sbb.ch">Link 3</sbb-link> + </sbb-skiplink-list> + `); + await waitForLitRender(element); + }); + + it('Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); it('should render named slots if data-ssr-child-count attribute is set', async () => { diff --git a/src/components/slider/__snapshots__/slider.spec.snap.js b/src/components/slider/__snapshots__/slider.spec.snap.js new file mode 100644 index 00000000000..142974a7dc1 --- /dev/null +++ b/src/components/slider/__snapshots__/slider.spec.snap.js @@ -0,0 +1,138 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-slider renders"] = +`<div class="sbb-slider__height-container"> + <div class="sbb-slider__wrapper"> + <slot name="prefix"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="walk-slow-small" + role="img" + > + </sbb-icon> + </slot> + <div + class="sbb-slider__container" + style="--sbb-slider-value-fraction:0.2;" + > + <input + class="sbb-slider__range-input" + max="500" + min="0" + tabindex="-1" + type="range" + value="100" + valueasnumber="100" + > + <div class="sbb-slider__line"> + <div class="sbb-slider__selected-line"> + </div> + </div> + <div class="sbb-slider__knob"> + </div> + </div> + <slot name="suffix"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="walk-fast-small" + role="img" + > + </sbb-icon> + </slot> + </div> +</div> +`; +/* end snapshot sbb-slider renders */ + +snapshots["sbb-slider renders with no icons and default min/max"] = +`<div class="sbb-slider__height-container"> + <div class="sbb-slider__wrapper"> + <slot name="prefix"> + </slot> + <div + class="sbb-slider__container" + style="--sbb-slider-value-fraction:0.01;" + > + <input + class="sbb-slider__range-input" + max="100" + min="0" + tabindex="-1" + type="range" + value="1" + valueasnumber="1" + > + <div class="sbb-slider__line"> + <div class="sbb-slider__selected-line"> + </div> + </div> + <div class="sbb-slider__knob"> + </div> + </div> + <slot name="suffix"> + </slot> + </div> +</div> +`; +/* end snapshot sbb-slider renders with no icons and default min/max */ + +snapshots["sbb-slider A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "slider", + "name": "", + "valuetext": "", + "valuemin": 0, + "valuemax": 100, + "orientation": "horizontal", + "value": 1 + } + ] +} +</p> +`; +/* end snapshot sbb-slider A11y tree Chrome */ + +snapshots["sbb-slider A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "slider", + "name": "", + "valuetext": "1", + "value": "1" + } + ] +} +</p> +`; +/* end snapshot sbb-slider A11y tree Firefox */ + +snapshots["sbb-slider A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "slider", + "name": "", + "valuemax": 100, + "orientation": "horizontal" + } + ] +} +</p> +`; +/* end snapshot sbb-slider A11y tree Safari */ + diff --git a/src/components/slider/slider.spec.ts b/src/components/slider/slider.spec.ts index 0ccc9eee2cd..9bac9702a9a 100644 --- a/src/components/slider/slider.spec.ts +++ b/src/components/slider/slider.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import './slider'; @@ -15,7 +16,6 @@ describe('sbb-slider', () => { value="100" ></sbb-slider>`, ); - await waitForLitRender(root); expect(root).dom.to.be.equal(` @@ -35,25 +35,7 @@ describe('sbb-slider', () => { </sbb-slider> `); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-slider__height-container"> - <div class="sbb-slider__wrapper"> - <slot name="prefix"> - <sbb-icon aria-hidden="true" data-namespace="default" name="walk-slow-small" role="img"> - </slot> - <div class="sbb-slider__container" style="--sbb-slider-value-fraction:0.2;"> - <input class="sbb-slider__range-input" max="500" min="0" tabindex="-1" value="100" valueasnumber="100" type="range"> - <div class="sbb-slider__line"> - <div class="sbb-slider__selected-line"></div> - </div> - <div class="sbb-slider__knob"></div> - </div> - <slot name="suffix"> - <sbb-icon aria-hidden="true" data-namespace="default" name="walk-fast-small" role="img"> - </slot> - </div> - </div> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders with no icons and default min/max', async () => { @@ -63,20 +45,8 @@ describe('sbb-slider', () => { <sbb-slider aria-disabled="false" aria-readonly="false" aria-valuemax="100" aria-valuemin="0" aria-valuenow="1" role="slider" tabindex="0" value='1' name=''></sbb-slider> `); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-slider__height-container"> - <div class="sbb-slider__wrapper"> - <slot name="prefix"></slot> - <div class="sbb-slider__container" style="--sbb-slider-value-fraction:0.01;"> - <input class="sbb-slider__range-input" max="100" min="0" tabindex="-1" value="1" valueasnumber="1" type="range"> - <div class="sbb-slider__line"> - <div class="sbb-slider__selected-line"></div> - </div> - <div class="sbb-slider__knob"></div> - </div> - <slot name="suffix"></slot> - </div> - </div> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html`<sbb-slider value="1"></sbb-slider>`); }); diff --git a/src/components/status/__snapshots__/status.spec.snap.js b/src/components/status/__snapshots__/status.spec.snap.js index cbcde8cde8e..63601a24938 100644 --- a/src/components/status/__snapshots__/status.spec.snap.js +++ b/src/components/status/__snapshots__/status.spec.snap.js @@ -62,3 +62,65 @@ snapshots["sbb-status renders with the status title"] = `; /* end snapshot sbb-status renders with the status title */ +snapshots["sbb-status A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Title", + "level": 3 + }, + { + "role": "text", + "name": "Status info text" + } + ] +} +</p> +`; +/* end snapshot sbb-status A11y tree Chrome */ + +snapshots["sbb-status A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "heading", + "name": "Title", + "level": 3 + }, + { + "role": "text leaf", + "name": "Status info text " + } + ] +} +</p> +`; +/* end snapshot sbb-status A11y tree Firefox */ + +snapshots["sbb-status A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Title" + }, + { + "role": "text", + "name": "Status info text" + } + ] +} +</p> +`; +/* end snapshot sbb-status A11y tree Safari */ + diff --git a/src/components/status/status.spec.ts b/src/components/status/status.spec.ts index ad6a91894b3..7ad902ecad5 100644 --- a/src/components/status/status.spec.ts +++ b/src/components/status/status.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import './status'; import '../icon'; @@ -33,4 +34,9 @@ describe('sbb-status', () => { `); await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot( + undefined, + html` <sbb-status type="info" title-content="Title"> Status info text </sbb-status>`, + ); }); diff --git a/src/components/tabs/tab-group/__snapshots__/tab-group.spec.snap.js b/src/components/tabs/tab-group/__snapshots__/tab-group.spec.snap.js new file mode 100644 index 00000000000..37b4ea0a09e --- /dev/null +++ b/src/components/tabs/tab-group/__snapshots__/tab-group.spec.snap.js @@ -0,0 +1,135 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-tab-group renders"] = +`<div + class="tab-group" + role="tablist" +> + <slot name="tab-bar"> + </slot> +</div> +<div class="tab-content"> + <slot> + </slot> +</div> +`; +/* end snapshot sbb-tab-group renders */ + +snapshots["sbb-tab-group A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "tab", + "name": "Test tab label 1", + "selected": true + }, + { + "role": "tab", + "name": "Test tab label 2" + }, + { + "role": "tab", + "name": "Test tab label 3" + }, + { + "role": "tab", + "name": "Test tab label 4" + }, + { + "role": "tabpanel", + "name": "", + "children": [ + { + "role": "text", + "name": "Test tab content 1" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-tab-group A11y tree Chrome */ + +snapshots["sbb-tab-group A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "tab", + "name": "Test tab label 1", + "selected": true + }, + { + "role": "tab", + "name": "Test tab label 2" + }, + { + "role": "tab", + "name": "Test tab label 3" + }, + { + "role": "tab", + "name": "Test tab label 4" + }, + { + "role": "tabpanel", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Test tab content 1" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-tab-group A11y tree Firefox */ + +snapshots["sbb-tab-group A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "tab", + "name": "Test tab label 1", + "selected": true + }, + { + "role": "tab", + "name": "Test tab label 2" + }, + { + "role": "tab", + "name": "Test tab label 3" + }, + { + "role": "tab", + "name": "Test tab label 4" + }, + { + "role": "tabpanel", + "name": "", + "children": [ + { + "role": "text", + "name": "Test tab content 1" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-tab-group A11y tree Safari */ + diff --git a/src/components/tabs/tab-group/tab-group.spec.ts b/src/components/tabs/tab-group/tab-group.spec.ts index d494c2d4722..cfd2c2dfeb0 100644 --- a/src/components/tabs/tab-group/tab-group.spec.ts +++ b/src/components/tabs/tab-group/tab-group.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import type { SbbTabGroupElement } from './tab-group'; import '.'; @@ -28,17 +29,7 @@ describe('sbb-tab-group', () => { const root = await fixture(html`<sbb-tab-group></sbb-tab-group>`); expect(root).dom.to.be.equal(`<sbb-tab-group></sbb-tab-group>`); - expect(root).shadowDom.to.be.equal( - ` - <div class="tab-group" role="tablist"> - <slot name="tab-bar"></slot> - </div> - - <div class="tab-content"> - <slot></slot> - </div> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('activates tab by index', async () => { @@ -81,4 +72,6 @@ describe('sbb-tab-group', () => { expect(tab).to.have.attribute('active'); }); }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/tabs/tab-title/__snapshots__/tab-title.spec.snap.js b/src/components/tabs/tab-title/__snapshots__/tab-title.spec.snap.js index 9266a5b0058..00464e7525f 100644 --- a/src/components/tabs/tab-title/__snapshots__/tab-title.spec.snap.js +++ b/src/components/tabs/tab-title/__snapshots__/tab-title.spec.snap.js @@ -69,3 +69,53 @@ snapshots["sbb-tab-title renders an H1 heading tag if the provided level is grea `; /* end snapshot sbb-tab-title renders an H1 heading tag if the provided level is greater than 6 */ +snapshots["sbb-tab-title A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Tab title", + "level": 1 + } + ] +} +</p> +`; +/* end snapshot sbb-tab-title A11y tree Chrome */ + +snapshots["sbb-tab-title A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "heading", + "name": "Tab title", + "level": 1 + } + ] +} +</p> +`; +/* end snapshot sbb-tab-title A11y tree Firefox */ + +snapshots["sbb-tab-title A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Tab title" + } + ] +} +</p> +`; +/* end snapshot sbb-tab-title A11y tree Safari */ + diff --git a/src/components/tabs/tab-title/tab-title.spec.ts b/src/components/tabs/tab-title/tab-title.spec.ts index 100b1d2dc8d..8783b958eef 100644 --- a/src/components/tabs/tab-title/tab-title.spec.ts +++ b/src/components/tabs/tab-title/tab-title.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import './tab-title'; @@ -30,4 +31,6 @@ describe('sbb-tab-title', () => { expect(root).dom.to.be.equal(`<sbb-tab-title level="7" amount="78"></sbb-tab-title>`); await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html`<sbb-tab-title>Tab title</sbb-tab-title>`); }); diff --git a/src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js b/src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js new file mode 100644 index 00000000000..6bf209f3b33 --- /dev/null +++ b/src/components/tag/tag-group/__snapshots__/tag-group.spec.snap.js @@ -0,0 +1,129 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-tag-group renders - Dom"] = +`<sbb-tag-group role="group"> + <sbb-tag + slot="li-0" + value="tag-1" + > + First tag + </sbb-tag> + <sbb-tag + slot="li-1" + value="tag-2" + > + Second tag + </sbb-tag> + <div slot="li-2"> + </div> + <sbb-tag + slot="li-3" + value="tag-3" + > + Third tag + </sbb-tag> +</sbb-tag-group> +`; +/* end snapshot sbb-tag-group renders - Dom */ + +snapshots["sbb-tag-group renders - ShadowDom"] = +`<div class="sbb-tag-group"> + <ul class="sbb-tag-group__list"> + <li> + <slot name="li-0"> + </slot> + </li> + <li> + <slot name="li-1"> + </slot> + </li> + <li> + <slot name="li-2"> + </slot> + </li> + <li> + <slot name="li-3"> + </slot> + </li> + </ul> + <span hidden=""> + <slot> + </slot> + </span> +</div> +`; +/* end snapshot sbb-tag-group renders - ShadowDom */ + +snapshots["sbb-tag-group A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "First tag" + }, + { + "role": "text", + "name": "Second tag" + }, + { + "role": "text", + "name": "Third tag" + } + ] +} +</p> +`; +/* end snapshot sbb-tag-group A11y tree Chrome */ + +snapshots["sbb-tag-group A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "First tag" + }, + { + "role": "text leaf", + "name": "Second tag" + }, + { + "role": "text leaf", + "name": "Third tag" + } + ] +} +</p> +`; +/* end snapshot sbb-tag-group A11y tree Firefox */ + +snapshots["sbb-tag-group A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "First tag" + }, + { + "role": "text", + "name": "Second tag" + }, + { + "role": "text", + "name": "Third tag" + } + ] +} +</p> +`; +/* end snapshot sbb-tag-group A11y tree Safari */ + diff --git a/src/components/tag/tag-group/tag-group.spec.ts b/src/components/tag/tag-group/tag-group.spec.ts index 42171dba5bb..39ccb64c123 100644 --- a/src/components/tag/tag-group/tag-group.spec.ts +++ b/src/components/tag/tag-group/tag-group.spec.ts @@ -1,10 +1,17 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbTagGroupElement } from './tag-group'; import './tag-group'; describe('sbb-tag-group', () => { - it('renders', async () => { - const root = await fixture(html` + let element: SbbTagGroupElement; + + beforeEach(async () => { + element = await fixture(html` <sbb-tag-group> <sbb-tag value="tag-1">First tag</sbb-tag> <sbb-tag value="tag-2">Second tag</sbb-tag> @@ -12,45 +19,16 @@ describe('sbb-tag-group', () => { <sbb-tag value="tag-3">Third tag</sbb-tag> </sbb-tag-group> `); + await waitForLitRender(element); + }); - expect(root).dom.to.be.equal( - ` - <sbb-tag-group role="group"> - <sbb-tag slot="li-0" value="tag-1"> - First tag - </sbb-tag> - <sbb-tag slot="li-1" value="tag-2"> - Second tag - </sbb-tag> - <div slot="li-2"></div> - <sbb-tag slot="li-3" value="tag-3"> - Third tag - </sbb-tag> - </sbb-tag-group> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-tag-group"> - <ul class="sbb-tag-group__list"> - <li> - <slot name="li-0"></slot> - </li> - <li> - <slot name="li-1"></slot> - </li> - <li> - <slot name="li-2"></slot> - </li> - <li> - <slot name="li-3"></slot> - </li> - </ul> - <span hidden=""> - <slot></slot> - </span> - </div> - `, - ); + it('renders - Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); }); + + it('renders - ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/tag/tag/__snapshots__/tag.spec.snap.js b/src/components/tag/tag/__snapshots__/tag.spec.snap.js index 5b350f4917b..d5eb644d9a1 100644 --- a/src/components/tag/tag/__snapshots__/tag.spec.snap.js +++ b/src/components/tag/tag/__snapshots__/tag.spec.snap.js @@ -81,3 +81,52 @@ snapshots["sbb-tag renders slotted icon and amount"] = `; /* end snapshot sbb-tag renders slotted icon and amount */ +snapshots["sbb-tag A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Label", + "pressed": false + } + ] +} +</p> +`; +/* end snapshot sbb-tag A11y tree Chrome */ + +snapshots["sbb-tag A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "toggle button", + "name": "Label" + } + ] +} +</p> +`; +/* end snapshot sbb-tag A11y tree Firefox */ + +snapshots["sbb-tag A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Label" + } + ] +} +</p> +`; +/* end snapshot sbb-tag A11y tree Safari */ + diff --git a/src/components/tag/tag/tag.spec.ts b/src/components/tag/tag/tag.spec.ts index 3b699ca50a1..a0d3a70fdd2 100644 --- a/src/components/tag/tag/tag.spec.ts +++ b/src/components/tag/tag/tag.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import './tag'; @@ -76,4 +77,6 @@ describe('sbb-tag', () => { ); await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html`<sbb-tag value="Value">Label</sbb-tag>`); }); diff --git a/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js b/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js new file mode 100644 index 00000000000..975977d313b --- /dev/null +++ b/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js @@ -0,0 +1,206 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-teaser-hero should render without link"] = +`<span class="sbb-teaser-hero"> + <span class="sbb-teaser-hero__panel"> + <p class="sbb-teaser-hero__panel-text"> + <slot> + </slot> + </p> + </span> + <slot name="image"> + <sbb-image + alt="SBB CFF FFS Employee" + image-src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Hoehenrundweg-Gryden-Lenk.jpg" + > + </sbb-image> + </slot> +</span> +`; +/* end snapshot sbb-teaser-hero should render without link */ + +snapshots["sbb-teaser-hero should render with slots"] = +`<a + class="sbb-teaser-hero" + href="https://www.sbb.ch" + role="presentation" + tabindex="-1" +> + <span class="sbb-teaser-hero__panel"> + <p class="sbb-teaser-hero__panel-text"> + <slot> + </slot> + </p> + <sbb-link + class="sbb-teaser-hero__panel-link" + data-slot-names="link-content unnamed" + dir="ltr" + icon-name="chevron-small-right-small" + icon-placement="end" + is-static="" + negative="" + size="m" + variant="block" + > + <slot name="link-content"> + </slot> + </sbb-link> + </span> + <slot name="image"> + </slot> +</a> +`; +/* end snapshot sbb-teaser-hero should render with slots */ + +snapshots["sbb-teaser-hero should render all properties Dom"] = +`<sbb-teaser-hero + aria-label="label" + dir="ltr" + href="https://www.sbb.ch" + image-alt="SBB CFF FFS Employee" + image-src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Hoehenrundweg-Gryden-Lenk.jpg" + link-content="Find out more" + rel="external" + role="link" + tabindex="0" + target="_blank" +> + Break out and explore castles and palaces. +</sbb-teaser-hero> +`; +/* end snapshot sbb-teaser-hero should render all properties Dom */ + +snapshots["sbb-teaser-hero should render all properties ShadowDom"] = +`<a + class="sbb-teaser-hero" + href="https://www.sbb.ch" + rel="external" + role="presentation" + tabindex="-1" + target="_blank" +> + <span class="sbb-teaser-hero__panel"> + <p class="sbb-teaser-hero__panel-text"> + <slot> + </slot> + </p> + <sbb-link + class="sbb-teaser-hero__panel-link" + data-slot-names="unnamed" + dir="ltr" + icon-name="chevron-small-right-small" + icon-placement="end" + is-static="" + negative="" + size="m" + variant="block" + > + <slot name="link-content"> + Find out more + </slot> + </sbb-link> + </span> + <slot name="image"> + <sbb-image + alt="SBB CFF FFS Employee" + image-src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Hoehenrundweg-Gryden-Lenk.jpg" + > + </sbb-image> + </slot> + <span class="sbb-teaser-hero__opens-in-new-window"> + . Link target opens in new window. + </span> +</a> +`; +/* end snapshot sbb-teaser-hero should render all properties ShadowDom */ + +snapshots["sbb-teaser-hero should render all properties A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "label", + "children": [ + { + "role": "link", + "name": "Break out and explore castles and palaces. Find out more . Link target opens in new window." + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-teaser-hero should render all properties A11y tree Chrome */ + +snapshots["sbb-teaser-hero should render all properties A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "link", + "name": "label", + "children": [ + { + "role": "link", + "name": "Break out and explore castles and palaces. Find out more . Link target opens in new window.", + "value": "https://www.sbb.ch/" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-teaser-hero should render all properties A11y tree Firefox */ + +snapshots["sbb-teaser-hero should render all properties A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "label", + "children": [ + { + "role": "link", + "name": "Break out and explore castles and palaces. Find out more . Link target opens in new window.", + "children": [ + { + "role": "text", + "name": "Break out and explore castles and palaces." + }, + { + "role": "text", + "name": "Find out more" + }, + { + "role": "image", + "name": "SBB CFF FFS Employee" + }, + { + "role": "text", + "name": ". " + }, + { + "role": "text", + "name": "Link target opens in new window." + } + ] + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-teaser-hero should render all properties A11y tree Safari */ + diff --git a/src/components/teaser-hero/teaser-hero.spec.ts b/src/components/teaser-hero/teaser-hero.spec.ts index 1523a1779f0..2464cd7c040 100644 --- a/src/components/teaser-hero/teaser-hero.spec.ts +++ b/src/components/teaser-hero/teaser-hero.spec.ts @@ -2,28 +2,20 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import sampleImages from '../core/images'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + +import type { SbbTeaserHeroElement } from './teaser-hero'; import './teaser-hero'; import '../link'; import '../image'; describe('sbb-teaser-hero', () => { - it('should render all properties', async () => { - const root = await fixture( - html`<sbb-teaser-hero - aria-label="label" - href="https://www.sbb.ch" - rel="external" - target="_blank" - link-content="Find out more" - image-src="${sampleImages[1]}" - image-alt="SBB CFF FFS Employee" - >Break out and explore castles and palaces.</sbb-teaser-hero - >`, - ); + describe('should render all properties', () => { + let element: SbbTeaserHeroElement; - expect(root).dom.to.be.equal( - ` - <sbb-teaser-hero + beforeEach(async () => { + element = await fixture( + html`<sbb-teaser-hero aria-label="label" href="https://www.sbb.ch" rel="external" @@ -31,51 +23,20 @@ describe('sbb-teaser-hero', () => { link-content="Find out more" image-src="${sampleImages[1]}" image-alt="SBB CFF FFS Employee" - role="link" - tabindex="0" - dir="ltr" - > - Break out and explore castles and palaces. - </sbb-teaser-hero> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <a - class="sbb-teaser-hero" - href="https://www.sbb.ch" - rel="external" - target="_blank" - role="presentation" - tabindex="-1" - > - <span class="sbb-teaser-hero__panel"> - <p class="sbb-teaser-hero__panel-text"> - <slot></slot> - </p> - <sbb-link - dir="ltr" - is-static - variant="block" - class="sbb-teaser-hero__panel-link" - icon-name="chevron-small-right-small" - icon-placement="end" - size="m" - negative - data-slot-names="unnamed" - > - <slot name="link-content">Find out more</slot> - </sbb-link> - </span> - <slot name="image"> - <sbb-image image-src="${sampleImages[1]}" alt="SBB CFF FFS Employee"></sbb-image> - </slot> - <span class="sbb-teaser-hero__opens-in-new-window"> - . Link target opens in new window. - </span> - </a> - `, - ); + >Break out and explore castles and palaces.</sbb-teaser-hero + >`, + ); + }); + + it('Dom', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); it('should render without link', async () => { @@ -96,20 +57,7 @@ describe('sbb-teaser-hero', () => { </sbb-teaser-hero> `, ); - expect(root).shadowDom.to.be.equal( - ` - <span class="sbb-teaser-hero"> - <span class="sbb-teaser-hero__panel"> - <p class="sbb-teaser-hero__panel-text"> - <slot></slot> - </p> - </span> - <slot name="image"> - <sbb-image image-src="${sampleImages[1]}" alt="SBB CFF FFS Employee"></sbb-image> - </slot> - </span> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('should render with slots', async () => { @@ -133,35 +81,6 @@ describe('sbb-teaser-hero', () => { </sbb-teaser-hero> `, ); - expect(root).shadowDom.to.be.equal( - ` - <a - class="sbb-teaser-hero" - href="https://www.sbb.ch" - role="presentation" - tabindex="-1" - > - <span class="sbb-teaser-hero__panel"> - <p class="sbb-teaser-hero__panel-text"> - <slot></slot> - </p> - <sbb-link - dir="ltr" - is-static - variant="block" - class="sbb-teaser-hero__panel-link" - icon-name="chevron-small-right-small" - icon-placement="end" - size="m" - negative - data-slot-names="link-content unnamed" - > - <slot name="link-content"></slot> - </sbb-link> - </span> - <slot name="image"></slot> - </a> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); }); diff --git a/src/components/teaser/__snapshots__/teaser.spec.snap.js b/src/components/teaser/__snapshots__/teaser.spec.snap.js index b911da5ed45..c0d2dca0ac1 100644 --- a/src/components/teaser/__snapshots__/teaser.spec.snap.js +++ b/src/components/teaser/__snapshots__/teaser.spec.snap.js @@ -222,3 +222,76 @@ snapshots["sbb-teaser renders static - ShadowDOM"] = `; /* end snapshot sbb-teaser renders static - ShadowDOM */ +snapshots["sbb-teaser A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "SBB teaser", + "children": [ + { + "role": "link", + "name": "" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-teaser A11y tree Chrome */ + +snapshots["sbb-teaser A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "link", + "name": "SBB teaser", + "children": [ + { + "role": "link", + "name": "", + "value": "https://github.com/lyne-design-system/lyne-components" + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-teaser A11y tree Firefox */ + +snapshots["sbb-teaser A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "SBB teaser", + "children": [ + { + "role": "link", + "name": "", + "children": [ + { + "role": "text", + "name": "" + } + ] + } + ] + } + ] +} +</p> +`; +/* end snapshot sbb-teaser A11y tree Safari */ + diff --git a/src/components/teaser/teaser.spec.ts b/src/components/teaser/teaser.spec.ts index df0bc1a1657..e05d2aa4fe5 100644 --- a/src/components/teaser/teaser.spec.ts +++ b/src/components/teaser/teaser.spec.ts @@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js'; import { sbbSpread } from '../core/dom'; import images from '../core/images'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import type { SbbTeaserElement } from './teaser'; import './teaser'; @@ -86,4 +87,6 @@ describe('sbb-teaser', () => { const root: SbbTeaserElement = await fixture(createTeaser({ alignment: 'after-centered' })); await expect(root).shadowDom.to.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, createTeaser(argsAfterCentered)); }); diff --git a/src/components/time-input/__snapshots__/time-input.spec.snap.js b/src/components/time-input/__snapshots__/time-input.spec.snap.js new file mode 100644 index 00000000000..746f08bee1c --- /dev/null +++ b/src/components/time-input/__snapshots__/time-input.spec.snap.js @@ -0,0 +1,67 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-time-input renders"] = +`<span> + <sbb-time-input input="id-1"> + </sbb-time-input> + <input + data-sbb-time-input="" + id="id-1" + inputmode="numeric" + maxlength="5" + placeholder="HH:MM" + type="text" + > +</span> +`; +/* end snapshot sbb-time-input renders */ + +snapshots["sbb-time-input A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "textbox", + "name": "HH:MM" + } + ] +} +</p> +`; +/* end snapshot sbb-time-input A11y tree Chrome */ + +snapshots["sbb-time-input A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "textbox", + "name": "HH:MM" + } + ] +} +</p> +`; +/* end snapshot sbb-time-input A11y tree Firefox */ + +snapshots["sbb-time-input A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "textbox", + "name": "HH:MM" + } + ] +} +</p> +`; +/* end snapshot sbb-time-input A11y tree Safari */ + diff --git a/src/components/time-input/time-input.spec.ts b/src/components/time-input/time-input.spec.ts index d43c935dec4..b075d4b0464 100644 --- a/src/components/time-input/time-input.spec.ts +++ b/src/components/time-input/time-input.spec.ts @@ -1,5 +1,8 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; + +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + import './time-input'; describe('sbb-time-input', () => { @@ -12,15 +15,17 @@ describe('sbb-time-input', () => { ); const elem = root.querySelector('sbb-time-input'); - expect(root).dom.to.be.equal(` - <span> - <sbb-time-input input="id-1"> - </sbb-time-input> - <input id="id-1" placeholder="HH:MM" type="text" maxlength="5" inputmode="numeric" data-sbb-time-input> - </span> - `); + await expect(root).dom.to.be.equalSnapshot(); expect(elem).shadowDom.to.be.equal(` <p role="status"></p> `); }); + + testA11yTreeSnapshot( + undefined, + html` <span> + <sbb-time-input input="id-1"></sbb-time-input> + <input id="id-1" /> + </span>`, + ); }); diff --git a/src/components/title/__snapshots__/title.spec.snap.js b/src/components/title/__snapshots__/title.spec.snap.js new file mode 100644 index 00000000000..123216698ee --- /dev/null +++ b/src/components/title/__snapshots__/title.spec.snap.js @@ -0,0 +1,54 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-title A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Sample Title Text", + "level": 1 + } + ] +} +</p> +`; +/* end snapshot sbb-title A11y tree Chrome */ + +snapshots["sbb-title A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "heading", + "name": "Sample Title Text", + "level": 1 + } + ] +} +</p> +`; +/* end snapshot sbb-title A11y tree Firefox */ + +snapshots["sbb-title A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "heading", + "name": "Sample Title Text", + "level": 1 + } + ] +} +</p> +`; +/* end snapshot sbb-title A11y tree Safari */ + diff --git a/src/components/title/title.spec.ts b/src/components/title/title.spec.ts index bfda994a901..c203ffe33ca 100644 --- a/src/components/title/title.spec.ts +++ b/src/components/title/title.spec.ts @@ -1,8 +1,10 @@ -import './title'; - import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + +import './title'; + describe('sbb-title', () => { it('renders', async () => { const root = await fixture( @@ -18,4 +20,9 @@ describe('sbb-title', () => { <h1 class="sbb-title" role="presentation"><slot></slot></h1> `); }); + + testA11yTreeSnapshot( + undefined, + html`<sbb-title level="1" visual-level="2">Sample Title Text</sbb-title>`, + ); }); diff --git a/src/components/toast/__snapshots__/toast.spec.snap.js b/src/components/toast/__snapshots__/toast.spec.snap.js new file mode 100644 index 00000000000..f1dfece1f48 --- /dev/null +++ b/src/components/toast/__snapshots__/toast.spec.snap.js @@ -0,0 +1,152 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-toast renders Chrome-Safari Dom"] = +`<sbb-toast + data-slot-names="unnamed" + data-state="closed" + dismissible="" + icon-name="circle-tick-small" + position="bottom-center" +> + <span> + 'Lorem ipsum dolor' + </span> +</sbb-toast> +`; +/* end snapshot sbb-toast renders Chrome-Safari Dom */ + +snapshots["sbb-toast renders Chrome-Safari ShadowDom"] = +`<div class="sbb-toast__overlay-container"> + <div class="sbb-toast"> + <div class="sbb-toast__icon"> + <slot name="icon"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="circle-tick-small" + role="img" + > + </sbb-icon> + </slot> + </div> + <div + aria-live="polite" + class="sbb-toast__content" + > + <slot> + </slot> + </div> + <div class="sbb-toast__action"> + <slot name="action"> + <sbb-button + aria-label="Close message" + class="sbb-toast__action-button" + dir="ltr" + icon-name="cross-small" + negative="" + role="button" + sbb-toast-close="" + size="m" + tabindex="0" + variant="transparent" + > + </sbb-button> + </slot> + </div> + </div> +</div> +`; +/* end snapshot sbb-toast renders Chrome-Safari ShadowDom */ + +snapshots["sbb-toast renders A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-toast renders A11y tree Chrome */ + +snapshots["sbb-toast renders Firefox Dom"] = +`<sbb-toast + data-slot-names="unnamed" + data-state="closed" + dismissible="" + icon-name="circle-tick-small" + position="bottom-center" +> + <span> + 'Lorem ipsum dolor' + </span> +</sbb-toast> +`; +/* end snapshot sbb-toast renders Firefox Dom */ + +snapshots["sbb-toast renders Firefox ShadowDom"] = +`<div class="sbb-toast__overlay-container"> + <div + class="sbb-toast" + role="status" + > + <div class="sbb-toast__icon"> + <slot name="icon"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="circle-tick-small" + role="img" + > + </sbb-icon> + </slot> + </div> + <div + aria-live="polite" + class="sbb-toast__content" + > + <slot> + </slot> + </div> + <div class="sbb-toast__action"> + <slot name="action"> + <sbb-button + aria-label="Close message" + class="sbb-toast__action-button" + dir="ltr" + icon-name="cross-small" + negative="" + role="button" + sbb-toast-close="" + size="m" + tabindex="0" + variant="transparent" + > + </sbb-button> + </slot> + </div> + </div> +</div> +`; +/* end snapshot sbb-toast renders Firefox ShadowDom */ + +snapshots["sbb-toast renders A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-toast renders A11y tree Firefox */ + +snapshots["sbb-toast renders A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-toast renders A11y tree Safari */ + diff --git a/src/components/toast/toast.spec.ts b/src/components/toast/toast.spec.ts index a564809bf20..3505dab2e1d 100644 --- a/src/components/toast/toast.spec.ts +++ b/src/components/toast/toast.spec.ts @@ -3,49 +3,43 @@ import { html } from 'lit/static-html.js'; import { isFirefox } from '../core/dom'; import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import type { SbbToastElement } from './toast'; import './toast'; describe('sbb-toast', () => { - it('renders', async () => { - const root: SbbToastElement = await fixture(html` - <sbb-toast icon-name="circle-tick-small" dismissible> 'Lorem ipsum dolor' </sbb-toast> - `); - - await waitForLitRender(root); - - expect(root).dom.to.be.equal(` - <sbb-toast position="bottom-center" icon-name="circle-tick-small" dismissible="" data-state="closed" - data-slot-names="unnamed" - > - <span>'Lorem ipsum dolor'</span> - </sbb-toast> - `); - expect(root).shadowDom.to.be.equal(` - <div class="sbb-toast__overlay-container"> - <div class="sbb-toast" ${isFirefox() ? 'role="status"' : ''}> - <div class="sbb-toast__icon"> - <slot name="icon"> - <sbb-icon name="circle-tick-small" role="img" aria-hidden="true" data-namespace="default"> - </sbb-icon> - </slot> - </div> - <div class="sbb-toast__content" aria-live="polite"> - <slot></slot> - </div> - <div class="sbb-toast__action"> - <slot name="action"> - <sbb-button class="sbb-toast__action-button" aria-label="Close message" - variant="transparent" negative size="m" icon-name="cross-small" - dir="ltr" role="button" tabindex="0" sbb-toast-close - > - </sbb-button> - </slot> - </div> - </div> - </div> - `); + describe('renders', () => { + let elem: SbbToastElement; + + beforeEach(async () => { + elem = await fixture(html` + <sbb-toast icon-name="circle-tick-small" dismissible> 'Lorem ipsum dolor' </sbb-toast> + `); + await waitForLitRender(elem); + }); + + (!isFirefox() ? describe : describe.skip)('Chrome-Safari', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); + + (isFirefox() ? describe : describe.skip)('Firefox', async () => { + it('Dom', async () => { + await expect(elem).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(elem).shadowDom.to.be.equalSnapshot(); + }); + }); + + testA11yTreeSnapshot(); }); }); diff --git a/src/components/toggle-check/__snapshots__/toggle-check.spec.snap.js b/src/components/toggle-check/__snapshots__/toggle-check.spec.snap.js new file mode 100644 index 00000000000..df5e6ffdb9a --- /dev/null +++ b/src/components/toggle-check/__snapshots__/toggle-check.spec.snap.js @@ -0,0 +1,229 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-toggle-check renders sbb-toggle-check"] = +`<label class="sbb-toggle-check"> + <input + aria-hidden="true" + tabindex="-1" + type="checkbox" + > + <span class="sbb-toggle-check__container"> + <span + class="sbb-toggle-check__label" + hidden="" + > + <slot> + </slot> + </span> + <span class="sbb-toggle-check__track"> + <span class="sbb-toggle-check__circle"> + <span class="sbb-toggle-check__icon"> + <slot name="icon"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="tick-small" + role="img" + > + </sbb-icon> + </slot> + </span> + </span> + </span> + </span> +</label> +`; +/* end snapshot sbb-toggle-check renders sbb-toggle-check */ + +snapshots["sbb-toggle-check label position renders label before toggle"] = +`<label class="sbb-toggle-check"> + <input + aria-hidden="true" + tabindex="-1" + type="checkbox" + > + <span class="sbb-toggle-check__container"> + <span class="sbb-toggle-check__label"> + <slot> + </slot> + </span> + <span class="sbb-toggle-check__track"> + <span class="sbb-toggle-check__circle"> + <span class="sbb-toggle-check__icon"> + <slot name="icon"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="tick-small" + role="img" + > + </sbb-icon> + </slot> + </span> + </span> + </span> + </span> +</label> +`; +/* end snapshot sbb-toggle-check label position renders label before toggle */ + +snapshots["sbb-toggle-check states checked state renders toggle in checked state"] = +`<label class="sbb-toggle-check"> + <input + aria-hidden="true" + checked="" + tabindex="-1" + type="checkbox" + > + <span class="sbb-toggle-check__container"> + <span + class="sbb-toggle-check__label" + hidden="" + > + <slot> + </slot> + </span> + <span class="sbb-toggle-check__track"> + <span class="sbb-toggle-check__circle"> + <span class="sbb-toggle-check__icon"> + <slot name="icon"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="tick-small" + role="img" + > + </sbb-icon> + </slot> + </span> + </span> + </span> + </span> +</label> +`; +/* end snapshot sbb-toggle-check states checked state renders toggle in checked state */ + +snapshots["sbb-toggle-check states disabled state renders toggle in disabled state"] = +`<label class="sbb-toggle-check"> + <input + aria-hidden="true" + disabled="" + tabindex="-1" + type="checkbox" + > + <span class="sbb-toggle-check__container"> + <span + class="sbb-toggle-check__label" + hidden="" + > + <slot> + </slot> + </span> + <span class="sbb-toggle-check__track"> + <span class="sbb-toggle-check__circle"> + <span class="sbb-toggle-check__icon"> + <slot name="icon"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="tick-small" + role="img" + > + </sbb-icon> + </slot> + </span> + </span> + </span> + </span> +</label> +`; +/* end snapshot sbb-toggle-check states disabled state renders toggle in disabled state */ + +snapshots["sbb-toggle-check states disabled and checked state renders toggle in disabled and checked state"] = +`<label class="sbb-toggle-check"> + <input + aria-hidden="true" + checked="" + disabled="" + tabindex="-1" + type="checkbox" + > + <span class="sbb-toggle-check__container"> + <span + class="sbb-toggle-check__label" + hidden="" + > + <slot> + </slot> + </span> + <span class="sbb-toggle-check__track"> + <span class="sbb-toggle-check__circle"> + <span class="sbb-toggle-check__icon"> + <slot name="icon"> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="tick-small" + role="img" + > + </sbb-icon> + </slot> + </span> + </span> + </span> + </span> +</label> +`; +/* end snapshot sbb-toggle-check states disabled and checked state renders toggle in disabled and checked state */ + +snapshots["sbb-toggle-check A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "checkbox", + "name": "", + "checked": false + } + ] +} +</p> +`; +/* end snapshot sbb-toggle-check A11y tree Chrome */ + +snapshots["sbb-toggle-check A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "checkbox", + "name": "" + } + ] +} +</p> +`; +/* end snapshot sbb-toggle-check A11y tree Firefox */ + +snapshots["sbb-toggle-check A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "checkbox", + "name": "", + "checked": false + } + ] +} +</p> +`; +/* end snapshot sbb-toggle-check A11y tree Safari */ + diff --git a/src/components/toggle-check/toggle-check.spec.ts b/src/components/toggle-check/toggle-check.spec.ts index 63089e44b4d..07ee172fe6b 100644 --- a/src/components/toggle-check/toggle-check.spec.ts +++ b/src/components/toggle-check/toggle-check.spec.ts @@ -2,44 +2,21 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../core/testing'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import './toggle-check'; describe('sbb-toggle-check', () => { it('renders sbb-toggle-check', async () => { const root = await fixture(html`<sbb-toggle-check></sbb-toggle-check>`); + await waitForLitRender(root); expect(root).dom.to.be.equal(` <sbb-toggle-check size="s" aria-checked="false" aria-disabled="false" aria-required="false" label-position="after" role="checkbox" tabindex="0"> </sbb-toggle-check> `); - await waitForLitRender(root); - - expect(root).shadowDom.to.be.equal(` - <label class="sbb-toggle-check"> - <input aria-hidden="true" tabindex="-1" type="checkbox"/> - <span class="sbb-toggle-check__container"> - <span class="sbb-toggle-check__label" hidden=""> - <slot></slot> - </span> - <span class="sbb-toggle-check__track"> - <span class="sbb-toggle-check__circle"> - <span class="sbb-toggle-check__icon"> - <slot name="icon"> - <sbb-icon - aria-hidden="true" - data-namespace="default" - name="tick-small" - role="img" - ></sbb-icon> - </slot> - </span> - </span> - </span> - </span> - </label> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); describe('label position', () => { @@ -55,29 +32,7 @@ describe('sbb-toggle-check', () => { Check it </sbb-toggle-check> `); - expect(root).shadowDom.to.be.equal(` - <label class="sbb-toggle-check"> - <input aria-hidden="true" tabindex="-1" type="checkbox"/> - <span class="sbb-toggle-check__container"> - <span class="sbb-toggle-check__label"> - <slot></slot> - </span> - <span class="sbb-toggle-check__track"> - <span class="sbb-toggle-check__circle"> - <span class="sbb-toggle-check__icon"> - <slot name="icon"> - <sbb-icon - aria-hidden="true" - data-namespace="default" - name="tick-small" - role="img" - ></sbb-icon> - </slot> - </span> - </span> - </span> - </label> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); }); @@ -94,30 +49,7 @@ describe('sbb-toggle-check', () => { </sbb-toggle-check> `, ); - expect(root).shadowDom.to.be.equal(` - <label class="sbb-toggle-check"> - <input aria-hidden="true" checked="" tabindex="-1" checked="" type="checkbox"/> - <span class="sbb-toggle-check__container"> - <span class="sbb-toggle-check__label" hidden=""> - <slot></slot> - </span> - <span class="sbb-toggle-check__track"> - <span class="sbb-toggle-check__circle"> - <span class="sbb-toggle-check__icon"> - <slot name="icon"> - <sbb-icon - aria-hidden="true" - data-namespace="default" - name="tick-small" - role="img" - ></sbb-icon> - </slot> - </span> - </span> - </span> - </span> - </label> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); }); @@ -131,30 +63,7 @@ describe('sbb-toggle-check', () => { <sbb-toggle-check size="s" aria-checked="false" aria-disabled="true" aria-required="false" disabled label-position="after" role="checkbox"> </sbb-toggle-check> `); - expect(root).shadowDom.to.be.equal(` - <label class="sbb-toggle-check"> - <input disabled aria-hidden="true" tabindex="-1" type="checkbox"> - <span class="sbb-toggle-check__container"> - <span class="sbb-toggle-check__label" hidden=""> - <slot></slot> - </span> - <span class="sbb-toggle-check__track"> - <span class="sbb-toggle-check__circle"> - <span class="sbb-toggle-check__icon"> - <slot name="icon"> - <sbb-icon - aria-hidden="true" - data-namespace="default" - name="tick-small" - role="img" - ></sbb-icon> - </slot> - </span> - </span> - </span> - </span> - </label> - `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); }); @@ -164,38 +73,14 @@ describe('sbb-toggle-check', () => { await waitForLitRender(root); - expect(root).dom.to.be.equal( - ` + expect(root).dom.to.be.equal(` <sbb-toggle-check checked disabled size="s" label-position="after" aria-checked="true" aria-disabled="true" aria-required="false" role="checkbox"> - </sbb-toggle-check> - `, - ); - expect(root).shadowDom.to.be.equal(` - <label class="sbb-toggle-check"> - <input checked="" type="checkbox" disabled aria-hidden="true" tabindex="-1" /> - <span class="sbb-toggle-check__container"> - <span class="sbb-toggle-check__label" hidden=""> - <slot></slot> - </span> - <span class="sbb-toggle-check__track"> - <span class="sbb-toggle-check__circle"> - <span class="sbb-toggle-check__icon"> - <slot name="icon"> - <sbb-icon - aria-hidden="true" - data-namespace="default" - name="tick-small" - role="img" - ></sbb-icon> - </slot> - </span> - </span> - </span> - </span> - </label> `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); }); }); + + testA11yTreeSnapshot(undefined, html`<sbb-toggle-check></sbb-toggle-check>`); }); diff --git a/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js b/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js index 0b2631553e0..e72f44996b0 100644 --- a/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js +++ b/src/components/toggle/toggle-option/__snapshots__/toggle-option.spec.snap.js @@ -72,3 +72,54 @@ snapshots["sbb-toggle-option renders with slotted sbb-icon"] = `; /* end snapshot sbb-toggle-option renders with slotted sbb-icon */ +snapshots["sbb-toggle-option A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "radio", + "name": "", + "checked": true + } + ] +} +</p> +`; +/* end snapshot sbb-toggle-option A11y tree Chrome */ + +snapshots["sbb-toggle-option A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "radio", + "name": "", + "checked": true + } + ] +} +</p> +`; +/* end snapshot sbb-toggle-option A11y tree Firefox */ + +snapshots["sbb-toggle-option A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "radio", + "name": "", + "checked": true + } + ] +} +</p> +`; +/* end snapshot sbb-toggle-option A11y tree Safari */ + diff --git a/src/components/toggle/toggle-option/toggle-option.spec.ts b/src/components/toggle/toggle-option/toggle-option.spec.ts index 0713be83c10..f70c11a51c5 100644 --- a/src/components/toggle/toggle-option/toggle-option.spec.ts +++ b/src/components/toggle/toggle-option/toggle-option.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import './toggle-option'; import '../../icon'; @@ -67,4 +68,9 @@ describe('sbb-toggle-option', () => { `); await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot( + undefined, + html`<sbb-toggle-option checked value="Option 1"></sbb-toggle-option>`, + ); }); diff --git a/src/components/toggle/toggle/__snapshots__/toggle.spec.snap.js b/src/components/toggle/toggle/__snapshots__/toggle.spec.snap.js new file mode 100644 index 00000000000..1065dbcea9f --- /dev/null +++ b/src/components/toggle/toggle/__snapshots__/toggle.spec.snap.js @@ -0,0 +1,68 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-toggle A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "radio", + "name": "Value one", + "checked": true + }, + { + "role": "radio", + "name": "Value two", + "checked": false + } + ] +} +</p> +`; +/* end snapshot sbb-toggle A11y tree Chrome */ + +snapshots["sbb-toggle A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "radio", + "name": "Value one", + "checked": true + }, + { + "role": "radio", + "name": "Value two" + } + ] +} +</p> +`; +/* end snapshot sbb-toggle A11y tree Firefox */ + +snapshots["sbb-toggle A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "radio", + "name": "Value one", + "checked": true + }, + { + "role": "radio", + "name": "Value two", + "checked": false + } + ] +} +</p> +`; +/* end snapshot sbb-toggle A11y tree Safari */ + diff --git a/src/components/toggle/toggle/toggle.spec.ts b/src/components/toggle/toggle/toggle.spec.ts index 4dda9767601..b0ef31e41f5 100644 --- a/src/components/toggle/toggle/toggle.spec.ts +++ b/src/components/toggle/toggle/toggle.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import type { SbbToggleOptionElement } from '../toggle-option'; import type { SbbToggleElement } from './toggle'; @@ -164,4 +165,6 @@ describe('sbb-toggle', () => { expect(option).not.to.have.attribute('disabled'); }); }); + + testA11yTreeSnapshot(undefined, simpleToggleTemplate); }); diff --git a/src/components/tooltip/tooltip-trigger/__snapshots__/tooltip-trigger.spec.snap.js b/src/components/tooltip/tooltip-trigger/__snapshots__/tooltip-trigger.spec.snap.js new file mode 100644 index 00000000000..a909546e3ed --- /dev/null +++ b/src/components/tooltip/tooltip-trigger/__snapshots__/tooltip-trigger.spec.snap.js @@ -0,0 +1,81 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-tooltip-trigger renders"] = +`<span class="sbb-tooltip-trigger"> + <slot> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="circle-information-small" + role="img" + > + </sbb-icon> + </slot> +</span> +`; +/* end snapshot sbb-tooltip-trigger renders */ + +snapshots["sbb-tooltip-trigger renders with custom content"] = +`<span class="sbb-tooltip-trigger"> + <slot> + <sbb-icon + aria-hidden="true" + data-namespace="default" + name="circle-information-small" + role="img" + > + </sbb-icon> + </slot> +</span> +`; +/* end snapshot sbb-tooltip-trigger renders with custom content */ + +snapshots["sbb-tooltip-trigger A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "" + } + ] +} +</p> +`; +/* end snapshot sbb-tooltip-trigger A11y tree Chrome */ + +snapshots["sbb-tooltip-trigger A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "" + } + ] +} +</p> +`; +/* end snapshot sbb-tooltip-trigger A11y tree Firefox */ + +snapshots["sbb-tooltip-trigger A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "" + } + ] +} +</p> +`; +/* end snapshot sbb-tooltip-trigger A11y tree Safari */ + diff --git a/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts b/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts index 4280a35430a..e4b3c5fd536 100644 --- a/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts +++ b/src/components/tooltip/tooltip-trigger/tooltip-trigger.spec.ts @@ -2,6 +2,7 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; import '../../icon'; import './tooltip-trigger'; @@ -15,19 +16,7 @@ describe('sbb-tooltip-trigger', () => { expect(root).dom.to.be.equal( `<sbb-tooltip-trigger role="button" tabindex="0" dir="ltr"></sbb-tooltip-trigger>`, ); - expect(root).shadowDom.to.be.equal( - `<span class="sbb-tooltip-trigger"> - <slot> - <sbb-icon - aria-hidden="true" - data-namespace="default" - name="circle-information-small" - role="img"> - </sbb-icon> - </slot> - </span> - `, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); it('renders with custom content', async () => { @@ -40,17 +29,8 @@ describe('sbb-tooltip-trigger', () => { Custom Content </sbb-tooltip-trigger>`, ); - expect(root).shadowDom.to.be.equal( - `<span class="sbb-tooltip-trigger"> - <slot> - <sbb-icon - aria-hidden="true" - data-namespace="default" - name="circle-information-small" - role="img"> - </sbb-icon> - </slot> - </span>`, - ); + await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html`<sbb-tooltip-trigger></sbb-tooltip-trigger>`); }); diff --git a/src/components/tooltip/tooltip/__snapshots__/tooltip.spec.snap.js b/src/components/tooltip/tooltip/__snapshots__/tooltip.spec.snap.js new file mode 100644 index 00000000000..807546de0bf --- /dev/null +++ b/src/components/tooltip/tooltip/__snapshots__/tooltip.spec.snap.js @@ -0,0 +1,62 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-tooltip renders"] = +`<div class="sbb-tooltip__container"> + <div class="sbb-tooltip"> + <div class="sbb-tooltip__content"> + <span> + <slot> + No content + </slot> + </span> + <span class="sbb-tooltip__close"> + <sbb-button + aria-label="Close note" + dir="ltr" + icon-name="cross-small" + role="button" + sbb-tooltip-close="" + size="m" + tabindex="0" + type="button" + variant="secondary" + > + </sbb-button> + </span> + </div> + </div> +</div> +`; +/* end snapshot sbb-tooltip renders */ + +snapshots["sbb-tooltip A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-tooltip A11y tree Chrome */ + +snapshots["sbb-tooltip A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-tooltip A11y tree Firefox */ + +snapshots["sbb-tooltip A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-tooltip A11y tree Safari */ + diff --git a/src/components/tooltip/tooltip/tooltip.spec.ts b/src/components/tooltip/tooltip/tooltip.spec.ts index b740dcf11f8..2ef8b918520 100644 --- a/src/components/tooltip/tooltip/tooltip.spec.ts +++ b/src/components/tooltip/tooltip/tooltip.spec.ts @@ -1,47 +1,20 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { i18nCloseTooltip } from '../../core/i18n'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + import './tooltip'; describe('sbb-tooltip', () => { it('renders', async () => { const root = await fixture(html`<sbb-tooltip></sbb-tooltip>`); - expect(root).dom.to.be.equal( - ` - <sbb-tooltip data-state="closed" id="sbb-tooltip-1" role="tooltip"> - - </sbb-tooltip> - `, - ); - expect(root).shadowDom.to.be.equal( - ` - <div class="sbb-tooltip__container"> - <div class="sbb-tooltip"> - <div class="sbb-tooltip__content"> - <span> - <slot> - No content - </slot> - </span> - <span class="sbb-tooltip__close"> - <sbb-button - dir="ltr" - aria-label="${i18nCloseTooltip.en}" - icon-name="cross-small" - role="button" - sbb-tooltip-close="" - size="m" - type="button" - tabindex="0" - variant="secondary" - ></sbb-button> - </span> - </div> - </div> - </div> - `, - ); + expect(root).dom.to.be.equal(` + <sbb-tooltip data-state="closed" id="sbb-tooltip-1" role="tooltip"> + </sbb-tooltip> + `); + await expect(root).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html`<sbb-tooltip></sbb-tooltip>`); }); diff --git a/src/components/visual-checkbox/__snapshots__/visual-checkbox.spec.snap.js b/src/components/visual-checkbox/__snapshots__/visual-checkbox.spec.snap.js new file mode 100644 index 00000000000..5c1cc9765af --- /dev/null +++ b/src/components/visual-checkbox/__snapshots__/visual-checkbox.spec.snap.js @@ -0,0 +1,57 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-visual-checkbox renders unchecked"] = +`<span class="sbb-visual-checkbox"> + <span class="sbb-visual-checkbox__icon"> + </span> +</span> +`; +/* end snapshot sbb-visual-checkbox renders unchecked */ + +snapshots["sbb-visual-checkbox renders checked"] = +`<span class="sbb-visual-checkbox"> + <span class="sbb-visual-checkbox__icon"> + </span> +</span> +`; +/* end snapshot sbb-visual-checkbox renders checked */ + +snapshots["sbb-visual-checkbox renders indeterminate"] = +`<span class="sbb-visual-checkbox"> + <span class="sbb-visual-checkbox__icon"> + </span> +</span> +`; +/* end snapshot sbb-visual-checkbox renders indeterminate */ + +snapshots["sbb-visual-checkbox A11y tree Chrome"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-visual-checkbox A11y tree Chrome */ + +snapshots["sbb-visual-checkbox A11y tree Firefox"] = +`<p> + { + "role": "document", + "name": "" +} +</p> +`; +/* end snapshot sbb-visual-checkbox A11y tree Firefox */ + +snapshots["sbb-visual-checkbox A11y tree Safari"] = +`<p> + { + "role": "WebArea", + "name": "" +} +</p> +`; +/* end snapshot sbb-visual-checkbox A11y tree Safari */ + diff --git a/src/components/visual-checkbox/visual-checkbox.spec.ts b/src/components/visual-checkbox/visual-checkbox.spec.ts index aebb269473c..55485b6b691 100644 --- a/src/components/visual-checkbox/visual-checkbox.spec.ts +++ b/src/components/visual-checkbox/visual-checkbox.spec.ts @@ -1,63 +1,25 @@ -import './visual-checkbox'; - import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; + +import './visual-checkbox'; + describe('sbb-visual-checkbox', () => { it('renders unchecked', async () => { - expect(await fixture(html`<sbb-visual-checkbox></sbb-visual-checkbox>`)).shadowDom.to.be.equal(` - <span class="sbb-visual-checkbox"> - <span class="sbb-visual-checkbox__icon"> - </span> - </span> - `); + const elem = await fixture(html`<sbb-visual-checkbox></sbb-visual-checkbox>`); + await expect(elem).shadowDom.to.be.equalSnapshot(); }); it('renders checked', async () => { - expect(await fixture(html`<sbb-visual-checkbox checked=""></sbb-visual-checkbox>`)).shadowDom.to - .be.equal(` - <span class="sbb-visual-checkbox"> - <span class="sbb-visual-checkbox__icon"> - <svg - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <path - d='M8 12.3304L10.4615 15L16 9' - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - /> - </svg> - </span> - </span> - `); + const elem = await fixture(html`<sbb-visual-checkbox checked=""></sbb-visual-checkbox>`); + await expect(elem).shadowDom.to.be.equalSnapshot(); }); it('renders indeterminate', async () => { - expect(await fixture(html`<sbb-visual-checkbox indeterminate=""></sbb-visual-checkbox>`)) - .shadowDom.to.be.equal(` - <span class="sbb-visual-checkbox"> - <span class="sbb-visual-checkbox__icon"> - <svg - width="24" - height="24" - viewBox="0 0 24 24" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <path - d='M9 12H15' - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - /> - </svg> - </span> - </span> - `); + const elem = await fixture(html`<sbb-visual-checkbox indeterminate=""></sbb-visual-checkbox>`); + await expect(elem).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(undefined, html`<sbb-visual-checkbox></sbb-visual-checkbox>`); });