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

Feat/simplify visual regression testing #356

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Feat/simplify visual regression testing #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
28f2ffb
feat(storybook): hide all stories which start with '--visual'
remypar5 Jan 8, 2025
bb81067
chore(storybook): add clsx
remypar5 Jan 8, 2025
df927c8
feat(storybook): introduce simpler way to create vis reg tests
remypar5 Jan 8, 2025
8e9cc2f
test(storybook): apply new vis reg method to all react components
remypar5 Jan 9, 2025
2ed51dc
test(react-components): apply new setup to all components as default …
remypar5 Jan 21, 2025
12c22b2
Merge branch 'main' of github.com:nl-design-system/lux into feat/simp…
remypar5 Jan 21, 2025
582fd52
fix missing utrecht-document for some VR tests
rwittenberns Feb 5, 2025
b24fe9d
Only apply utrecht-document to components that had it specifically be…
rwittenberns Feb 10, 2025
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
2 changes: 1 addition & 1 deletion packages/storybook/config/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const config: StorybookConfig = {
managerHead(head) {
return `
${head}
<style>div[data-item-id$="--visual"] { display: none; }</style>
<style>div[data-item-id*="--visual"] { display: none; }</style>
`;
},
features: {},
Expand Down
5 changes: 3 additions & 2 deletions packages/storybook/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,16 @@
"@utrecht/form-field-error-message-css": "1.3.1",
"@utrecht/form-label-css": "1.3.0",
"@utrecht/heading-css": "1.2.0",
"@utrecht/pre-heading-css": "1.2.0",
"@utrecht/heading-group-css": "1.2.0",
"@utrecht/select-css": "1.2.0",
"@utrecht/link-css": "1.1.0",
"@utrecht/paragraph-css": "1.1.0",
"@utrecht/pre-heading-css": "1.2.0",
"@utrecht/radio-button-css": "1.3.1",
"@utrecht/select-css": "1.2.0",
"@utrecht/textbox-css": "1.3.1",
"@vitejs/plugin-react": "4.3.1",
"chromatic": "11.7.0",
"clsx": "2.1.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"require-from-string": "2.0.2",
Expand Down
15 changes: 2 additions & 13 deletions packages/storybook/src/react-components/alert/alert.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
import type { Meta, StoryObj } from '@storybook/react';
import { VisualTypes } from './visual/Types';
import { BADGES } from '../../../config/preview';
import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
import { createVisualRegressionStory, VisualRegressionTest } from '../../utils';

type Story = StoryObj<typeof meta>;

Expand Down Expand Up @@ -116,15 +116,4 @@ export const ErrorAlert: Story = {
},
};

export const Visual = createVisualRegressionStory(() => (
<>
<h4 className="utrecht-heading-3">Light</h4>
<VisualRegressionWrapper className={`lux-theme--logius-light`}>
<VisualTypes />
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<VisualRegressionWrapper className={`lux-theme--logius-dark`}>
<VisualTypes />
</VisualRegressionWrapper>
</>
));
export const Visual = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualTypes} />);
47 changes: 13 additions & 34 deletions packages/storybook/src/react-components/button/button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import tokensDefinition from '@utrecht/button-css/src/tokens.json';
import { InteractiveStates, PropertyStates } from './visual/States';
import { Appearances, Sizes } from './visual/Variants';
import { BADGES } from '../../../config/preview';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionTest } from '../../utils';

type Story = StoryObj<typeof meta>;

Expand Down Expand Up @@ -248,7 +248,7 @@ export const Busy: Story = {
parameters: {
docs: {
description: {
story: `Een busy button zet je met het \`busy\`-attribute (\`true\`/\`false\`, default: \`undefined\`). Toont een \`wait\` cursor en \`aria-busy\`-attribute. Dit gebruik je
story: `Een busy button zet je met het \`busy\`-attribute (\`true\`/\`false\`, default: \`undefined\`). Toont een \`wait\` cursor en \`aria-busy\`-attribute. Dit gebruik je
bijvoorbeeld als een gebruiker met een knop een actie in gang zet die langer kan duren, zoals een download.`,
},
},
Expand Down Expand Up @@ -327,36 +327,15 @@ export const ButtonWithIconAtPositionEnd: Story = {
export const DesignTokens = createDesignTokensStory(meta);

export const Visual = createVisualRegressionStory(() => (
<>
<h4 className="utrecht-heading-3">Light</h4>
<h5 className="utrecht-heading-4">Logius</h5>
<VisualRegressionWrapper className={`lux-theme--logius-light`}>
<Appearances />
<Sizes />
<InteractiveStates />
<PropertyStates />
</VisualRegressionWrapper>
<h5 className="utrecht-heading-4">MijnAansluitingen</h5>
<VisualRegressionWrapper className={`lux-theme--eva-light`}>
<Appearances />
<Sizes />
<InteractiveStates />
<PropertyStates />
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<h5 className="utrecht-heading-4">Logius</h5>
<VisualRegressionWrapper className={`lux-theme--logius-dark`}>
<Appearances />
<Sizes />
<InteractiveStates />
<PropertyStates />
</VisualRegressionWrapper>
<h5 className="utrecht-heading-4">MijnAansluitingen</h5>
<VisualRegressionWrapper className={`lux-theme--eva-dark`}>
<Appearances />
<Sizes />
<InteractiveStates />
<PropertyStates />
</VisualRegressionWrapper>
</>
<VisualRegressionTest
products={['eva']}
testCase={() => (
<>
<Appearances />
<Sizes />
<InteractiveStates />
<PropertyStates />
</>
)}
/>
));
22 changes: 9 additions & 13 deletions packages/storybook/src/react-components/document/document.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
import type { Meta, StoryObj } from '@storybook/react';
import tokensDefinition from './tokens.json';
import { BADGES } from '../../../config/preview';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionTest } from '../../utils';

type Story = StoryObj<typeof meta>;

Expand Down Expand Up @@ -59,16 +59,12 @@ export const Playground: Story = {
export const DesignTokens = createDesignTokensStory(meta);

export const Visual = createVisualRegressionStory(() => (
<>
<h4 className="utrecht-heading-3">Light</h4>
<VisualRegressionWrapper className={`lux-theme--logius-light`}>
<div>Lorem ipsum dolor sit amet, content staat NIET in een LuxDocument.</div>
<LuxDocument>Lorem ipsum dolor sit amet, content staat in een LuxDocument.</LuxDocument>
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<VisualRegressionWrapper className={`lux-theme--logius-dark`}>
<div>Lorem ipsum dolor sit amet, content staat NIET in een LuxDocument.</div>
<LuxDocument>Lorem ipsum dolor sit amet, content staat in een LuxDocument.</LuxDocument>
</VisualRegressionWrapper>
</>
<VisualRegressionTest
testCase={() => (
<>
<div>Lorem ipsum dolor sit amet, content staat NIET in een LuxDocument.</div>
<LuxDocument>Lorem ipsum dolor sit amet, content staat in een LuxDocument.</LuxDocument>
</>
)}
/>
));
15 changes: 2 additions & 13 deletions packages/storybook/src/react-components/form-field-checkbox/form-field-checkbox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
import type { Meta, StoryObj } from '@storybook/react';
import { VisualStates } from './visual/States';
import { BADGES } from '../../../config/preview';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionTest } from '../../utils';
import CheckboxMeta from '../checkbox/checkbox.stories';
import FormFieldDescriptionMeta from '../form-field-description/form-field-description.stories';
import FormFieldErrorMessageMeta from '../form-field-error-message/form-field-error-message.stories';
Expand Down Expand Up @@ -118,15 +118,4 @@ export const withLongTexts: Story = {

export const DesignTokens = createDesignTokensStory(meta);

export const Visual = createVisualRegressionStory(() => (
<>
<h4 className="utrecht-heading-3">Light</h4>
<VisualRegressionWrapper className={`lux-theme--logius-light`}>
<VisualStates />
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<VisualRegressionWrapper className={`lux-theme--logius-dark`}>
<VisualStates />
</VisualRegressionWrapper>
</>
));
export const Visual = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
20 changes: 2 additions & 18 deletions .../storybook/src/react-components/form-field-description/form-field-description.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import tokens from '@lux-design-system/design-tokens/dist/index.json';
import type { Meta, StoryObj } from '@storybook/react';
import { VisualStates } from './visual/States';
import { BADGES } from '../../../config/preview';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionTest } from '../../utils';

const CustomStyleBlock = () => (
<style>
Expand Down Expand Up @@ -152,20 +152,4 @@ export const LongDescription: Story = {

export const DesignTokens = createDesignTokensStory(meta);

export const Visual = createVisualRegressionStory(() => (
<>
<h4 className="utrecht-heading-3">Light</h4>
<VisualRegressionWrapper className={`lux-theme--logius-light`}>
<VisualStates />
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<VisualRegressionWrapper className={`lux-theme--logius-dark`}>
<VisualStates />
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Custom</h4>
<CustomStyleBlock />
<VisualRegressionWrapper className={`lux-theme--logius-light lux-theme--logius-custom`}>
<VisualStates />
</VisualRegressionWrapper>
</>
));
export const Visual = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
15 changes: 2 additions & 13 deletions ...rybook/src/react-components/form-field-error-message/form-field-error-message.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { forwardRef, PropsWithChildren } from 'react';
import { VisualStates } from './visual/States';
import { BADGES } from '../../../config/preview';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionTest } from '../../utils';

const WrappedLuxFormFieldErrorMessage = forwardRef<
HTMLParagraphElement,
Expand Down Expand Up @@ -77,15 +77,4 @@ export const Distanced: Story = {

export const DesignTokens = createDesignTokensStory(meta);

export const Visual = createVisualRegressionStory(() => (
<>
<h4 className="utrecht-heading-3">Light</h4>
<VisualRegressionWrapper className={`lux-theme--logius-light`}>
<VisualStates />
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<VisualRegressionWrapper className={`lux-theme--logius-dark`}>
<VisualStates />
</VisualRegressionWrapper>
</>
));
export const Visual = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
15 changes: 2 additions & 13 deletions packages/storybook/src/react-components/form-field-label/form-field-label.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { type LabelHTMLAttributes, type PropsWithChildren } from 'react';
import { VisualStates } from './visual/States';
import { BADGES } from '../../../config/preview';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
import { createDesignTokensStory, createVisualRegressionStory, VisualRegressionTest } from '../../utils';

const LuxFormFieldLabel = (
props: PropsWithChildren<LuxFormFieldLabelProps> & LabelHTMLAttributes<HTMLLabelElement>,
Expand Down Expand Up @@ -115,15 +115,4 @@ export const CheckedLabel: Story = {

export const DesignTokens = createDesignTokensStory(meta);

export const Visual = createVisualRegressionStory(() => (
<div className="utrecht-document">
<h4 className="utrecht-heading-3">Light</h4>
<VisualRegressionWrapper className={`lux-theme--logius-light`}>
<VisualStates />
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<VisualRegressionWrapper className={`lux-theme--logius-dark`}>
<VisualStates />
</VisualRegressionWrapper>
</div>
));
export const Visual = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
12 changes: 7 additions & 5 deletions packages/storybook/src/react-components/form-field-label/visual/States.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import { LuxFormFieldLabel } from '@lux-design-system/components-react';

export const VisualStates = () => (
<>
<LuxFormFieldLabel>Label</LuxFormFieldLabel>
<LuxFormFieldLabel type="checkbox">Checkbox Label</LuxFormFieldLabel>
<LuxFormFieldLabel type="radio">Radio Label</LuxFormFieldLabel>
<LuxFormFieldLabel checked>Checked Label</LuxFormFieldLabel>
<LuxFormFieldLabel disabled>Disabled Label</LuxFormFieldLabel>
<div className="utrecht-document">
<LuxFormFieldLabel>Label</LuxFormFieldLabel>
<LuxFormFieldLabel type="checkbox">Checkbox Label</LuxFormFieldLabel>
<LuxFormFieldLabel type="radio">Radio Label</LuxFormFieldLabel>
<LuxFormFieldLabel checked>Checked Label</LuxFormFieldLabel>
<LuxFormFieldLabel disabled>Disabled Label</LuxFormFieldLabel>
</div>
</>
);
15 changes: 2 additions & 13 deletions .../storybook/src/react-components/form-field-radio-group/form-field-radio-group.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { LuxFormFieldRadioGroup } from '@lux-design-system/components-react';
import { Meta, StoryObj } from '@storybook/react';
import { VisualStates } from './visual/States';
import { BADGES } from '../../../config/preview';
import { createVisualRegressionStory, VisualRegressionWrapper } from '../../utils';
import { createVisualRegressionStory, VisualRegressionTest } from '../../utils';

type Story = StoryObj<typeof meta>;

Expand Down Expand Up @@ -211,15 +211,4 @@ export const WithLongLabels: Story = {
},
};

export const Visual = createVisualRegressionStory(() => (
<div className="utrecht-document">
<h4 className="utrecht-heading-3">Light</h4>
<VisualRegressionWrapper className={`lux-theme--logius-light`}>
<VisualStates mode="light" />
</VisualRegressionWrapper>
<h4 className="utrecht-heading-3">Dark</h4>
<VisualRegressionWrapper className={`lux-theme--logius-dark`}>
<VisualStates mode="dark" />
</VisualRegressionWrapper>
</div>
));
export const Visual = createVisualRegressionStory(() => <VisualRegressionTest testCase={VisualStates} />);
64 changes: 33 additions & 31 deletions packages/storybook/src/react-components/form-field-radio-group/visual/States.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,39 @@ const options = [

export const VisualStates = ({ mode }: { mode: 'light' | 'dark' }) => (
<>
<LuxFormFieldRadioGroup name={`radiogroup-default-${mode}`} label="Radio Group" options={options} />
<LuxFormFieldRadioGroup
name={`radiogroup-descriptions-${mode}`}
label="Radio Group"
description="Description"
options={options.map((option) =>
Object.assign({}, { ...option }, { description: `Option Description ${option.value}` }),
)}
/>
<div className="pseudo-hover-all">
<LuxFormFieldRadioGroup name={`radiogroup-hover-${mode}`} label="Radio Group Hover" options={options} />
<div className="utrecht-document">
<LuxFormFieldRadioGroup name={`radiogroup-default-${mode}`} label="Radio Group" options={options} />
<LuxFormFieldRadioGroup
name={`radiogroup-descriptions-${mode}`}
label="Radio Group"
description="Description"
options={options.map((option) =>
Object.assign({}, { ...option }, { description: `Option Description ${option.value}` }),
)}
/>
<div className="pseudo-hover-all">
<LuxFormFieldRadioGroup name={`radiogroup-hover-${mode}`} label="Radio Group Hover" options={options} />
</div>
<div className="pseudo-focus-all pseudo-focus-visible-all">
<LuxFormFieldRadioGroup name={`radiogroup-hover-${mode}`} label="Radio Group Focus" options={options} />
</div>
<LuxFormFieldRadioGroup
name={`radiogroup-checked-${mode}`}
label="Radio Group Checked"
options={options.map((option) => Object.assign({}, { ...option }, { checked: option.value === '2' }))}
/>
<LuxFormFieldRadioGroup
name={`radiogroup-disabled-${mode}`}
label="Radio Group Disabled"
options={options.map((option) => Object.assign({}, { ...option }, { disabled: option.value === '2' }))}
/>
<LuxFormFieldRadioGroup
name={`radiogroup-invalid-${mode}`}
label="Radio Group Invalid"
errorMessage="Error Message"
invalid
options={options}
/>
</div>
<div className="pseudo-focus-all pseudo-focus-visible-all">
<LuxFormFieldRadioGroup name={`radiogroup-hover-${mode}`} label="Radio Group Focus" options={options} />
</div>
<LuxFormFieldRadioGroup
name={`radiogroup-checked-${mode}`}
label="Radio Group Checked"
options={options.map((option) => Object.assign({}, { ...option }, { checked: option.value === '2' }))}
/>
<LuxFormFieldRadioGroup
name={`radiogroup-disabled-${mode}`}
label="Radio Group Disabled"
options={options.map((option) => Object.assign({}, { ...option }, { disabled: option.value === '2' }))}
/>
<LuxFormFieldRadioGroup
name={`radiogroup-invalid-${mode}`}
label="Radio Group Invalid"
errorMessage="Error Message"
invalid
options={options}
/>
</>
);
Loading