Implement Storybook/Chromatic tests

[speelbarrow]

https://storybook.js.org

Storybook provides a testing framework for React components. Each test is called a "story", and is equivalent to some block of React JSX. We can use this to render each page of the website individually.

https://www.chromatic.com

Chromatic is a platform provided by the Storybook team. It can be used to automate testing of each individual "story" in a project. Specifically, it will render each story and compare the result to the render in the previous commit. If the visual layout has changed, it will be flagged for manual review.

TASKS:

• Integrate Storybook into codebase #147
  • Feel free to reach out if you're having trouble configuring Storybook itself
• Create stories for each page of the website
  • ... or at least for each page that is renderable as a distinct React component
  • Storybook provides a play function that allows you to write tests that interact with the Story (rather than just rendering it). More important to get the visual tests running first, but we may want to circle back and add some of these later (see below).
• Integrate visual tests using Chromatic into the release pipeline
• optional: Implement and integrate interaction tests