Stories for components #931
Description
Each of the components inside Headlamp need stories made for the different states.
- for easier manual UI testing, where the components are separate from the backend and each other.
- for automated regression testing of the presentational parts of the components
Components that need stories
There's a number of components that still don't have any stories written for them.
Please write in the issue if you want to start on one, and then tick it off here when it's merged in.
- common/ReleaseNotes
- components/App/Notifications
- components/App/Layout
- components/App/AppContainer
- components/cluster/Charts
- components/cluster/Chooser
- components/cluster/ClusterChooser
- components/cluster/Overview
Components that need stories improving
Some stories test only one possible state. These stories need improving.
How can you find these ones that need more states?
If you run make frontend-test from the root of the repo you'll see it prints out some code coverage.
cd frontend && npm run test -- --coverage
From that you could see if there's any more major code paths that might need covering with more story states.
(There's a html report in coverage/index.html as well with more details)
Where should the stories go?
A good example to look at is src/components/common/ActionButton.
The preferred layout is the folder layout like this:
Component/Component.tsx, main place where the component goes. Named after the component.
Component/index.tsx, This should export things from Component.tsx
Component/Component.stories.tsx, contains the component shown in different states.
Component/__snapshots__ , where the story shot files are.
Presentational VS container (logic) components
See documentation here. In short, the logic should be separated so mainly the component can be tested without dependencies on other things. An example of logic that could be separated is API calls.
Some refactoring is probably needed to implement stories:
- to place components in a folder, with filenames the same name as the component
- to separate the presentational "pure" parts
viewing the stories, and running the tests
To view the storybook:
cd frontend
npm install
npm run storybookTo run the tests, and generate the snapshot files (rendered html):
cd frontend
npm install # not needed if you've done it already.
npm run test -- --coverageYou can also run the tests without the interactive test runner like this:
CI=true npm run test -- --coverage