Sammy/t 362 on people view when i click on comment bubble icon row level (#202)

* test: add empty comment test

* test: comments section opens on click on comments chip

* test: add a failing test for opening comment section

* feature: open comments drawer on click on comment chip

* test: refactor company test, create folders

front/src/pages/companies/__stories__/Companies.comments.stories.tsx

@@ -0,0 +1,38 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { Companies } from '../Companies';
+
+import { Story } from './Companies.stories';
+import { render } from './shared';
+
+const meta: Meta<typeof Companies> = {
+  title: 'Pages/Companies/Comments',
+  component: Companies,
+};
+
+export default meta;
+
+export const OpenCommentsSection: Story = {
+  render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const firstRow = await canvas.findByTestId('row-id-1');
+
+    expect(firstRow).toBeDefined();
+
+    const commentsChip = await within(firstRow).findByTestId('comment-chip');
+    expect(commentsChip).toBeDefined();
+
+    userEvent.click(commentsChip);
+    const commentSection = await canvas.findByText('Comments');
+    expect(commentSection).toBeDefined();
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};

front/src/pages/companies/__stories__/Companies.filterBy.stories.tsx

@@ -8,7 +8,7 @@ import { Story } from './Companies.stories';
 import { mocks, render } from './shared';
 
 const meta: Meta<typeof Companies> = {
-  title: 'Pages/Companies',
+  title: 'Pages/Companies/FilterBy',
   component: Companies,
 };
 

front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx

@@ -8,7 +8,7 @@ import { Story } from './Companies.stories';
 import { mocks, render } from './shared';
 
 const meta: Meta<typeof Companies> = {
-  title: 'Pages/Companies',
+  title: 'Pages/Companies/SortBy',
   component: Companies,
 };
 

front/src/pages/people/__stories__/People.comments.stories.tsx

@@ -0,0 +1,38 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { People } from '../People';
+
+import { Story } from './People.stories';
+import { render } from './shared';
+
+const meta: Meta<typeof People> = {
+  title: 'Pages/People/Comments',
+  component: People,
+};
+
+export default meta;
+
+export const OpenCommentsSection: Story = {
+  render,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const firstRow = await canvas.findByTestId('row-id-1');
+
+    expect(firstRow).toBeDefined();
+
+    const commentsChip = await within(firstRow).findByTestId('comment-chip');
+    expect(commentsChip).toBeDefined();
+
+    userEvent.click(commentsChip);
+    const commentSection = await canvas.findByText('Comments');
+    expect(commentSection).toBeDefined();
+  },
+  parameters: {
+    msw: graphqlMocks,
+  },
+};