Skip to content

Commit

Permalink
test(sbb-alert-group): refactor snapshot tests (#2919)
Browse files Browse the repository at this point in the history
  • Loading branch information
TomMenga authored Jul 10, 2024
1 parent 46e4771 commit 4069791
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 40 deletions.
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};

snapshots["sbb-alert-group should render with slots"] =
snapshots["sbb-alert-group renders DOM"] =
`<sbb-alert-group
accessibility-title="Disruptions"
accessibility-title-level="3"
role="status"
>
<span slot="accessibility-title">
Interruptions
</span>
<sbb-alert
animation="open"
data-state="opening"
Expand All @@ -20,14 +18,29 @@ snapshots["sbb-alert-group should render with slots"] =
</sbb-alert>
</sbb-alert-group>
`;
/* end snapshot sbb-alert-group should render with slots */
/* end snapshot sbb-alert-group renders DOM */

snapshots["sbb-alert-group renders Shadow DOM"] =
`<div class="sbb-alert-group">
<h3 class="sbb-alert-group__title">
<slot name="accessibility-title">
Disruptions
</slot>
</h3>
<slot>
</slot>
</div>
`;
/* end snapshot sbb-alert-group renders Shadow DOM */

snapshots["sbb-alert-group should render DOM"] =
snapshots["sbb-alert-group renders with slotted DOM"] =
`<sbb-alert-group
accessibility-title="Disruptions"
accessibility-title-level="3"
role="status"
>
<span slot="accessibility-title">
Interruptions
</span>
<sbb-alert
animation="open"
data-state="opening"
Expand All @@ -39,22 +52,21 @@ snapshots["sbb-alert-group should render DOM"] =
</sbb-alert>
</sbb-alert-group>
`;
/* end snapshot sbb-alert-group should render DOM */
/* end snapshot sbb-alert-group renders with slotted DOM */

snapshots["sbb-alert-group should render Shadow DOM"] =
snapshots["sbb-alert-group renders with slotted Shadow DOM"] =
`<div class="sbb-alert-group">
<h3 class="sbb-alert-group__title">
<slot name="accessibility-title">
Disruptions
</slot>
</h3>
<slot>
</slot>
</div>
`;
/* end snapshot sbb-alert-group should render Shadow DOM */
/* end snapshot sbb-alert-group renders with slotted Shadow DOM */

snapshots["sbb-alert-group should render A11y tree Chrome"] =
snapshots["sbb-alert-group renders A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
Expand Down Expand Up @@ -86,9 +98,9 @@ snapshots["sbb-alert-group should render A11y tree Chrome"] =
}
</p>
`;
/* end snapshot sbb-alert-group should render A11y tree Chrome */
/* end snapshot sbb-alert-group renders A11y tree Chrome */

snapshots["sbb-alert-group should render A11y tree Firefox"] =
snapshots["sbb-alert-group renders A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand Down Expand Up @@ -121,5 +133,5 @@ snapshots["sbb-alert-group should render A11y tree Firefox"] =
}
</p>
`;
/* end snapshot sbb-alert-group should render A11y tree Firefox */
/* end snapshot sbb-alert-group renders A11y tree Firefox */

50 changes: 25 additions & 25 deletions src/elements/alert/alert-group/alert-group.snapshot.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import './alert-group.js';
import '../alert.js';

describe(`sbb-alert-group`, () => {
describe('should render', () => {
describe('renders', () => {
let root: SbbAlertGroupElement;

beforeEach(async () => {
Expand All @@ -35,30 +35,30 @@ describe(`sbb-alert-group`, () => {
testA11yTreeSnapshot();
});

it('should render with slots', async () => {
const root = await fixture(html`
<sbb-alert-group accessibility-title-level="3">
<span slot="accessibility-title">Interruptions</span>
<sbb-alert
title-content="Interruption between Genève and Lausanne"
href="https://www.sbb.ch"
data-state="opening"
>
The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
</sbb-alert>
</sbb-alert-group>
`);
describe('renders with slotted', () => {
let root: SbbAlertGroupElement;

beforeEach(async () => {
root = await fixture(html`
<sbb-alert-group accessibility-title-level="3">
<span slot="accessibility-title">Interruptions</span>
<sbb-alert
title-content="Interruption between Genève and Lausanne"
href="https://www.sbb.ch"
data-state="opening"
>
The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
</sbb-alert>
</sbb-alert-group>
`);
});

it('DOM', async () => {
await expect(root).dom.to.be.equalSnapshot();
});

await expect(root).dom.to.be.equalSnapshot();
expect(root).shadowDom.to.be.equal(
`
<div class="sbb-alert-group">
<h3 class="sbb-alert-group__title">
<slot name="accessibility-title"></slot>
</h3>
<slot></slot>
</div>
`,
);
it('Shadow DOM', async () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});
});
});

0 comments on commit 4069791

Please sign in to comment.