Skip to content

chore: Make sure test render is consistent #2280

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

Closed
wants to merge 5 commits into from
Closed

chore: Make sure test render is consistent #2280

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c6227a7
Add sorts to make sure output is consistent
Evi-2003 Oct 31, 2025
36d1198
Add test comment that will be removed
Evi-2003 Oct 31, 2025
fd7bef2
Add the children of Menu link via the args of the story
Evi-2003 Oct 31, 2025
1cb0d88
Add delay to Menu preview for hover to render correctly
Evi-2003 Oct 31, 2025
525eec9
Remove test comment
Evi-2003 Oct 31, 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
34 changes: 19 additions & 15 deletions storybook/src/components/Menu/Menu.test.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,28 @@ export default meta
type Story = StoryObj<typeof meta>

export const Test: Story = {
render: (args) => (
<Menu {...args}>
<Menu.Link href="#" icon={<SvgPieChartFill />}>
args: {
children: [
<Menu.Link className="hover" href="#" icon={<SvgPieChartFill />} key={1}>
Instellingen
</Menu.Link>,
<Menu.Link href="#" icon={<SvgPieChartFill />} key={2}>
Dashboard
</Menu.Link>
<Menu.Link href="#" icon={<SvgPieChartFill />}>
</Menu.Link>,
<Menu.Link href="#" icon={<SvgPieChartFill />} key={3}>
Projecten
</Menu.Link>
<Menu.Link href="#" icon={<SvgPieChartFill />}>
</Menu.Link>,
<Menu.Link href="#" icon={<SvgPieChartFill />} key={4}>
Rapportages
</Menu.Link>
<Menu.Link href="#" icon={<SvgPieChartFill />}>
</Menu.Link>,
<Menu.Link href="#" icon={<SvgPieChartFill />} key={5}>
Analyses
</Menu.Link>
<Menu.Link className="hover" href="#" icon={<SvgPieChartFill />}>
Instellingen
</Menu.Link>
</Menu>
),
</Menu.Link>,
],
},
parameters: {
delay: 500,
},
render: (args) => <Menu {...args} />,
tags: ['!dev', '!autodocs'],
}
31 changes: 20 additions & 11 deletions storybook/src/utils/renderComponentVariants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const renderComponentVariants = (
const props = docInfo?.props ?? {}

// Always include a "default" variant
variants?.push('default')
const allVariants = [...(variants || []), 'default']

/**
* Maps prop types to possible values.
Expand All @@ -81,16 +81,18 @@ export const renderComponentVariants = (
return ['Kapers aan de poort, kanonskogels op de Dam: de aanval op Amsterdam']
default:
// Handles union types (e.g. "color" | "inverse")
return prop.type.value?.map((variant) => variant.value.replace(/"/g, ''))
return prop.type.value?.map((variant) => variant.value.replace(/"/g, '')).sort()
}
}

// Build a list of props and their possible values
const propsAndValues = Object.values(props as Record<string, PropType>).map((prop) => ({
name: prop.name,
propType: prop.type?.name,
values: getValues(prop),
}))
const propsAndValues = Object.values(props as Record<string, PropType>)
.sort((a, b) => a.name.localeCompare(b.name))
.map((prop) => ({
name: prop.name,
propType: prop.type?.name,
values: getValues(prop),
}))

/**
* Add special handling for some props that need specific defaults.
Expand All @@ -101,7 +103,14 @@ export const renderComponentVariants = (

// Central mapping of special-case props → default test values
const propDefaults = new Map([
['color', { hasIcon: null, name: 'color', values: [...(values ?? []), 'default'] }],
[
'color',
{
hasIcon: null,
name: 'color',
values: [...(values ?? []), 'default'].sort(),
},
],
['icon', { hasIcon: null, name: 'icon', values: [ChevronDownIcon] }],
['iconBefore', { hasIcon, name: 'iconBefore', values: [true] }],
['iconOnly', { hasIcon, name: 'iconOnly', values: [true] }],
Expand Down Expand Up @@ -146,7 +155,7 @@ export const renderComponentVariants = (
* Just render one version for each variant (default, hovered, disabled, etc.).
*/
if (completePropsWithValues.length === 0) {
const elements = variants.map((state) => (
const elements = allVariants.map((state) => (
<div key={state}>
{createElement(component, {
...args,
Expand All @@ -173,9 +182,9 @@ export const renderComponentVariants = (
.filter(({ name }) => name !== sizes.sizeName)
.flatMap(({ hasIcon, name, values }) => {
return sizeArray.flatMap((size) =>
variants.flatMap((state) =>
allVariants.flatMap((state) =>
(values ?? []).flatMap((variant) => {
const key = `${size}${name}${variant}${state}`
const key = `${size ?? 'none'}-${name}-${String(variant)}-${state}`

return (
<div
Expand Down
Loading