Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test(sbb-loading-indicator): add visual spec #2841

Merged
merged 2 commits into from
Jun 26, 2024
Merged

test(sbb-loading-indicator): add visual spec #2841

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e14fefc
test(sbb-loading-indicator): add visual spec
TomMenga Jun 26, 2024
84ffa1e
test(sbb-loading-indicator): pr feedbacks
TomMenga Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 28 additions & 64 deletions src/elements/loading-indicator/__snapshots__/loading-indicator.snapshot.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,19 @@
/* @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>
snapshots["sbb-loading-indicator renders with variant `window` DOM"] =
`<sbb-loading-indicator
aria-busy="true"
color="default"
role="progressbar"
size="m"
variant="window"
>
</sbb-loading-indicator>
`;
/* end snapshot sbb-loading-indicator renders with variant `window` and color smoke */
/* end snapshot sbb-loading-indicator renders with variant `window` DOM */

snapshots["sbb-loading-indicator renders with variant `window` and color white"] =
snapshots["sbb-loading-indicator renders with variant `window` Shadow DOM"] =
`<span class="sbb-loading-indicator">
<span class="sbb-loading-indicator__animated-element">
<span>
Expand All @@ -65,49 +33,45 @@ snapshots["sbb-loading-indicator renders with variant `window` and color white"]
</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` */
/* end snapshot sbb-loading-indicator renders with variant `window` Shadow DOM */

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>
snapshots["sbb-loading-indicator renders with variant `circle` DOM"] =
`<sbb-loading-indicator
aria-busy="true"
color="default"
role="progressbar"
size="s"
variant="circle"
>
</sbb-loading-indicator>
`;
/* end snapshot sbb-loading-indicator renders with variant `circle` and color smoke */
/* end snapshot sbb-loading-indicator renders with variant `circle` DOM */

snapshots["sbb-loading-indicator renders with variant `circle` and color white"] =
snapshots["sbb-loading-indicator renders with variant `circle` Shadow DOM"] =
`<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 */
/* end snapshot sbb-loading-indicator renders with variant `circle` Shadow DOM */

snapshots["sbb-loading-indicator A11y tree Chrome"] =
snapshots["sbb-loading-indicator renders with variant `window` A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": ""
}
</p>
`;
/* end snapshot sbb-loading-indicator A11y tree Chrome */
/* end snapshot sbb-loading-indicator renders with variant `window` A11y tree Chrome */

snapshots["sbb-loading-indicator A11y tree Firefox"] =
snapshots["sbb-loading-indicator renders with variant `window` A11y tree Firefox"] =
`<p>
{
"role": "document",
"name": ""
}
</p>
`;
/* end snapshot sbb-loading-indicator A11y tree Firefox */
/* end snapshot sbb-loading-indicator renders with variant `window` A11y tree Firefox */

105 changes: 27 additions & 78 deletions src/elements/loading-indicator/loading-indicator.snapshot.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,94 +3,43 @@ import { html } from 'lit/static-html.js';

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

import type { SbbLoadingIndicatorElement } from './loading-indicator.js';
import './loading-indicator.js';

describe(`sbb-loading-indicator`, () => {
it('renders with variant `window`', async () => {
const root = await fixture(
html`<sbb-loading-indicator variant="window" size="m"></sbb-loading-indicator>`,
);
let element: SbbLoadingIndicatorElement;

expect(root).dom.to.be.equal(
`
<sbb-loading-indicator variant="window" size="m" color="default" role="progressbar" aria-busy='true'>
</sbb-loading-indicator>
`,
);
await expect(root).shadowDom.to.be.equalSnapshot();
});

it('renders with variant `window` and color smoke', async () => {
const root = await fixture(
html`<sbb-loading-indicator variant="window" size="m" color="smoke"></sbb-loading-indicator>`,
);
describe('renders with variant `window`', () => {
beforeEach(async () => {
element = await fixture(
html`<sbb-loading-indicator variant="window"></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>
`,
);
await expect(root).shadowDom.to.be.equalSnapshot();
});
it('DOM', async () => {
await expect(element).dom.to.be.equalSnapshot();
});

it('renders with variant `window` and color white', async () => {
const root = await fixture(
html`<sbb-loading-indicator variant="window" size="m" color="white"></sbb-loading-indicator>`,
);
it('Shadow DOM', async () => {
await expect(element).shadowDom.to.be.equalSnapshot();
});

expect(root).dom.to.be.equal(
`
<sbb-loading-indicator variant="window" size="m" color="white" role="progressbar" aria-busy='true'>
</sbb-loading-indicator>
`,
);
await expect(root).shadowDom.to.be.equalSnapshot();
testA11yTreeSnapshot();
});

it('renders with variant `circle`', async () => {
const root = await fixture(
html`<sbb-loading-indicator variant="circle"></sbb-loading-indicator>`,
);

expect(root).dom.to.be.equal(
`
<sbb-loading-indicator variant="circle" size="s" color="default" role="progressbar" aria-busy="true">
</sbb-loading-indicator>
`,
);
await expect(root).shadowDom.to.be.equalSnapshot();
});
describe('renders with variant `circle`', () => {
beforeEach(async () => {
element = await fixture(
html`<sbb-loading-indicator variant="circle"></sbb-loading-indicator>`,
);
});

it('renders with variant `circle` and color smoke', async () => {
const root = await fixture(
html`<sbb-loading-indicator variant="circle" color="smoke"></sbb-loading-indicator>`,
);
it('DOM', async () => {
await expect(element).dom.to.be.equalSnapshot();
});

expect(root).dom.to.be.equal(
`
<sbb-loading-indicator variant="circle" color="smoke" size="s" role="progressbar" aria-busy="true">
</sbb-loading-indicator>
`,
);
await expect(root).shadowDom.to.be.equalSnapshot();
it('Shadow DOM', async () => {
await expect(element).shadowDom.to.be.equalSnapshot();
});
});

it('renders with variant `circle` and color white', async () => {
const root = await fixture(
html`<sbb-loading-indicator variant="circle" color="white"></sbb-loading-indicator>`,
);

expect(root).dom.to.be.equal(
`
<sbb-loading-indicator variant="circle" color="white" size="s" role="progressbar" aria-busy="true">
</sbb-loading-indicator>
`,
);
await expect(root).shadowDom.to.be.equalSnapshot();
});

testA11yTreeSnapshot(
html`<sbb-loading-indicator variant="window" size="m"></sbb-loading-indicator>`,
);
});
48 changes: 48 additions & 0 deletions src/elements/loading-indicator/loading-indicator.visual.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { html, nothing } from 'lit';

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

import './loading-indicator.js';

describe(`sbb-loading-indicator`, () => {
const cases = {
color: ['default', 'smoke', 'white'],
size: ['s', 'l'],
};

describeViewports({ viewports: ['zero'] }, () => {
describeEach(cases, ({ color, size }) => {
it(
`variant=window`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(
html`
<sbb-loading-indicator
variant="window"
color=${color}
size=${size}
></sbb-loading-indicator>
`,
{ backgroundColor: color === 'white' ? 'var(--sbb-color-charcoal)' : undefined },
);
}),
);

it(
`variant=circle`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(
html`
<sbb-loading-indicator
variant="circle"
color=${color}
style=${size === 'l' ? 'font-size: var(--sbb-typo-scale-2x);' : nothing}
TomMenga marked this conversation as resolved.
Show resolved Hide resolved
></sbb-loading-indicator>
`,
{ backgroundColor: color === 'white' ? 'var(--sbb-color-charcoal)' : undefined },
);
}),
);
});
});
});
Loading