diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js index e237e4a1a9e..e42888e3b94 100644 --- a/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js +++ b/src/components/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.spec.snap.js @@ -1,7 +1,7 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-autocomplete-grid-button Dom"] = +snapshots["sbb-autocomplete-grid-button renders Dom"] = ` `; -/* end snapshot sbb-autocomplete-grid-button Dom */ +/* end snapshot sbb-autocomplete-grid-button renders Dom */ -snapshots["sbb-autocomplete-grid-button ShadowDom"] = +snapshots["sbb-autocomplete-grid-button renders ShadowDom"] = ` `; -/* end snapshot sbb-autocomplete-grid-button ShadowDom */ +/* end snapshot sbb-autocomplete-grid-button renders ShadowDom */ + +snapshots["sbb-autocomplete-grid-button renders A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "" + } + ] +} +

+`; +/* end snapshot sbb-autocomplete-grid-button renders A11y tree Chrome */ + +snapshots["sbb-autocomplete-grid-button renders disabled Dom"] = +` + +`; +/* end snapshot sbb-autocomplete-grid-button renders disabled Dom */ + +snapshots["sbb-autocomplete-grid-button renders A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "" + } + ] +} +

+`; +/* end snapshot sbb-autocomplete-grid-button renders A11y tree Firefox */ + +snapshots["sbb-autocomplete-grid-button renders disabled ShadowDom"] = +` + + + + +`; +/* end snapshot sbb-autocomplete-grid-button renders disabled ShadowDom */ + +snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "", + "disabled": true + } + ] +} +

+`; +/* end snapshot sbb-autocomplete-grid-button renders disabled A11y tree Chrome */ + +snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "", + "disabled": true + } + ] +} +

+`; +/* end snapshot sbb-autocomplete-grid-button renders disabled A11y tree Firefox */ + +snapshots["sbb-autocomplete-grid-button renders negative without icon Dom"] = +` + +`; +/* end snapshot sbb-autocomplete-grid-button renders negative without icon Dom */ + +snapshots["sbb-autocomplete-grid-button renders negative without icon ShadowDom"] = +` + + + +`; +/* end snapshot sbb-autocomplete-grid-button renders negative without icon ShadowDom */ + +snapshots["sbb-autocomplete-grid-button renders A11y tree Safari"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "" + } + ] +} +

+`; +/* end snapshot sbb-autocomplete-grid-button renders A11y tree Safari */ + +snapshots["sbb-autocomplete-grid-button renders disabled A11y tree Safari"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "", + "disabled": true + } + ] +} +

+`; +/* end snapshot sbb-autocomplete-grid-button renders disabled A11y tree Safari */ diff --git a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts index 476ceef94ad..a91e3fae5f1 100644 --- a/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts +++ b/src/components/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts @@ -1,6 +1,9 @@ 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 { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button'; import '../autocomplete-grid'; import '../autocomplete-grid-row'; @@ -9,28 +12,103 @@ import '../autocomplete-grid-actions'; import './autocomplete-grid-button'; describe('sbb-autocomplete-grid-button', () => { - let root: SbbAutocompleteGridButtonElement; - beforeEach(async () => { - root = ( - await fixture(html` - - - Option 1 - - - - - -
- `) - ).querySelector('sbb-autocomplete-grid-button')!; + describe('renders', () => { + let root: SbbAutocompleteGridButtonElement; + beforeEach(async () => { + root = ( + await fixture(html` + + + Option 1 + + + + + +
+ `) + ).querySelector('sbb-autocomplete-grid-button')!; + await waitForLitRender(root); + }); + + it('Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot( + html``, + ); }); - it('Dom', async () => { - await expect(root).dom.to.be.equalSnapshot(); + describe('renders disabled', () => { + let root: SbbAutocompleteGridButtonElement; + beforeEach(async () => { + root = ( + await fixture(html` + + + Option 1 + + + + + +
+ `) + ).querySelector('sbb-autocomplete-grid-button')!; + await waitForLitRender(root); + }); + + it('Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot( + html``, + ); }); - it('ShadowDom', async () => { - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders negative without icon', () => { + let root: SbbAutocompleteGridButtonElement; + beforeEach(async () => { + root = ( + await fixture(html` + + + + + Option 1 + + + + + + + `) + ).querySelector('sbb-autocomplete-grid-button')!; + await waitForLitRender(root); + }); + + it('Dom', async () => { + await expect(root).dom.to.be.equalSnapshot(); + }); + + it('ShadowDom', async () => { + await expect(root).shadowDom.to.be.equalSnapshot(); + }); }); }); diff --git a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts index 9572a485466..2498ab2d957 100644 --- a/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts +++ b/src/components/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts @@ -318,6 +318,7 @@ const Template = (args: Args): TemplateResult => html` ?negative=${args.negative} ?borderless=${args.borderless} ?floating-label=${args.floatingLabel} + data-testid="form-field" >