Skip to content

Commit

Permalink
test(sbb-datepicker): attempt to stabilize visual regression tests (#…
Browse files Browse the repository at this point in the history 
…2833)
  • Loading branch information
@jeripeierSBB
jeripeierSBB authored Jun 26, 2024
1 parent 775d1fb commit 25db2e4
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 190 deletions.
12 changes: 11 additions & 1 deletion src/elements/core/testing/private/fixture.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { TemplateResult } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';

import { waitForLitRender } from '../wait-for-render.js';

Expand Down Expand Up @@ -87,14 +88,23 @@ export async function visualRegressionFixture<T extends HTMLElement>(
color?: string;
focusOutlineDark?: boolean;
padding?: string;
minHeight?: string;
},
): Promise<T> {
const base = tryFindBase(new Error().stack!);
const { html } = await import('lit-html');
return await fixture<T>(
html`<div
id="visual-regression-fixture-wrapper"
style=${`padding: ${wrapperStyles?.padding ?? '2rem'};background-color: ${wrapperStyles?.backgroundColor ?? 'var(--sbb-color-white)'};${wrapperStyles?.color ? `color: ${wrapperStyles?.color};` : ''}${wrapperStyles?.focusOutlineDark ? ' --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);' : ''}`}
style=${styleMap({
padding: wrapperStyles?.padding ?? '2rem',
'background-color': wrapperStyles?.backgroundColor ?? 'var(--sbb-color-white)',
color: wrapperStyles?.color,
'--sbb-focus-outline-color': wrapperStyles?.focusOutlineDark
? 'var(--sbb-focus-outline-color-dark)'
: undefined,
'min-height': wrapperStyles?.minHeight,
})}
tabindex="0"
>
${template}
Expand Down
2 changes: 1 addition & 1 deletion src/elements/core/testing/private/visual-regression-snapshot.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { visualRegressionFixture } from './fixture.js';
import { tabKey } from './keys.js';

export function imageName(test: Mocha.Runnable): string {
return test!.fullTitle().replaceAll(', ', '-').replaceAll(' ', '_');
return test!.fullTitle().replaceAll(', ', '-').replaceAll(' ', '_').replaceAll('.', '_');
}

class VisualDiffSetupBuilder {
Expand Down
92 changes: 49 additions & 43 deletions src/elements/datepicker/datepicker-next-day/datepicker-next-day.visual.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,70 @@
import { sendKeys } from '@web/test-runner-commands';
import { html, nothing } from 'lit';

import { tabKey } from '../../core/testing/private/keys.js';
import {
describeEach,
describeViewports,
visualDiffDefault,
visualDiffFocus,
visualRegressionFixture,
} from '../../core/testing/private.js';
import './datepicker-next-day.js';

import './datepicker-next-day.js';
import '../datepicker.js';
import '../../form-field.js';

describe(`sbb-datepicker-next-day`, () => {
const cases = [
{ name: 'no value', value: null },
{ name: 'with value', value: '15.02.2023' },
];
const cases = {
negative: [true, false],
value: [null, '15.02.2023'],
};

describeViewports({ viewports: ['zero', 'medium'] }, () => {
for (const state of [visualDiffDefault, visualDiffFocus]) {
it(
`standalone`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(html`<sbb-datepicker-next-day></sbb-datepicker-next-day>`);
}),
);

describeEach(cases, ({ negative, value }) => {
let root: HTMLElement;

beforeEach(async () => {
root = await visualRegressionFixture(
html`
<sbb-form-field ?negative=${negative}>
<input value=${value || nothing} />
<sbb-datepicker></sbb-datepicker>
<sbb-datepicker-next-day></sbb-datepicker-next-day>
</sbb-form-field>
`,
{ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined },
);
});

it(
`standalone ${state.name}`,
state.with(async (setup) => {
await setup.withFixture(html` <sbb-datepicker-next-day></sbb-datepicker-next-day> `);
`with form-field`,
visualDiffDefault.with(async (setup) => {
setup.withSnapshotElement(root);
}),
);

for (const inputValue of cases) {
it(
`with picker ${inputValue.name} ${state.name}`,
state.with(async (setup) => {
await setup.withFixture(html`
<div style="display: flex; gap: 1em;">
<input value="${inputValue.value || nothing}" id="datepicker-input" />
<sbb-datepicker
id="datepicker"
input="datepicker-input"
now="2023-01-12T00:00:00Z"
></sbb-datepicker>
<sbb-datepicker-next-day date-picker="datepicker"></sbb-datepicker-next-day>
</div>
`);
}),
);
it(
`with form-field focus`,
visualDiffDefault.with(async (setup) => {
setup.withSnapshotElement(root);

if (value) {
// Focus input so that with a tab press it should land on next day
setup.snapshotElement.querySelector('input')!.focus();
} else {
setup.snapshotElement.focus();
}

describeEach({ negative: [true, false] }, ({ negative }) => {
it(
`with form-field ${inputValue.name} ${state.name}`,
state.with(async (setup) => {
await setup.withFixture(html`
<sbb-form-field ?negative=${negative}>
<input value=${inputValue.value || nothing} />
<sbb-datepicker></sbb-datepicker>
<sbb-datepicker-next-day ?negative=${negative}></sbb-datepicker-next-day>
</sbb-form-field>
`);
}),
);
});
}
}
await sendKeys({ press: tabKey });
}),
);
});
});
});
50 changes: 17 additions & 33 deletions src/elements/datepicker/datepicker-previous-day/datepicker-previous-day.visual.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ import {
visualDiffDefault,
visualDiffFocus,
} from '../../core/testing/private.js';
import './datepicker-previous-day.js';

import './datepicker-previous-day.js';
import '../datepicker.js';
import '../../form-field.js';

describe(`sbb-datepicker-previous-day`, () => {
const cases = [
{ name: 'no value', value: null },
{ name: 'with value', value: '15.02.2023' },
];
const cases = {
negative: [true, false],
value: [null, '15.02.2023'],
};

describeViewports({ viewports: ['zero', 'medium'] }, () => {
for (const state of [visualDiffDefault, visualDiffFocus]) {
Expand All @@ -28,39 +28,23 @@ describe(`sbb-datepicker-previous-day`, () => {
}),
);

for (const inputValue of cases) {
describeEach(cases, ({ negative, value }) => {
it(
`with picker ${inputValue.name} ${state.name}`,
`with form-field ${state.name}`,
state.with(async (setup) => {
await setup.withFixture(html`
<div style="display: flex; gap: 1em;">
<sbb-datepicker-previous-day date-picker="datepicker"></sbb-datepicker-previous-day>
<input value="${inputValue.value || nothing}" id="datepicker-input" />
<sbb-datepicker
id="datepicker"
input="datepicker-input"
now="2023-01-12T00:00:00Z"
></sbb-datepicker>
</div>
`);
}),
);

describeEach({ negative: [true, false] }, ({ negative }) => {
it(
`with form-field ${inputValue.name} ${state.name}`,
state.with(async (setup) => {
await setup.withFixture(html`
await setup.withFixture(
html`
<sbb-form-field ?negative=${negative}>
<input value=${inputValue.value || nothing} />
<sbb-datepicker-previous-day ?negative=${negative}></sbb-datepicker-previous-day>
<input value=${value || nothing} />
<sbb-datepicker-previous-day></sbb-datepicker-previous-day>
<sbb-datepicker></sbb-datepicker>
</sbb-form-field>
`);
}),
);
});
}
`,
{ backgroundColor: negative ? 'var(--sbb-color-black)' : undefined },
);
}),
);
});
}
});
});
96 changes: 31 additions & 65 deletions src/elements/datepicker/datepicker-toggle/datepicker-toggle.visual.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,83 +5,49 @@ import {
describeViewports,
visualDiffDefault,
visualDiffFocus,
visualRegressionFixture,
} from '../../core/testing/private.js';

import './datepicker-toggle.js';
import type { SbbDatepickerToggleElement } from './datepicker-toggle.js';

import './datepicker-toggle.js';
import '../datepicker.js';
import '../../form-field.js';
import '../../calendar.js';
import type { SbbDatepickerToggleElement } from './datepicker-toggle.js';

describe(`sbb-datepicker-toggle`, () => {
describeViewports({ viewports: ['wide'] }, () => {
describe('render', () => {
let root: HTMLElement;
beforeEach(async () => {
root = await visualRegressionFixture(
html`
<div style="height: 600px;">
<div style="display: flex; gap: 1rem;">
<sbb-datepicker-toggle date-picker="datepicker" id="toggle"></sbb-datepicker-toggle>
<sbb-datepicker
id="datepicker"
input="datepicker-input"
now="2023-01-12T00:00:00Z"
></sbb-datepicker>
<input id="datepicker-input" />
</div>
</div>
`,
{
padding: '4rem',
},
);
});

for (const state of [visualDiffDefault, visualDiffFocus]) {
it(
state.name,
state.with(async (setup) => {
const toggle = root.querySelector('#toggle')! as SbbDatepickerToggleElement;
toggle.open();
setup.withSnapshotElement(root);
}),
);
}
});

describeEach({ negative: [true, false] }, ({ negative }) => {
let root: HTMLElement;
beforeEach(async () => {
root = await visualRegressionFixture(
html`
<div style="height: 600px;">
<sbb-form-field .negative=${negative}>
<sbb-datepicker-toggle id="toggle"></sbb-datepicker-toggle>
<sbb-datepicker now="2023-01-12T00:00:00Z"></sbb-datepicker>
<input />
</sbb-form-field>
</div>
`,
{
const withFormFieldTemplate = html`
<sbb-form-field ?negative=${negative}>
<sbb-datepicker-toggle id="toggle"></sbb-datepicker-toggle>
<sbb-datepicker now="2023-01-12T00:00:00Z"></sbb-datepicker>
<input />
</sbb-form-field>
`;

it(
`form field ${visualDiffDefault.name}`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(withFormFieldTemplate, {
backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
focusOutlineDark: negative,
},
);
});
minHeight: '600px',
});

const toggle =
setup.snapshotElement.querySelector<SbbDatepickerToggleElement>('#toggle')!;
toggle.open();
}),
);

for (const state of [visualDiffDefault, visualDiffFocus]) {
it(
`form field ${state.name}`,
state.with(async (setup) => {
const toggle = root.querySelector('#toggle')! as SbbDatepickerToggleElement;
toggle.open();
setup.withSnapshotElement(root);
}),
);
}
it(
`form field ${visualDiffFocus.name}`,
visualDiffFocus.with(async (setup) => {
await setup.withFixture(withFormFieldTemplate, {
backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
focusOutlineDark: negative,
});
}),
);
});
});
});
Loading

0 comments on commit 25db2e4

Please sign in to comment.