-
Notifications
You must be signed in to change notification settings - Fork 93
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.
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
CSF is great, but it lacks an important feature for visual testing #127
Comments
There will be some new development when it comes to test automation with Ladle. Not using |
Came to say the same thing; we have a setup where we autogenerate story variants with different themes, color modes, and sometimes combinations of props that don't need a proper story but should be snapshotted: export function snapshotVariantsForVisualTesting(stories: DSIStories, options: DSIStoryConfig<any>) {
stories.forEach(([name, Story]) => {
// create unique suite instances for each so we can compose decorators per-story
const suite = storiesOf('Variants', module);
Story.decorators?.forEach((decorator) => suite.addDecorator(decorator));
options.decorators?.forEach((decorator) => suite.addDecorator(decorator));
const baseProps = {
...(options.argTypes
? Object.entries(options.argTypes).reduce(
// @ts-ignore
(map, [key, value]) => ((map[key as keyof Props] = 'action' in value ? value : value.defaultValue), map),
{} as Record<string, unknown>
)
: undefined),
...options.args!,
...Story.args!,
};
const argTypes = { ...options.argTypes, ...Story.argTypes };
const shouldSnapshotAlternateThemes =
Story.snapshotAlternateThemes !== undefined ? Story.snapshotAlternateThemes : options.snapshotAlternateThemes;
const shouldSnapshotDarkMode =
Story.snapshotDarkMode !== undefined ? Story.snapshotDarkMode : options.snapshotDarkMode;
const shouldSnapshotPropVariants = (
Story.snapshotPropVariants !== undefined
? { ...options.snapshotPropVariants, ...Story.snapshotPropVariants }
: options.snapshotPropVariants
) as { [key: string]: any[] };
if (shouldSnapshotPropVariants) {
Object.entries(shouldSnapshotPropVariants).forEach(([key, value]) => {
value.forEach((propValue) => {
suite.add(
`${name} [prop "${key}" ${propValue}]`,
(props: any) => (
<Story
{...merge(baseProps, props, {
[key]: argTypes[key]?.mapping ? argTypes[key]?.mapping[propValue] : propValue,
})}
/>
),
Story.parameters
);
});
});
}
if (shouldSnapshotDarkMode) {
suite.add(
`${name} [Dark Mode]`,
(props: any) => (
<DarkMode>
<Story {...merge(baseProps, props)} />
</DarkMode>
),
Story.parameters
);
if (shouldSnapshotPropVariants) {
Object.entries(shouldSnapshotPropVariants).forEach(([key, value]) => {
const variants = Array.isArray(value) ? value : ([] as any[]).concat(value);
variants.forEach((propValue) => {
suite.add(
`${name} [Dark Mode] [prop "${key}" ${propValue}]`,
(props: any) => (
<DarkMode>
<Story
{...merge(baseProps, props, {
[key]: argTypes[key]?.mapping ? argTypes[key]?.mapping[propValue] : propValue,
})}
/>
</DarkMode>
),
Story.parameters
);
});
});
}
}
if (shouldSnapshotAlternateThemes) {
otherThemes.forEach(([themeName, theme]) => {
suite.add(
`${name} [${themeName} Theme]`,
(props: any) => (
<DSStyleProvider theme={theme}>
<Story {...merge(baseProps, props)} />
</DSStyleProvider>
),
Story.parameters
);
if (shouldSnapshotDarkMode) {
suite.add(
`${name} [${themeName} Theme] [Dark Mode]`,
(props: any) => (
<DSStyleProvider theme={theme}>
<DarkMode>
<Story {...merge(baseProps, props)} />
</DarkMode>
</DSStyleProvider>
),
Story.parameters
);
}
});
}
});
} A first-party way to do this inside CSF would be fantastic, perhaps an optional transformer on the default export that allows for generation of variants? |
Our rationale for moving away from This enables significant optimizations, especially for large storybooks. It also allows us to extract story metadata in Node, which can be brittle in JSDom. We're also looking at several different alternative approaches to satisfy the use cases listed here and in Storybook's corresponding issue storybookjs/storybook#9828, and will be creating an RFC once we think we've got a suitable answer to Here are a few different directions we're considering:
I'd also love to hear @tajo 's take on things! |
💯 This is exactly the reason why Ladle doesn't and can't have When it comes to snapshot testing including different variants of your stories, you can do it already. Ladle serializes all its state into the URL including things like controls, theme and RTL. So if you are running some Playwright script opening stories and taking their screenshots, your real problem is to generate URLs exhausting all the stories and their variants - we could provide some utilities for that. There is one obstacle - |
@tajo That makes a ton of sense. I mentioned collaborating on future iterations of CSF before--perhaps this is an area we can improve in a future iteration. It would be a disruptive change, but if it solves a key architectural problem in both tools and we had a clean solution & migration path, I could definitely be convinced. I think we'll be revisiting argTypes in 7.x, so I'll loop you in once we have something worth discussing. |
Is your feature request related to a problem? Please describe.
We heavily use Storybook in Wix for screenshot testing our library components. What current storybook supports and will not deprecate until find a solution is
storiesOf
function where you can generate a bunch of stories by using arrays of objects. With CSF you cannot achieve this.Consider this story file as a way to render props permutation test stories:
This generates 3 stories and adding another one is easy for the next contributor.
Describe the solution you'd like
I think just by supporting similar method like
storiesOf
ladle could be used for such cases or alternative solution that would support generating bunch of stories in a file based on some data structure.Describe alternatives you've considered
For now storybook is the clear alternative or we would need to create some sort of story files with CSF generator based on mentioned data structure.
The text was updated successfully, but these errors were encountered: