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

FIX storyshots & snapshots

Browse Source
This commit is contained in:
Norbert de Langen 2018-06-02 22:16:06 +02:00
parent 28eb275e64
commit 313c8f37bb
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
6 changed files with 524 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/official-storybook/stories/__snapshots__/core.stories.storyshot
View File

@ -2,7 +2,7 @@
exports[`Storyshots Core|Events Force re-render 1`] = `
<button
class="css-i7gdqe"
class="css-1riodoz"
>
Clicked: 0
</button>

6
lib/components/src/addon_panel/__snapshots__/index.stories.storyshot
View File

@ -8,18 +8,18 @@ exports[`Storyshots Components|AddonPanel default 1`] = `
class="css-d7g4da"
>
<div
class="css-64377y"
class="css-1whcqvw"
role="tablist"
>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Test 1
</button>
<button
class="css-133zstr"
class="css-1hf831j"
role="tab"
selected=""
type="button"

313
lib/components/src/form/__snapshots__/form.stories.storyshot
View File

@ -1,9 +1,316 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Form/Button with onclick 1`] = `
exports[`Storyshots Components|Form/Button alignment 1`] = `
Array [
<button
class="css-1vmbacw"
>
click this button
</button>,
<button
class="css-vb63mh"
>
click this button
</button>,
<button
class="css-k5xbe4"
>
click this button
</button>,
]
`;
exports[`Storyshots Components|Form/Button sizes 1`] = `
Array [
<button
class="css-1riodoz"
>
click this button
</button>,
<button
class="css-17iy6hf"
>
click this button
</button>,
<button
class="css-k5xbe4"
>
click this button
</button>,
]
`;
exports[`Storyshots Components|Form/Button validations 1`] = `
Array [
<button
class="css-1n7kxml"
>
click this button
</button>,
<button
class="css-1dbq55u"
>
click this button
</button>,
<button
class="css-1yfwphr"
>
click this button
</button>,
<button
class="css-k5xbe4"
>
click this button
</button>,
]
`;
exports[`Storyshots Components|Form/Button with knobs 1`] = `
<button
class="css-i7gdqe"
class="css-1riodoz"
>
Submit
💌 love letter to storybook team
</button>
`;
exports[`Storyshots Components|Form/Select sizes 1`] = `
Array [
<select
class="css-1rk2lkr"
>
<option
value="val1"
>
Value 1
</option>
<option
selected=""
value="val2"
>
Value 2
</option>
<option
value="val3"
>
Value 3
</option>
</select>,
<select
class="css-p3s1kf"
>
<option
value="val1"
>
Value 1
</option>
<option
selected=""
value="val2"
>
Value 2
</option>
<option
value="val3"
>
Value 3
</option>
</select>,
<select
class="css-13k1zov"
>
<option
value="val1"
>
Value 1
</option>
<option
selected=""
value="val2"
>
Value 2
</option>
<option
value="val3"
>
Value 3
</option>
</select>,
]
`;
exports[`Storyshots Components|Form/Select validations 1`] = `
Array [
<select
class="css-1pvc7qr"
>
<option
value="val1"
>
Value 1
</option>
<option
selected=""
value="val2"
>
Value 2
</option>
<option
value="val3"
>
Value 3
</option>
</select>,
<select
class="css-kdddv2"
>
<option
value="val1"
>
Value 1
</option>
<option
selected=""
value="val2"
>
Value 2
</option>
<option
value="val3"
>
Value 3
</option>
</select>,
<select
class="css-1hyanqr"
>
<option
value="val1"
>
Value 1
</option>
<option
selected=""
value="val2"
>
Value 2
</option>
<option
value="val3"
>
Value 3
</option>
</select>,
<select
class="css-13k1zov"
>
<option
value="val1"
>
Value 1
</option>
<option
selected=""
value="val2"
>
Value 2
</option>
<option
value="val3"
>
Value 3
</option>
</select>,
]
`;
exports[`Storyshots Components|Form/Textarea alignment 1`] = `
Array [
<textarea
align="end"
class="css-ikfdgv"
style="height:0"
>
text
</textarea>,
<textarea
align="center"
class="css-7knv9k"
style="height:0"
>
text
</textarea>,
<textarea
align="start"
class="css-33eu3a"
style="height:0"
>
text
</textarea>,
]
`;
exports[`Storyshots Components|Form/Textarea sizes 1`] = `
Array [
<textarea
class="css-1qzrepe"
style="height:0"
>
text
</textarea>,
<textarea
class="css-1lgydmp"
style="height:0"
>
text
</textarea>,
<textarea
class="css-33eu3a"
style="height:0"
>
text
</textarea>,
]
`;
exports[`Storyshots Components|Form/Textarea validations 1`] = `
Array [
<textarea
class="css-sfd7lm"
style="height:0"
valid="error"
>
text
</textarea>,
<textarea
class="css-j4g7hp"
style="height:0"
valid="warn"
>
text
</textarea>,
<textarea
class="css-1rb826s"
style="height:0"
valid="valid"
>
text
</textarea>,
<textarea
class="css-33eu3a"
style="height:0"
>
text
</textarea>,
]
`;
exports[`Storyshots Components|Form/Textarea with knobs (controlled) 1`] = `
<textarea
class="css-33eu3a"
style="height:0"
>
OMG, multiple lines!
That is amazing
</textarea>
`;

22
lib/components/src/form/form.stories.js
View File

@ -10,7 +10,7 @@ storiesOf('Components|Form/Select', module)
.add('sizes', () => (
<Fragment>
{['auto', 'flex', '100%'].map(size => (
<Select value="val2" onChange={action('onChange')} size={size}>
<Select key={size} value="val2" onChange={action('onChange')} size={size}>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
@ -21,7 +21,7 @@ storiesOf('Components|Form/Select', module)
.add('validations', () => (
<Fragment>
{['error', 'warn', 'valid', null].map(valid => (
<Select value="val2" onChange={action('onChange')} size="100%" valid={valid}>
<Select key={valid} value="val2" onChange={action('onChange')} size="100%" valid={valid}>
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
@ -39,13 +39,17 @@ storiesOf('Components|Form/Button', module)
))
.add('sizes', () => (
<Fragment>
{['auto', 'flex', '100%'].map(size => <Button size={size}>click this button</Button>)}
{['auto', 'flex', '100%'].map(size => (
<Button key={size} size={size}>
click this button
</Button>
))}
</Fragment>
))
.add('validations', () => (
<Fragment>
{['error', 'warn', 'valid', null].map(valid => (
<Button size="100%" valid={valid}>
<Button key={valid} size="100%" valid={valid}>
click this button
</Button>
))}
@ -54,7 +58,7 @@ storiesOf('Components|Form/Button', module)
.add('alignment', () => (
<Fragment>
{['end', 'center', 'start'].map(align => (
<Button size="100%" align={align}>
<Button key={align} size="100%" align={align}>
click this button
</Button>
))}
@ -68,20 +72,22 @@ storiesOf('Components|Form/Textarea', module)
))
.add('sizes', () => (
<Fragment>
{['auto', 'flex', '100%'].map(size => <Textarea defaultValue="text" size={size} />)}
{['auto', 'flex', '100%'].map(size => (
<Textarea key={size} defaultValue="text" size={size} />
))}
</Fragment>
))
.add('validations', () => (
<Fragment>
{['error', 'warn', 'valid', null].map(valid => (
<Textarea defaultValue="text" size="100%" valid={valid} />
<Textarea key={valid} defaultValue="text" size="100%" valid={valid} />
))}
</Fragment>
))
.add('alignment', () => (
<Fragment>
{['end', 'center', 'start'].map(align => (
<Textarea defaultValue="text" size="100%" align={align} />
<Textarea key={align} defaultValue="text" size="100%" align={align} />
))}
</Fragment>
));

8
lib/components/src/layout/__snapshots__/index.stories.storyshot
View File

@ -312,17 +312,17 @@ exports[`Storyshots Components|Layout mobile 1`] = `
class="css-1kes5pl"
>
<div
class="css-64377y"
class="css-1whcqvw"
>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Navigator
</button>
<button
class="css-133zstr"
class="css-1hf831j"
role="tab"
selected=""
type="button"
@ -330,7 +330,7 @@ exports[`Storyshots Components|Layout mobile 1`] = `
Preview
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>

222
lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
View File

@ -1,18 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots Components|Tabs stateful - absolute 1`] = `
exports[`Storyshots Components|Tabs stateful - absolute & bordered 1`] = `
<div
style="height:calc(100vh - 20px)"
>
<div
class="css-4e8exj"
class="css-d7g4da"
>
<div
class="css-64377y"
class="css-1whcqvw"
role="tablist"
>
<button
class="css-133zstr"
class="css-1hf831j"
role="tab"
selected=""
type="button"
@ -20,35 +20,35 @@ exports[`Storyshots Components|Tabs stateful - absolute 1`] = `
Tab title #1
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #2
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab with scroll
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #4
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #5
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
@ -81,6 +81,168 @@ exports[`Storyshots Components|Tabs stateful - absolute 1`] = `
</div>
`;
exports[`Storyshots Components|Tabs stateful - absolute 1`] = `
<div
style="height:calc(100vh - 20px)"
>
<div
class="css-4e8exj"
>
<div
class="css-1whcqvw"
role="tablist"
>
<button
class="css-1hf831j"
role="tab"
selected=""
type="button"
>
Tab title #1
</button>
<button
class="css-xcko46"
role="tab"
type="button"
>
Tab title #2
</button>
<button
class="css-xcko46"
role="tab"
type="button"
>
Tab with scroll
</button>
<button
class="css-xcko46"
role="tab"
type="button"
>
Tab title #4
</button>
<button
class="css-xcko46"
role="tab"
type="button"
>
Tab title #5
</button>
<button
class="css-xcko46"
role="tab"
type="button"
>
Tab title #6
</button>
</div>
<div
class="css-18lpvrh"
>
<div
id="test1"
>
CONTENT 1
</div>
<div
id="test2"
style="background:hotpink;min-height:100%;display:none"
>
CONTENT 2
</div>
<div
class="css-1hyfx7x"
>
<div>
CONTENT 6
</div>
</div>
</div>
</div>
</div>
`;
exports[`Storyshots Components|Tabs stateful - bordered 1`] = `
<div
style="height:calc(100vh - 20px)"
>
<div
class="css-8a9ncn"
>
<div
class="css-1whcqvw"
role="tablist"
>
<button
class="css-1hf831j"
role="tab"
selected=""
type="button"
>
Tab title #1
</button>
<button
class="css-xcko46"
role="tab"
type="button"
>
Tab title #2
</button>
<button
class="css-xcko46"
role="tab"
type="button"
>
Tab with scroll
</button>
<button
class="css-xcko46"
role="tab"
type="button"
>
Tab title #4
</button>
<button
class="css-xcko46"
role="tab"
type="button"
>
Tab title #5
</button>
<button
class="css-xcko46"
role="tab"
type="button"
>
Tab title #6
</button>
</div>
<div
class="css-1bx5ylf"
>
<div
id="test1"
>
CONTENT 1
</div>
<div
id="test2"
style="background:hotpink;min-height:100%;display:none"
>
CONTENT 2
</div>
<div
class="css-1hyfx7x"
>
<div>
CONTENT 6
</div>
</div>
</div>
</div>
</div>
`;
exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
<div
style="height:calc(100vh - 20px)"
@ -89,11 +251,11 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
class="css-13o7eu2"
>
<div
class="css-64377y"
class="css-1whcqvw"
role="tablist"
>
<button
class="css-133zstr"
class="css-1hf831j"
role="tab"
selected=""
type="button"
@ -101,35 +263,35 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
Tab title #1
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #2
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab with scroll
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #4
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #5
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
@ -170,18 +332,18 @@ exports[`Storyshots Components|Tabs stateful - with initial 1`] = `
class="css-13o7eu2"
>
<div
class="css-64377y"
class="css-1whcqvw"
role="tablist"
>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #1
</button>
<button
class="css-133zstr"
class="css-1hf831j"
role="tab"
selected=""
type="button"
@ -189,28 +351,28 @@ exports[`Storyshots Components|Tabs stateful - with initial 1`] = `
Tab title #2
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab with scroll
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #4
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #5
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
@ -246,46 +408,46 @@ exports[`Storyshots Components|Tabs stateless - default 1`] = `
class="css-13o7eu2"
>
<div
class="css-64377y"
class="css-1whcqvw"
role="tablist"
>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #1
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #2
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab with scroll
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #4
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>
Tab title #5
</button>
<button
class="css-1540u6r"
class="css-xcko46"
role="tab"
type="button"
>