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-slider): add visual tests #2896

Merged
merged 4 commits into from
Jul 8, 2024
Merged

test(sbb-slider): add visual tests #2896

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9a5fd01
test: add visual tests
DavideMininni-Fincons Jul 5, 2024
271fc96
chore: minor fix
DavideMininni-Fincons Jul 5, 2024
90e50e8
fix: review
DavideMininni-Fincons Jul 5, 2024
afdf97e
fix: review
DavideMininni-Fincons Jul 8, 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
180 changes: 90 additions & 90 deletions src/elements/slider/__snapshots__/slider.snapshot.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};

snapshots["sbb-slider should render DOM"] =
snapshots["sbb-slider renders DOM"] =
`<sbb-slider
aria-valuemax="100"
aria-valuemin="0"
Expand All @@ -13,9 +13,9 @@ snapshots["sbb-slider should render DOM"] =
>
</sbb-slider>
`;
/* end snapshot sbb-slider should render DOM */
/* end snapshot sbb-slider renders DOM */

snapshots["sbb-slider should render Shadow DOM"] =
snapshots["sbb-slider renders Shadow DOM"] =
`<div class="sbb-slider__height-container">
<div class="sbb-slider__wrapper">
<slot name="prefix">
Expand Down Expand Up @@ -44,30 +44,9 @@ snapshots["sbb-slider should render Shadow DOM"] =
</div>
</div>
`;
/* end snapshot sbb-slider should render Shadow DOM */
/* end snapshot sbb-slider renders Shadow DOM */

snapshots["sbb-slider should render A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"valuemin": 0,
"valuemax": 100,
"orientation": "horizontal",
"value": 1
}
]
}
</p>
`;
/* end snapshot sbb-slider should render A11y tree Chrome */

snapshots["sbb-slider should render with properties DOM"] =
snapshots["sbb-slider renders with properties DOM"] =
`<sbb-slider
aria-valuemax="500"
aria-valuemin="0"
Expand All @@ -83,9 +62,9 @@ snapshots["sbb-slider should render with properties DOM"] =
>
</sbb-slider>
`;
/* end snapshot sbb-slider should render with properties DOM */
/* end snapshot sbb-slider renders with properties DOM */

snapshots["sbb-slider should render with properties Shadow DOM"] =
snapshots["sbb-slider renders with properties Shadow DOM"] =
`<div class="sbb-slider__height-container">
<div class="sbb-slider__wrapper">
<slot name="prefix">
Expand Down Expand Up @@ -128,30 +107,9 @@ snapshots["sbb-slider should render with properties Shadow DOM"] =
</div>
</div>
`;
/* end snapshot sbb-slider should render with properties Shadow DOM */

snapshots["sbb-slider should render with properties A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"valuemin": 0,
"valuemax": 500,
"orientation": "horizontal",
"value": 100
}
]
}
</p>
`;
/* end snapshot sbb-slider should render with properties A11y tree Chrome */
/* end snapshot sbb-slider renders with properties Shadow DOM */

snapshots["sbb-slider should render disabled DOM"] =
snapshots["sbb-slider renders disabled DOM"] =
`<sbb-slider
aria-disabled="true"
aria-valuemax="500"
Expand All @@ -168,9 +126,9 @@ snapshots["sbb-slider should render disabled DOM"] =
>
</sbb-slider>
`;
/* end snapshot sbb-slider should render disabled DOM */
/* end snapshot sbb-slider renders disabled DOM */

snapshots["sbb-slider should render disabled Shadow DOM"] =
snapshots["sbb-slider renders disabled Shadow DOM"] =
`<div class="sbb-slider__height-container">
<div class="sbb-slider__wrapper">
<slot name="prefix">
Expand Down Expand Up @@ -214,31 +172,9 @@ snapshots["sbb-slider should render disabled Shadow DOM"] =
</div>
</div>
`;
/* end snapshot sbb-slider should render disabled Shadow DOM */

snapshots["sbb-slider should render disabled A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"disabled": true,
"valuemin": 0,
"valuemax": 500,
"orientation": "horizontal",
"value": 100
}
]
}
</p>
`;
/* end snapshot sbb-slider should render disabled A11y tree Chrome */
/* end snapshot sbb-slider renders disabled Shadow DOM */

snapshots["sbb-slider should render readonly DOM"] =
snapshots["sbb-slider renders readonly DOM"] =
`<sbb-slider
aria-readonly="true"
aria-valuemax="500"
Expand All @@ -256,9 +192,9 @@ snapshots["sbb-slider should render readonly DOM"] =
>
</sbb-slider>
`;
/* end snapshot sbb-slider should render readonly DOM */
/* end snapshot sbb-slider renders readonly DOM */

snapshots["sbb-slider should render readonly Shadow DOM"] =
snapshots["sbb-slider renders readonly Shadow DOM"] =
`<div class="sbb-slider__height-container">
<div class="sbb-slider__wrapper">
<slot name="prefix">
Expand Down Expand Up @@ -302,9 +238,73 @@ snapshots["sbb-slider should render readonly Shadow DOM"] =
</div>
</div>
`;
/* end snapshot sbb-slider should render readonly Shadow DOM */
/* end snapshot sbb-slider renders readonly Shadow DOM */

snapshots["sbb-slider renders A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"valuemin": 0,
"valuemax": 100,
"orientation": "horizontal",
"value": 1
}
]
}
</p>
`;
/* end snapshot sbb-slider renders A11y tree Chrome */

snapshots["sbb-slider renders with properties A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"valuemin": 0,
"valuemax": 500,
"orientation": "horizontal",
"value": 100
}
]
}
</p>
`;
/* end snapshot sbb-slider renders with properties A11y tree Chrome */

snapshots["sbb-slider renders disabled A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "slider",
"name": "",
"valuetext": "",
"disabled": true,
"valuemin": 0,
"valuemax": 500,
"orientation": "horizontal",
"value": 100
}
]
}
</p>
`;
/* end snapshot sbb-slider renders disabled A11y tree Chrome */

snapshots["sbb-slider should render readonly A11y tree Chrome"] =
snapshots["sbb-slider renders readonly A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
Expand All @@ -323,9 +323,9 @@ snapshots["sbb-slider should render readonly A11y tree Chrome"] =
}
</p>
`;
/* end snapshot sbb-slider should render readonly A11y tree Chrome */
/* end snapshot sbb-slider renders readonly A11y tree Chrome */

snapshots["sbb-slider should render A11y tree Firefox"] =
snapshots["sbb-slider renders A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand All @@ -341,9 +341,9 @@ snapshots["sbb-slider should render A11y tree Firefox"] =
}
</p>
`;
/* end snapshot sbb-slider should render A11y tree Firefox */
/* end snapshot sbb-slider renders A11y tree Firefox */

snapshots["sbb-slider should render with properties A11y tree Firefox"] =
snapshots["sbb-slider renders with properties A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand All @@ -359,9 +359,9 @@ snapshots["sbb-slider should render with properties A11y tree Firefox"] =
}
</p>
`;
/* end snapshot sbb-slider should render with properties A11y tree Firefox */
/* end snapshot sbb-slider renders with properties A11y tree Firefox */

snapshots["sbb-slider should render disabled A11y tree Firefox"] =
snapshots["sbb-slider renders disabled A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand All @@ -378,9 +378,9 @@ snapshots["sbb-slider should render disabled A11y tree Firefox"] =
}
</p>
`;
/* end snapshot sbb-slider should render disabled A11y tree Firefox */
/* end snapshot sbb-slider renders disabled A11y tree Firefox */

snapshots["sbb-slider should render readonly A11y tree Firefox"] =
snapshots["sbb-slider renders readonly A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand All @@ -396,5 +396,5 @@ snapshots["sbb-slider should render readonly A11y tree Firefox"] =
}
</p>
`;
/* end snapshot sbb-slider should render readonly A11y tree Firefox */
/* end snapshot sbb-slider renders readonly A11y tree Firefox */

8 changes: 4 additions & 4 deletions src/elements/slider/slider.snapshot.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import './slider.js';
describe(`sbb-slider`, () => {
let element: SbbSliderElement;

describe('should render', async () => {
describe('renders', async () => {
beforeEach(async () => {
element = await fixture(html`<sbb-slider value="1"></sbb-slider>`);
});
Expand All @@ -26,7 +26,7 @@ describe(`sbb-slider`, () => {
testA11yTreeSnapshot();
});

describe('should render with properties', async () => {
describe('renders with properties', async () => {
beforeEach(async () => {
element = await fixture(
html`<sbb-slider
Expand All @@ -50,7 +50,7 @@ describe(`sbb-slider`, () => {
testA11yTreeSnapshot();
});

describe('should render disabled', async () => {
describe('renders disabled', async () => {
beforeEach(async () => {
element = await fixture(
html`<sbb-slider
Expand All @@ -75,7 +75,7 @@ describe(`sbb-slider`, () => {
testA11yTreeSnapshot();
});

describe('should render readonly', async () => {
describe('renders readonly', async () => {
beforeEach(async () => {
element = await fixture(
html`<sbb-slider
Expand Down
Loading
Loading