Storybook: Add regex to match the story's kind

[shilman]

Issue by olistic
_Tuesday Mar 28, 2017 at 00:00 GMT_
_Originally opened as https://github.com/storybooks/storyshots/issues/91_

---

What do you guys think about having these two config options: storyKindRegex and storyNameRegex instead of the current storyRegex?

storyNameRegex would behave just as the existing storyRegex, while storyKindRegex would match against the story's kind, giving users more flexibility.

For example, it could be used to solve #84 doing something like this:

// SomeComponent.stories.js

// ...
storiesOf('SomeComponent', module)
    .add('foo', () => {
        // ...
    });

// SomeComponent.test.js

import initStoryshots from 'storyshots';

initStoryshots({
  storyKindRegex: /^SomeComponent$/,
});

Which will cause storyshots (or jest actually) to output a __snapshots__ directory colocated with the component and with just its storyshots.

If you think it is a good idea, I'm happy to submit a PR!

[shilman]

Comment by olistic
_Tuesday Mar 28, 2017 at 00:31 GMT_

---

I guess I'm submitting the PR anyway, it's simple enough and I need it for my projects.

[shilman]

Comment by alexfedoseev
_Saturday Apr 08, 2017 at 03:36 GMT_

---

Why not just writing snapshots next to the stories file? W/o dummy regexp for each component.

[ndelangen]

@olistic We're interested in this PR, if you'll submit it. We've moved to a mono-repo architecture, if you need help, let us know?

[olistic]

@ndelangen @shilman I migrated the changes from the old repo and made sure the linter passes. PR is now open against the mono-repo!

[ndelangen]

I think that closes this issue?

[marcoala]

I really like this feature, when did you plan to release it?

[ndelangen]

There's no date yet, sorry. Next release will be 3.0.0.

[olistic]

@marcoala I had published a fork of the old storyshots repo in npm, which includes this feature. I'm using it in my projects until 3.0.0 is released. Just npm i @olistic/storyshots or yarn add @olistic/storyshots.

[marcoala]

@olistic Thanks!

[epicallan]

I hope this does't sound dumb, but what do you think about adding a reverse of the same option. I know you can do an inverse regex but it may not be easy for some of us.
I am suggesting something like this.

initStoryshots({
  storyIgnoreKindRegex: /^SomeComponent$/,
});

I can put together a PR

[ndelangen]

@tmeasday What do you think?

[tmeasday]

Is it possible to just write a negative regexp?

[epicallan]

@tmeasday I was using https://regex101.com to try to create inverse regexes and they were not working for some reason and i assumed maybe they were not supported in JS or required rear regex tricks. Tried the same inverse regexes in the browser console window and they worked.

I am guessing maybe we may not need the reverse feature I was proposing. Although it might be convenient for people who find regexes intimidating.

[tmeasday]

Maybe we can add something to the docs? I guess I'm not sure how common
this use case is?

On Fri, 9 Jun 2017 at 19:52 Lukwago Allan [e-mail] wrote:

@tmeasday https://github.com/tmeasday I was using https://regex101.com
to try to create inverse regexes and they were not working for some reason
and i assumed maybe they were not supported in JS or required rear regex
tricks. Tried the same inverse regexes in the browser console window and
they worked.

I am guessing maybe we may not need the reverse the same although it might
be convenient for people who find regexes intimidating.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/storybooks/storybook/issues/892#issuecomment-307347207,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAIFyu6CXpZwQTelpZk3vycGStN17nYbks5sCRXBgaJpZM4M-aU8
.

[epicallan]

I agree we could add something to the docs in form of an example or leave as is. I doubt its a common use case.

[tmeasday]

If you want to send a PR of what you did (I don't know how to write a negative regexp myself ;) ), that'd be super!

[epicallan]

Just sent a PR https://github.com/storybooks/storybook/pull/1317

[tirli]

@epicallan I tried to use your regexp from docs and I have a file named tooltip.DontTest.stories.js. But the story still not skipping :( Could you please tell me what I'm doing wrong?

[igor-dv]

@tirli
Can you please share your regex ?

[tirli]

@igor-dv The same as in docs: storyKindRegex: /^((?!.*?DontTest).)*$/

[igor-dv]

storyKindRegex is for the storyKind (the first parameter you provide to the storiesOf(...)), but not for the story file name.. I think currently is not possible to filter stories by files..

[tirli]

@igor-dv Now it works :) Thank you

[ssdh233]

Hi, I'm finding a way to separate the snapshots generated by storyshot. I read the README of storyshot and found here.

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots({
  storyKindRegex: /^MyComponent$/
});

This can be useful if you want to separate the snapshots in directories next to each component. See an example here.

This statement indicates that if I use this option, then the snapshots will be separated and be placed nearby each component's source code. I gave it a try but just found the generated snapshots are still merged into a big file. The regex works well.

So, do I misunderstand the documents? Or I have a wrong version (3.0.0) or this feature is not available yet? I would appreciate your help :)

[igor-dv]

@matsumatsu233

Today the only way to do what you want is creating a storyshot.test.js for each story separately. For example having Button.stories.js file you can create Button.storyshots.tests.js and configure it to take only the kind from Button.stories.js.

The limitation is from the Jest's side that do not support multiple snapshots per test file.

But we have this #1584 PR that will probably help with this requirement in the future.

[ssdh233]

@igor-dv Thank you very much! I will try to create test file for each component, and I'm looking forward to #1584 :)