examples

examples copied to clipboard

Changes

Replace the custom msw integration with msw-storybook-addon.

Questions

1. In my local, storyshot tests are not running even on master branch. Can the maintainers verify if this issue is only on my end?

The error is "Unexpected error while loading ./GitHubUser.stories.js: SyntaxError: Unexpected token '.'"

2. The loading story is showing error in UI on master branch. Can this be verified as well?

3. There is an error in console saying service worker is outdated. I have updated it but not committed, should I add that?

4. What should I update in the readme?

msw-storybook-addon has good Getting Started docs, should I copy it? Or should I put link to them in "Start the mocking" section.

Example checklist

• [x] I've followed the Contribution guidelines.
• [x] I've verified that all added tests pass by running npm test.
• [x] I've included only the necessary minimum setup to showcase the example.
• [x] I've added a README.md file to the root directory of my example.

Hey, @itaditya. Thank you for preparing this!

In my local, storyshot tests are not running even on master branch. Can the maintainers verify if this issue is only on my end?

The Storybook tests are disabled on master. There's an issue with the storyshoots addon that renders it unable to handle *.css files imported in a story's component. I trust I've raised this in Storybook/addon repo, but haven't got any info back.

We may as well consider migrating the tests there to Cypress, but let's not face this at the moment.

The loading story is showing error in UI on master branch. Can this be verified as well?

I'll look into this and let you know.

What should I update in the readme?

You can reference the addon's docs with the getting started instructions, no need to repeat them.

I'll add the link in Readme then. Regarding storyshots, we can also replace it with Chromatic. It does visual snapshot testing for free with a nice dashboard. We can then ditch the heavy puppeteer library also.

https://www.chromatic.com/pricing

I am using Chromatic in msw addon docs also

https://github.com/mswjs/msw-storybook-addon/blob/master/.github/workflows/chromatic.yml

Also what to do about Q3

There is an error in console saying service worker is outdated. I have updated it but not committed, should I add that?

I am using Chromatic in msw addon docs also

Can you please show how are you writing/running in-Storybook tests with Chromatic?

I've found some integration tests, but to be more confident we should a) run/build Storybook with demos, b) run in-browser tests that assert UI based on responses. Integration tests are great, but here we are looking for in-browser verification, closer to where our demos are functioning.

There is an error in console saying service worker is outdated. I have updated it but not committed, should I add that?

Yes, please update the msw library to the latest version (npm view msw for latest version), and update the worker script afterword by npx msw init ./public. Both changes should be committed as a part of this pull request.

(Worker script generation should be automatic if there's packageJson.msw.workerDirectory set)

The loading story is showing error in UI on master branch. Can this be verified as well?

I'll look into this and let you know.

Hey @kettanaito did you get time to look into this?

Can you please show how are you writing/running in-Storybook tests with Chromatic?

Chromatic doesn't need any testing code. We only need to run a CLI command on CI. Their service opens Storybook in a browser through their server and takes a screenshot of the Canvas. The downside is that it doesn't let us simulate user interactions before taking screenshot.

@kettanaito I've done the following-

1. Update Readme to include the link to addon docs. Please suggest if the wording needs to be changed.
2. Update the generated SW file.
3. Tested storyshots is working after commenting out the CSS file import.

Hi, @itaditya. Once again, thanks for the work on this update 👏 I've just refreshed the entire collection of examples, and we don't currently have a Storybook example to apply this to. I will work on it in the future.