[Storybook Testing] Main issue: Improve Storybook Component Coverage

[charlesBochet]

Context

We are improving storybook coverage on packages/twenty-front/src/modules which is most of our frontend. This stories catch bugs/regressions in two ways:

• stories comes with Interactions tests (wrote in the "play" callback in the .stories.tsx)
• 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=modules. This will generate something very similar to: https://647862655ef7071d35328bb2-ekyqijyxck.chromatic.com/
2. Browse your story on localhost:6006, check the "Interactions". From there you can play with your story and make sure it works
3. You can run the overall storybook headless testing by running: npx nx run twenty-front:storybook:test --configuration=modules. 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

• Pick any unassigned issue in the sub-issue list below.
• Follow "How to work on a story" section above
• Compute the coverage before and after your work (running the tests will output it)
• Open a PR containing the sub-issue link, before and after coverages, and a screenshot of your fixed / newly introduced story

Sub-issue list

Preview Give feedback

1. [Storybook Testing] Fix NavigationDrawer story #7492
   good first issue +1
2. [Storybook Testing] Fix RightDrawerActivityTopBar story #7496
   🕹️ 150 points good first issue 🕹️ oss.gg +3
   

[rizdarmwn]

Hi, @charlesBochet

I was trying to run the tests locally but it failed. Is there any prerequisites to run this locally? As I don't change anything beside the component I'm working on. Ran this on W11, WSL2.

The PR I'm working on #7580

[sakshit2004]

/assign

[coderkhushal]

/assign

[charlesBochet]

@rizdarmwn this is weird, what tests are failing?

[rizdarmwn]

@rizdarmwn this is weird, what tests are failing?

Some components are straight up do not showing. Some are timed out.
Example: UI/Data/Field/Input/RelationToOneFieldInput Couldn't find the text of 'John Wick'. I think the problem was on MSW/Mocks.

This is on Modules/CommandMenu/CommandMenu › MatchingPersonCompanyActivityCreateNavigate, but the other errors are almost the same as this.

[charlesBochet]

That's weird as they are passing on the CI
Could you run the storybook:

• npx nx run twenty-front:storybook:serve:dev --configuration=modules

and then browse the story on localhost:6006, go to MatchingPersonCompanyActivityCreateNavigate story and send me a screenshot of what you see / check dev console / inspect your network tab

[JorgeGraciaViveros]

Hi @charlesBochet ! I am currently working in a group of 5 students from Carnegie Mellon taking a software engineering course and our final project is to contribute to an open-source repo. Our project has multiple checkpoints and will be due on December 8 (meaning our PR will take longer to open). Would it be possible for us to be assigned to this issue (or any issues that you think would be a good fit)? Thanks!

[charlesBochet]

@JorgeGraciaViveros, sure this could be a nice project!