Skip to content

Commit

Permalink
test(sbb-link): add visual tests (#2844)
Browse files Browse the repository at this point in the history
  • Loading branch information
DavideMininni-Fincons authored Jun 27, 2024
1 parent 411dfb0 commit 51d1844
Show file tree
Hide file tree
Showing 18 changed files with 512 additions and 167 deletions.
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};

snapshots["sbb-block-link-button renders - DOM"] =
snapshots["sbb-block-link-button renders DOM"] =
`<sbb-block-link-button
data-action=""
data-button=""
Expand All @@ -28,9 +28,9 @@ snapshots["sbb-block-link-button renders - DOM"] =
Travelcards & tickets.
</sbb-block-link-button>
`;
/* end snapshot sbb-block-link-button renders - DOM */
/* end snapshot sbb-block-link-button renders DOM */

snapshots["sbb-block-link-button renders - Shadow DOM"] =
snapshots["sbb-block-link-button renders Shadow DOM"] =
`<span class="sbb-action-base sbb-block-link-button">
<span class="sbb-link__icon">
<slot name="icon">
Expand All @@ -40,9 +40,9 @@ snapshots["sbb-block-link-button renders - Shadow DOM"] =
</slot>
</span>
`;
/* end snapshot sbb-block-link-button renders - Shadow DOM */
/* end snapshot sbb-block-link-button renders Shadow DOM */

snapshots["sbb-block-link-button A11y tree Chrome"] =
snapshots["sbb-block-link-button renders A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
Expand All @@ -56,9 +56,9 @@ snapshots["sbb-block-link-button A11y tree Chrome"] =
}
</p>
`;
/* end snapshot sbb-block-link-button A11y tree Chrome */
/* end snapshot sbb-block-link-button renders A11y tree Chrome */

snapshots["sbb-block-link-button A11y tree Firefox"] =
snapshots["sbb-block-link-button renders A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand All @@ -72,5 +72,5 @@ snapshots["sbb-block-link-button A11y tree Firefox"] =
}
</p>
`;
/* end snapshot sbb-block-link-button A11y tree Firefox */
/* end snapshot sbb-block-link-button renders A11y tree Firefox */

Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,31 @@ import './block-link-button.js';
describe(`sbb-block-link-button`, () => {
let element: SbbBlockLinkButtonElement;

beforeEach(async () => {
element = await fixture(
html` <sbb-block-link-button
icon-placement="end"
size="m"
negative
name="name"
type="submit"
form="formid"
>
<sbb-icon name="chevron-small-right-small" slot="icon"></sbb-icon>
Travelcards &amp; tickets.
</sbb-block-link-button>`,
);
describe('renders', () => {
beforeEach(async () => {
element = await fixture(
html` <sbb-block-link-button
icon-placement="end"
size="m"
negative
name="name"
type="submit"
form="formid"
>
<sbb-icon name="chevron-small-right-small" slot="icon"></sbb-icon>
Travelcards &amp; tickets.
</sbb-block-link-button>`,
);
});

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

it('Shadow DOM', async () => {
await expect(element).shadowDom.to.be.equalSnapshot();
});

testA11yTreeSnapshot();
});

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

it('renders - Shadow DOM', async () => {
await expect(element).shadowDom.to.be.equalSnapshot();
});

testA11yTreeSnapshot();
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { html, nothing } from 'lit';

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

import './block-link-button.js';

describe(`sbb-block-link-button`, () => {
const iconState = {
iconPlacement: ['start', 'end'],
slotted: [false, true],
};

describeViewports({ viewports: ['zero', 'medium'] }, () => {
for (const negative of [true, false]) {
for (const state of visualDiffStandardStates) {
it(
state.name,
state.with((setup) => {
setup.withFixture(
html`<sbb-block-link-button ?negative=${negative}
>Travelcards & tickets</sbb-block-link-button
>`,
{
backgroundColor: negative ? 'var(--sbb-color-charcoal)' : undefined,
},
);
}),
);
}
}

describeEach(iconState, ({ iconPlacement, slotted }) => {
it(
visualDiffDefault.name,
visualDiffDefault.with((setup) => {
setup.withFixture(html`
<sbb-block-link-button
icon-name=${slotted ? nothing : 'chevron-small-right-small'}
icon-placement=${iconPlacement}
>
${slotted
? html`<sbb-icon slot="icon" name="chevron-small-left-small"></sbb-icon>`
: nothing}
Travelcards & tickets
</sbb-block-link-button>
`);
}),
);
});

for (const size of ['xs', 's', 'm']) {
it(
`size=${size} ${visualDiffDefault.name}`,
visualDiffDefault.with((setup) => {
setup.withFixture(
html`<sbb-block-link-button size=${size}>Travelcards & tickets</sbb-block-link-button>`,
);
}),
);
}

it(
`width=fixed ${visualDiffDefault.name}`,
visualDiffDefault.with((setup) => {
setup.withFixture(
html`<sbb-block-link-button icon-name="chevron-small-right-small" style="width: 200px;">
A lot of link text to show what happens if there is not enough space.
</sbb-block-link-button>`,
);
}),
);
});
});
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};

snapshots["sbb-block-link-static renders - DOM"] =
snapshots["sbb-block-link-static renders DOM"] =
`<sbb-block-link-static
data-action=""
data-sbb-link=""
Expand All @@ -21,9 +21,9 @@ snapshots["sbb-block-link-static renders - DOM"] =
Travelcards & tickets.
</sbb-block-link-static>
`;
/* end snapshot sbb-block-link-static renders - DOM */
/* end snapshot sbb-block-link-static renders DOM */

snapshots["sbb-block-link-static renders - Shadow DOM"] =
snapshots["sbb-block-link-static renders Shadow DOM"] =
`<span class="sbb-action-base sbb-block-link-static">
<span class="sbb-link__icon">
<slot name="icon">
Expand All @@ -33,9 +33,9 @@ snapshots["sbb-block-link-static renders - Shadow DOM"] =
</slot>
</span>
`;
/* end snapshot sbb-block-link-static renders - Shadow DOM */
/* end snapshot sbb-block-link-static renders Shadow DOM */

snapshots["sbb-block-link-static A11y tree Chrome"] =
snapshots["sbb-block-link-static renders A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
Expand All @@ -49,9 +49,9 @@ snapshots["sbb-block-link-static A11y tree Chrome"] =
}
</p>
`;
/* end snapshot sbb-block-link-static A11y tree Chrome */
/* end snapshot sbb-block-link-static renders A11y tree Chrome */

snapshots["sbb-block-link-static A11y tree Firefox"] =
snapshots["sbb-block-link-static renders A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand All @@ -65,5 +65,5 @@ snapshots["sbb-block-link-static A11y tree Firefox"] =
}
</p>
`;
/* end snapshot sbb-block-link-static A11y tree Firefox */
/* end snapshot sbb-block-link-static renders A11y tree Firefox */

Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,30 @@ import '../../icon.js';
describe(`sbb-block-link-static`, () => {
let element: SbbBlockLinkStaticElement;

beforeEach(async () => {
element = await fixture(
html` <sbb-block-link-static icon-placement="end" size="m">
<sbb-icon
aria-hidden="true"
data-namespace="default"
name="chevron-small-right-small"
role="img"
slot="icon"
></sbb-icon>
Travelcards &amp; tickets.
</sbb-block-link-static>`,
);
});
describe('renders', () => {
beforeEach(async () => {
element = await fixture(
html` <sbb-block-link-static icon-placement="end" size="m">
<sbb-icon
aria-hidden="true"
data-namespace="default"
name="chevron-small-right-small"
role="img"
slot="icon"
></sbb-icon>
Travelcards &amp; tickets.
</sbb-block-link-static>`,
);
});

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

it('renders - Shadow DOM', async () => {
await expect(element).shadowDom.to.be.equalSnapshot();
});
it('Shadow DOM', async () => {
await expect(element).shadowDom.to.be.equalSnapshot();
});

testA11yTreeSnapshot();
testA11yTreeSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { html, nothing } from 'lit';

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

import './block-link-static.js';

describe(`sbb-block-link-static`, () => {
const iconState = {
iconPlacement: ['start', 'end'],
slotted: [false, true],
};

describeViewports({ viewports: ['zero', 'medium'] }, () => {
for (const negative of [true, false]) {
for (const state of [visualDiffDefault, visualDiffActive, visualDiffHover]) {
it(
state.name,
state.with((setup) => {
setup.withFixture(
html` <sbb-block-link-static ?negative="${negative}"
>Travelcards & tickets</sbb-block-link-static
>`,
{
backgroundColor: negative ? 'var(--sbb-color-charcoal)' : undefined,
},
);
}),
);
}
}

describeEach(iconState, ({ iconPlacement, slotted }) => {
it(
visualDiffDefault.name,
visualDiffDefault.with((setup) => {
setup.withFixture(html`
<sbb-block-link-static
icon-name="${slotted ? nothing : 'chevron-small-right-small'}"
icon-placement="${iconPlacement}"
>
${slotted
? html` <sbb-icon slot="icon" name="chevron-small-left-small"></sbb-icon>`
: nothing}
Travelcards & tickets
</sbb-block-link-static>
`);
}),
);
});

for (const size of ['xs', 's', 'm']) {
it(
`size=${size} ${visualDiffDefault.name}`,
visualDiffDefault.with((setup) => {
setup.withFixture(
html` <sbb-block-link-static size="${size}"
>Travelcards & tickets</sbb-block-link-static
>`,
);
}),
);
}

it(
`width=fixed ${visualDiffDefault.name}`,
visualDiffDefault.with((setup) => {
setup.withFixture(
html` <sbb-block-link-static icon-name="chevron-small-right-small" style="width: 200px;">
A lot of link text to show what happens if there is not enough space.
</sbb-block-link-static>`,
);
}),
);
});
});
Loading

0 comments on commit 51d1844

Please sign in to comment.