Skip to content

Commit

Permalink
test(sbb-dialog): add visual spec (#2813)
Browse files Browse the repository at this point in the history
  • Loading branch information
TomMenga authored Jun 24, 2024
1 parent 1095121 commit a1a0dd6
Show file tree
Hide file tree
Showing 6 changed files with 241 additions and 22 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,45 @@ snapshots["sbb-dialog-actions A11y tree Firefox"] =
`;
/* end snapshot sbb-dialog-actions A11y tree Firefox */

snapshots["sbb-dialog-actions renders DOM"] =
`<sbb-dialog-actions
align-group="start"
button-size="l"
horizontal-from="medium"
link-size="m"
orientation="horizontal"
>
</sbb-dialog-actions>
`;
/* end snapshot sbb-dialog-actions renders DOM */

snapshots["sbb-dialog-actions renders Shadow DOM"] =
`<div class="sbb-dialog-actions">
<div class="sbb-action-group">
<slot>
</slot>
</div>
</div>
`;
/* end snapshot sbb-dialog-actions renders Shadow DOM */

snapshots["sbb-dialog-actions renders A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": ""
}
</p>
`;
/* end snapshot sbb-dialog-actions renders A11y tree Chrome */

snapshots["sbb-dialog-actions renders A11y tree Firefox"] =
`<p>
{
"role": "document",
"name": ""
}
</p>
`;
/* end snapshot sbb-dialog-actions renders A11y tree Firefox */

29 changes: 16 additions & 13 deletions src/elements/dialog/dialog-actions/dialog-actions.snapshot.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,26 @@ import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';

import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';

import type { SbbDialogActionsElement } from './dialog-actions.js';
import './dialog-actions.js';

describe('sbb-dialog-actions', () => {
it('renders', async () => {
const root = await fixture(html`<sbb-dialog-actions></sbb-dialog-actions>`);
describe('renders', async () => {
let root: SbbDialogActionsElement;

await expect(root).dom.to.equalSnapshot();
beforeEach(async () => {
root = await fixture(html`<sbb-dialog-actions></sbb-dialog-actions>`);
});

expect(root).shadowDom.to.be.equal(`
<div class="sbb-dialog-actions">
<div class="sbb-action-group">
<slot>
</slot>
</div>
</div>
`);
});
it('DOM', async () => {
await expect(root).dom.to.be.equalSnapshot();
});

testA11yTreeSnapshot(html`<sbb-dialog-actions></sbb-dialog-actions>`);
it('Shadow DOM', async () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});

testA11yTreeSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};

snapshots["sbb-dialog-content renders DOM"] =
`<sbb-dialog-content>
Content
</sbb-dialog-content>
`;
/* end snapshot sbb-dialog-content renders DOM */

snapshots["sbb-dialog-content renders Shadow DOM"] =
`<div class="sbb-dialog-content">
<slot>
</slot>
</div>
`;
/* end snapshot sbb-dialog-content renders Shadow DOM */

snapshots["sbb-dialog-content renders A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "text",
"name": "Content"
}
]
}
</p>
`;
/* end snapshot sbb-dialog-content renders A11y tree Chrome */

snapshots["sbb-dialog-content renders A11y tree Firefox"] =
`<p>
{
"role": "document",
"name": "",
"children": [
{
"role": "text leaf",
"name": "Content"
}
]
}
</p>
`;
/* end snapshot sbb-dialog-content renders A11y tree Firefox */

28 changes: 19 additions & 9 deletions src/elements/dialog/dialog-content/dialog-content.snapshot.spec.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,27 @@
import { expect, fixture } from '@open-wc/testing';
import { expect } from '@open-wc/testing';
import { html } from 'lit/static-html.js';

import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';

import type { SbbDialogContentElement } from './dialog-content.js';
import './dialog-content.js';

describe('sbb-dialog-content', () => {
it('renders', async () => {
const root = await fixture(html`<sbb-dialog-content>Content</sbb-dialog-content>`);
describe('renders', async () => {
let root: SbbDialogContentElement;

beforeEach(async () => {
root = await fixture(html`<sbb-dialog-content>Content</sbb-dialog-content>`);
});

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

expect(root).dom.to.be.equal(`<sbb-dialog-content>Content</sbb-dialog-content>`);
it('Shadow DOM', async () => {
await expect(root).shadowDom.to.be.equalSnapshot();
});

expect(root).shadowDom.to.be.equal(`
<div class="sbb-dialog-content">
<slot></slot>
</div>
`);
testA11yTreeSnapshot();
});
});
1 change: 1 addition & 0 deletions src/elements/dialog/dialog/dialog.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,7 @@ describe('sbb-dialog with long content', () => {
await openDialog(element);

expect(element).to.have.attribute('data-state', 'opened');
await waitForCondition(() => element.hasAttribute('data-overflows'));
expect(element).to.have.attribute('data-overflows', '');
});

Expand Down
113 changes: 113 additions & 0 deletions src/elements/dialog/dialog/dialog.visual.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import { html, nothing, type TemplateResult } from 'lit';

import { describeViewports, visualDiffDefault } from '../../core/testing/private.js';

import './dialog.js';
import '../dialog-actions.js';
import '../dialog-content.js';
import '../dialog-title.js';
import '../../link/block-link.js';
import '../../button/button.js';
import '../../button/secondary-button.js';

describe(`sbb-dialog`, () => {
const negativeCases = [false, true];

const dialogTitle = (backButton = true, hideOnScroll = false): TemplateResult => html`
<sbb-dialog-title ?back-button=${backButton} ?hide-on-scroll=${hideOnScroll}>
A describing title of the dialog
</sbb-dialog-title>
`;

const dialogContent = (longContent = false): TemplateResult => html`
<sbb-dialog-content>
<p style="margin: 0">
“What really knocks me out is a book that, when you're all done reading it, you wish the
author that wrote it was a terrific friend of yours and you could call him up on the phone
whenever you felt like it. That doesn't happen much, though.” ― J.D. Salinger, The Catcher
in the Rye
</p>
${longContent
? html`
<p>
“What really knocks me out is a book that, when you're all done reading it, you wish
the author that wrote it was a terrific friend of yours and you could call him up on
the phone whenever you felt like it. That doesn't happen much, though.” ― J.D.
Salinger, The Catcher in the Rye
</p>
`
: nothing}
</sbb-dialog-content>
`;

const dialogFooter = (negative = false): TemplateResult => html`
<sbb-dialog-actions align-group="stretch" orientation="vertical" horizontal-from="medium">
<sbb-block-link
align-self="start"
icon-name="chevron-small-left-small"
href="https://www.sbb.ch/en/"
?negative=${negative}
sbb-dialog-close
>
Link
</sbb-block-link>
<sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
<sbb-button sbb-dialog-close> Confirm </sbb-button>
</sbb-dialog-actions>
`;

describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 600 }, () => {
// Negative test
for (const negative of negativeCases) {
it(
`negative=${negative}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(html`
<sbb-dialog ?negative=${negative}>
${dialogTitle()} ${dialogContent()} ${dialogFooter(negative)}
</sbb-dialog>
`);
const dialog = setup.snapshotElement.querySelector('sbb-dialog')!;
setup.withSnapshotElement(dialog);
dialog.open();
}),
);
}

it(
`no back button`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(html`
<sbb-dialog> ${dialogTitle(false)} ${dialogContent()} ${dialogFooter()} </sbb-dialog>
`);
const dialog = setup.snapshotElement.querySelector('sbb-dialog')!;
setup.withSnapshotElement(dialog);
dialog.open();
}),
);

it(
`no footer`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(html`
<sbb-dialog> ${dialogTitle()} ${dialogContent()} </sbb-dialog>
`);
const dialog = setup.snapshotElement.querySelector('sbb-dialog')!;
setup.withSnapshotElement(dialog);
dialog.open();
}),
);

it(
`long content`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(html`
<sbb-dialog> ${dialogTitle()} ${dialogContent(true)} ${dialogFooter()} </sbb-dialog>
`);
const dialog = setup.snapshotElement.querySelector('sbb-dialog')!;
setup.withSnapshotElement(dialog);
dialog.open();
}),
);
});
});

0 comments on commit a1a0dd6

Please sign in to comment.