GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 18:41:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Simplify snapshot tests

Browse Source
This commit is contained in:
Michael Shilman 2019-12-02 09:41:03 +08:00
parent df0096e582
commit 081038b6fb
10 changed files with 33 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/export-destructuring.input.js
View File

@ -1,16 +1,11 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import ComponentRow, { PureComponentRow } from './ComponentRow';
import ComponentRow from './ComponentRow';
import * as SpecRowStories from './SpecRow.stories';
import Table from '../../components/Table';
const specNames = ['Default', 'Low data', 'empty', 'something', 'extra one'];
export const { actions } = SpecRowStories;
storiesOf('Webapp screens/Build/ComponentRow', module).add('pending', () => (
storiesOf('ComponentRow', module).add('pending', () => (
<ComponentRow snapshots={snapshots.pending} buildNumber={2} {...actions} />
));

9
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/export-destructuring.output.snapshot
View File

@ -3,18 +3,13 @@
exports[`storiesof-to-csf transforms correctly using "export-destructuring.input.js" data 1`] = `
"/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { action } from '@storybook/addon-actions';
import ComponentRow, { PureComponentRow } from './ComponentRow';
import ComponentRow from './ComponentRow';
import * as SpecRowStories from './SpecRow.stories';
import Table from '../../components/Table';
const specNames = ['Default', 'Low data', 'empty', 'something', 'extra one'];
export const { actions } = SpecRowStories;
export default {
title: 'Webapp screens/Build/ComponentRow',
title: 'ComponentRow',
excludeStories: ['actions'],
};

41
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/export-function.input.js
View File

@ -1,47 +1,12 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
import ComponentItem from './ComponentItem';
import {
componentRepresentations as imageComponentRepresentations,
makeSimpleComponentRepresentation as imageMakeSimpleComponentRepresentation,
} from './ComponentRepresentationImage.stories';
function Item({ ...props }) {
return (
<div
style={{
display: 'inline-block',
verticalAlign: 'top',
width: 230,
outline: '1px dotted red',
margin: '7.5px',
}}
>
<ComponentItem {...props} />
</div>
);
}
// eslint-disable-next-line import/prefer-default-export
export const componentRepresentations = Object.entries(imageComponentRepresentations).reduce(
(acc, [key, componentRepresentation]) => ({
...acc,
[key]: {
...componentRepresentation,
webPath: '/component',
specCount: 3,
},
}),
{}
);
export function makeSimpleComponentRepresentation({}) {
export function someHelper() {
return 5;
}
storiesOf('Webapp components/ComponentItem', module)
storiesOf('ComponentItem', module)
.addDecorator(storyFn => <div style={{ margin: '1rem' }}>{storyFn()}</div>)
.add('loading', () => <Item loading />)
.add('in progress', () => <Item componentRepresentation={componentRepresentations.inProgress} />);
.add('loading', () => <ComponentItem loading />);

50
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/export-function.output.snapshot
View File

@ -3,63 +3,21 @@
exports[`storiesof-to-csf transforms correctly using "export-function.input.js" data 1`] = `
"/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import ComponentItem from './ComponentItem';
import {
componentRepresentations as imageComponentRepresentations,
makeSimpleComponentRepresentation as imageMakeSimpleComponentRepresentation,
} from './ComponentRepresentationImage.stories';
function Item({ ...props }) {
return (
<div
style={{
display: 'inline-block',
verticalAlign: 'top',
width: 230,
outline: '1px dotted red',
margin: '7.5px',
}}
>
<ComponentItem {...props} />
</div>
);
}
// eslint-disable-next-line import/prefer-default-export
export const componentRepresentations = Object.entries(imageComponentRepresentations).reduce(
(acc, [key, componentRepresentation]) => ({
...acc,
[key]: {
...componentRepresentation,
webPath: '/component',
specCount: 3,
},
}),
{}
);
export function makeSimpleComponentRepresentation({}) {
export function someHelper() {
return 5;
}
export default {
title: 'Webapp components/ComponentItem',
title: 'ComponentItem',
decorators: [storyFn => <div style={{ margin: '1rem' }}>{storyFn()}</div>],
excludeStories: ['componentRepresentations', 'makeSimpleComponentRepresentation'],
excludeStories: ['someHelper'],
};
export const Loading = () => <Item loading />;
export const Loading = () => <ComponentItem loading />;
Loading.story = {
name: 'loading',
};
export const InProgress = () => (
<Item componentRepresentation={componentRepresentations.inProgress} />
);
InProgress.story = {
name: 'in progress',
};"
`;

28
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/export-names.input.js
View File

@ -1,32 +1,14 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import FlexCenter from './FlexCenter';
import { specs, urls } from './LiveView.stories';
import { ignoredRegions } from './IgnoredRegions.stories';
export { specs, urls, ignoredRegions };
const CanvasWrapper = styled.div`
width: 50%;
`;
storiesOf('Webapp components/FlexCenter', module)
.addDecorator(storyFn => <CanvasWrapper>{storyFn()}</CanvasWrapper>)
.add('2:1', () => (
<FlexCenter width={200} height={100} style={{ background: 'papayawhip' }}>
<div style={{ padding: 30, background: 'hotpink' }}>2:1</div>
</FlexCenter>
))
.add('2:2', () => (
<FlexCenter width={200} height={200} style={{ background: 'papayawhip' }}>
<div style={{ padding: 30, background: 'hotpink' }}>2:2</div>
</FlexCenter>
))
.add('2:3', () => (
<FlexCenter width={200} height={300} style={{ background: 'papayawhip' }}>
<div style={{ padding: 30, background: 'hotpink' }}>2:3</div>
</FlexCenter>
));
storiesOf('FlexCenter', module).add('2:1', () => (
<FlexCenter width={200} height={100} style={{ background: 'papayawhip' }}>
<div style={{ padding: 30, background: 'hotpink' }}>2:1</div>
</FlexCenter>
));

29
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/export-names.output.snapshot
View File

@ -3,21 +3,14 @@
exports[`storiesof-to-csf transforms correctly using "export-names.input.js" data 1`] = `
"/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import styled from 'styled-components';
import FlexCenter from './FlexCenter';
import { specs, urls } from './LiveView.stories';
import { ignoredRegions } from './IgnoredRegions.stories';
export { specs, urls, ignoredRegions };
const CanvasWrapper = styled.div\`
width: 50%;
\`;
export default {
title: 'Webapp components/FlexCenter',
decorators: [storyFn => <CanvasWrapper>{storyFn()}</CanvasWrapper>],
title: 'FlexCenter',
excludeStories: ['specs', 'urls', 'ignoredRegions'],
};
@ -29,25 +22,5 @@ export const _21 = () => (
_21.story = {
name: '2:1',
};
export const _22 = () => (
<FlexCenter width={200} height={200} style={{ background: 'papayawhip' }}>
<div style={{ padding: 30, background: 'hotpink' }}>2:2</div>
</FlexCenter>
);
_22.story = {
name: '2:2',
};
export const _23 = () => (
<FlexCenter width={200} height={300} style={{ background: 'papayawhip' }}>
<div style={{ padding: 30, background: 'hotpink' }}>2:3</div>
</FlexCenter>
);
_23.story = {
name: '2:3',
};"
`;

34
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/parameters-as-var.input.js
View File

@ -1,38 +1,8 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
import { specs, urls } from './LiveView.stories';
import { ignoredRegions } from './IgnoredRegions.stories';
export { specs, urls, ignoredRegions };
import Canvas from './Canvas';
const figure = 'http://via.placeholder.com/400x350';
const captureImageSize = { width: 300, height: 300 };
const CHROMATIC_DELAY = { chromatic: { delay: 500 } };
storiesOf('Webapp components/Canvas', module)
.add(
'interactiveUrl w/ interactiveMode',
() => (
<Canvas
interactiveUrl={urls.storybook52}
interactiveMode="interactive"
figure={figure}
captureImageSize={captureImageSize}
spec={specs.basic}
showIgnoredRegions={false}
/>
),
CHROMATIC_DELAY
)
.add(
'wide short image',
() => (
<Canvas
figure="http://via.placeholder.com/900x350"
captureImageSize={{ width: 900, height: 350 }}
showIgnoredRegions={false}
/>
),
{ chromatic: { viewports: [600, 1200] } }
);
storiesOf('Canvas', module).add('loading', () => <Canvas loading />, CHROMATIC_DELAY);

38
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/parameters-as-var.output.snapshot
View File

@ -3,46 +3,18 @@
exports[`storiesof-to-csf transforms correctly using "parameters-as-var.input.js" data 1`] = `
"/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { specs, urls } from './LiveView.stories';
import { ignoredRegions } from './IgnoredRegions.stories';
export { specs, urls, ignoredRegions };
import Canvas from './Canvas';
const figure = 'http://via.placeholder.com/400x350';
const captureImageSize = { width: 300, height: 300 };
const CHROMATIC_DELAY = { chromatic: { delay: 500 } };
export default {
title: 'Webapp components/Canvas',
excludeStories: ['specs', 'urls', 'ignoredRegions'],
title: 'Canvas',
};
export const InteractiveUrlWInteractiveMode = () => (
<Canvas
interactiveUrl={urls.storybook52}
interactiveMode=\\"interactive\\"
figure={figure}
captureImageSize={captureImageSize}
spec={specs.basic}
showIgnoredRegions={false}
/>
);
export const Loading = () => <Canvas loading />;
InteractiveUrlWInteractiveMode.story = {
name: 'interactiveUrl w/ interactiveMode',
Loading.story = {
name: 'loading',
parameters: CHROMATIC_DELAY,
};
export const WideShortImage = () => (
<Canvas
figure=\\"http://via.placeholder.com/900x350\\"
captureImageSize={{ width: 900, height: 350 }}
showIgnoredRegions={false}
/>
);
WideShortImage.story = {
name: 'wide short image',
parameters: { chromatic: { viewports: [600, 1200] } },
};"
`;

13
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/storiesof-var.input.js
View File

@ -1,14 +1,11 @@
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
import Hero from './Hero';
const chapter = storiesOf('Webapp screens/Marketing/LandingScreen/Hero', module)
.add('default', () => <Hero />)
.add('maintenanceMode', () => <Hero maintenanceMode />);
const chapter = storiesOf('Webapp screens/Marketing/LandingScreen/Hero', module).add(
'default',
() => <Hero />
);
// Remove this story from storyshots. Let's use the parameters API for this soon!
if (typeof jest === 'undefined') {
chapter.add('video start open', () => <Hero startOpen />);
}
chapter.add('loading', () => <Hero loading />);

18
lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/storiesof-var.output.snapshot
View File

@ -3,7 +3,6 @@
exports[`storiesof-to-csf transforms correctly using "storiesof-var.input.js" data 1`] = `
"/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import Hero from './Hero';
export default {
@ -16,18 +15,9 @@ Default.story = {
name: 'default',
};
export const MaintenanceMode = () => <Hero maintenanceMode />;
export const Loading = () => <Hero loading />;
MaintenanceMode.story = {
name: 'maintenanceMode',
};
// Remove this story from storyshots. Let's use the parameters API for this soon!
if (typeof jest === 'undefined') {
export const VideoStartOpen = () => <Hero startOpen />;
VideoStartOpen.story = {
name: 'video start open',
};
}"
Loading.story = {
name: 'loading',
};"
`;