[Storybook Testing] Improve Storybook Pages Coverage

[charlesBochet]

Context

We are improving storybook coverage on packages/twenty-front/src/pages which are our pages entrypoint. This stories catch bugs/regressions as:

• we run Chromatic on top of the final state of the story which does pixel diff between main and the upcoming branch.

How to work on a story

We have a storybook testing suite that you can run using the following commands:

1. build and serve the stories on localhost:6006: npx nx run twenty-front:storybook:serve:dev --configuration=pages. This will generate something very similar to: https://647862655ef7071d35328bb2-ekyqijyxck.chromatic.com/
2. You can run the overall storybook headless testing by running: npx nx run twenty-front:storybook:test --configuration=pages. This will run ALL the stories. This will also output a coverage in packages/twenty-front/coverage/storybook/lcov-report/index.html (feel free to open this file with your browser for easy navigation)

Tips:

• If you computer struggles you can play with the maxWorker options (see nx.json options), this will adjust how many stories are run in parallel
• You can also run the only desired story by running: cd packages/twenty-front + npx @storybook/test-runner <path of the story file>

What to do

• Make sure that all components in the pages folder has a story and that the story is working
• we should aim for a 100% coverage of Pages folder

[Faisal-imtiyaz123]

@charlesBochet Please assign me.

[charlesBochet]

Thank you @Faisal-imtiyaz123

[charlesBochet]

Could you start by investigating what pages are not covered? Depending on that we can scope the oss.gg points too :)

[Faisal-imtiyaz123]

@charlesBochet Sure.