Skip to content

Commit

Permalink
test: implemented a11y tree tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@TomMenga
TomMenga committed Jan 31, 2024
1 parent 29a9fdf commit c87b787
Show file tree
Hide file tree
Showing 125 changed files with 9,195 additions and 1,985 deletions.
129 changes: 129 additions & 0 deletions src/components/accordion/__snapshots__/accordion.spec.snap.js
View file
Original file line number Diff line number Diff line change
@@ -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 */

71 changes: 19 additions & 52 deletions src/components/accordion/accordion.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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();
});
130 changes: 130 additions & 0 deletions src/components/action-group/__snapshots__/action-group.spec.snap.js
View file
Original file line number Diff line number Diff line change
@@ -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 */

Loading

0 comments on commit c87b787

Please sign in to comment.