Skip to content

Commit

Permalink
test(sbb-loading-indicator): add visual spec (#2841)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TomMenga
TomMenga authored Jun 26, 2024
1 parent 25db2e4 commit 72c51b7
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 142 deletions.
92 changes: 28 additions & 64 deletions src/elements/loading-indicator/__snapshots__/loading-indicator.snapshot.spec.snap.js
View file
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="s"
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
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
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-font-size-text-xl);' : nothing}
></sbb-loading-indicator>
`,
{ backgroundColor: color === 'white' ? 'var(--sbb-color-charcoal)' : undefined },
);
}),
);
});
});
});

0 comments on commit 72c51b7

Please sign in to comment.