Visual tests with Storybook

[fredericbonnet]

This PR adds visual tests to the app using Storybook.

The current code adds stories for all the Svelte components in the /src/components subtree. The *.stories.js files are located along the matching *.svelte file, in a way similar to the *.spec.js unit test files. Storybook also supports placing files in the /stories dir but I feel this is less natural for component testing (it might make sense for app-level/layout tests though). I've left the Storybook example files there for now but I plan to remove them eventually.

Although Storybook has community support for Svelte there are still some rough edges and lacking features (the docs misses many snippets and examples as well). I've managed to make my way through their code though, and I've written utilities to simplify testing of components that rely on slots for composition (see Grid or Table for example). For now the code is in stories/decorators/svelte-slots.js but I consider releasing it as a separate package or integrate it with the Svelte Storybook addons if they are interested.

To play with Storybook just run npm run storybook and it will launch a dev server with live reload. Most stories have controls to change the component properties, and components with event handlers have actions that you can inspect on the Actions tab. You can also open the story in a separate frame if you e.g. want to inspect or debug the component with the browser dev tools.

You can also generate a static page with all your components using npm run build-storybook. You can then copy the files on a static hosting server or test it locally with npx http-serve storybook-static/ and opening the page http://127.0.0.1:8080/index.html

I have stories for the remaining parts of the app but I have to figure out how to mock the services first (e.g. stores).

Strictly speaking, Storybook stories are not unit tests but visual tests. I believe they are easier to work with UI components testing, plus using a tool like Storybook opens up a lot of possibilities such as snapshots and visual regression testing. Classic unit testing is better for services and domain code IMHO.

[vercel[bot]]

@fredericbonnet is attempting to deploy a commit to a Personal Account owned by Torsten Dittmann on Vercel.

@TorstenDittmann first needs to authorize it.

[fredericbonnet]

Referencing issue #36

[fredericbonnet]

Thank you for your quick feedback! I've removed the example stories and did some cleanup before rebasing onto your dev branch so that your repo has a clean history. I've also added some non-connected components from the shared folder, because they are good examples of composition, and also because some of them relied on svelte-i18n, it took me some non-trivial effort to make them work and it would be a shame to lose this work in case you encounter the same issue later (he relevant code is in .storybook/preview.js). BTW Storybook has i18n addons that let you switch languages from the GUI, this is a must-have for multilingual apps.

The PR is now ready for a merge. I really enjoyed working on this issue, it improved my Storybook skills and gave me the opportunity to discover Svelte on a real-word code base. Svelte will certainly be an option to consider on my future projects!

[TorstenDittmann]

@allcontributors please add @fredericbonnet for test.

Amazing work you have done there, I am speechless! 🥳

[allcontributors[bot]]

@TorstenDittmann

I've put up a pull request to add @fredericbonnet! :tada: