test: adds test to check if adding a new company or people works (#1714)

* test: adds test to check if adding a new company or people works

* test: improves people/add and companies/add tests

* style: cleanup

* style: cleanup

front/src/modules/ui/button/components/IconButton.tsx

@@ -19,6 +19,7 @@ export type IconButtonProps = {
   disabled?: boolean;
   focus?: boolean;
   dataTestId?: string;
+  ariaLabel?: string;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
@@ -279,6 +280,7 @@ export const IconButton = ({
   disabled = false,
   focus = false,
   dataTestId,
+  ariaLabel,
   onClick,
 }: IconButtonProps) => {
   const theme = useTheme();
@@ -293,6 +295,7 @@ export const IconButton = ({
       accent={accent}
       className={className}
       onClick={onClick}
+      aria-label={ariaLabel}
     >
       {Icon && <Icon size={theme.icon.size.md} />}
     </StyledButton>

front/src/modules/ui/layout/components/PageAddButton.tsx

@@ -8,10 +8,11 @@ type OwnProps = {
 export const PageAddButton = ({ onClick }: OwnProps) => (
   <IconButton
     Icon={IconPlus}
+    dataTestId="add-button"
     size="medium"
     variant="secondary"
-    data-testid="add-button"
     accent="default"
     onClick={onClick}
+    ariaLabel="Add"
   />
 );

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

@@ -0,0 +1,53 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { AppPath } from '@/types/AppPath';
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
+
+import { Companies } from '../Companies';
+
+import { Story } from './Companies.stories';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/Companies/Add',
+  component: Companies,
+  decorators: [PageDecorator],
+  args: { routePath: AppPath.CompaniesPage },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export const AddNewCompany: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(2000);
+
+    const rowsBeforeAdd = canvas.getAllByRole('row');
+
+    const addButton = canvas.getByRole('button', { name: 'Add' });
+
+    userEvent.click(addButton);
+
+    await sleep(1000);
+
+    const rowsAfterAdd = canvas.getAllByRole('row');
+
+    const firstRow = rowsAfterAdd[1];
+    const cells = within(firstRow).getAllByRole('cell');
+
+    expect(cells[1].textContent).toBe('');
+
+    expect(rowsAfterAdd).toHaveLength(rowsBeforeAdd.length + 1);
+  },
+};

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

@@ -0,0 +1,53 @@
+import { expect } from '@storybook/jest';
+import type { Meta } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { AppPath } from '@/types/AppPath';
+import {
+  PageDecorator,
+  type PageDecoratorArgs,
+} from '~/testing/decorators/PageDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { sleep } from '~/testing/sleep';
+
+import { People } from '../People';
+
+import { Story } from './People.stories';
+
+const meta: Meta<PageDecoratorArgs> = {
+  title: 'Pages/People/Add',
+  component: People,
+  decorators: [PageDecorator],
+  args: { routePath: AppPath.PeoplePage },
+  parameters: {
+    docs: { story: 'inline', iframeHeight: '500px' },
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+
+export const AddNewPerson: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(2000);
+
+    const rowsBeforeAdd = canvas.getAllByRole('row');
+
+    const addButton = canvas.getByRole('button', { name: 'Add' });
+
+    userEvent.click(addButton);
+
+    await sleep(1000);
+
+    const rowsAfterAdd = canvas.getAllByRole('row');
+
+    const firstRow = rowsAfterAdd[1];
+    const cells = within(firstRow).getAllByRole('cell');
+
+    expect(cells[1].textContent).toBe('');
+
+    expect(rowsAfterAdd).toHaveLength(rowsBeforeAdd.length + 1);
+  },
+};

front/src/testing/graphqlMocks.ts

@@ -5,7 +5,9 @@ import { CREATE_ACTIVITY_WITH_COMMENT } from '@/activities/graphql/mutations/cre
 import { GET_ACTIVITIES } from '@/activities/graphql/queries/getActivities';
 import { CREATE_EVENT } from '@/analytics/graphql/queries/createEvent';
 import { GET_CLIENT_CONFIG } from '@/client-config/graphql/queries/getClientConfig';
+import { INSERT_ONE_COMPANY } from '@/companies/graphql/mutations/insertOneCompany';
 import { GET_COMPANIES } from '@/companies/graphql/queries/getCompanies';
+import { INSERT_ONE_PERSON } from '@/people/graphql/mutations/insertOnePerson';
 import { UPDATE_ONE_PERSON } from '@/people/graphql/mutations/updateOnePerson';
 import { GET_PEOPLE } from '@/people/graphql/queries/getPeople';
 import { GET_PERSON } from '@/people/graphql/queries/getPerson';
@@ -283,4 +285,30 @@ export const graphqlMocks = [
       );
     },
   ),
+  graphql.mutation(
+    getOperationName(INSERT_ONE_COMPANY) ?? '',
+    (req, res, ctx) => {
+      return res(
+        ctx.data({
+          createOneCompany: {
+            id: '9d162de1-cfbf-4156-a790-e39854dcd4ef',
+            __typename: 'Company',
+          },
+        }),
+      );
+    },
+  ),
+  graphql.mutation(
+    getOperationName(INSERT_ONE_PERSON) ?? '',
+    (req, res, ctx) => {
+      return res(
+        ctx.data({
+          createOnePerson: {
+            id: '9d162de1-cfbf-4156-a790-e39854dcd4ef',
+            __typename: 'Person',
+          },
+        }),
+      );
+    },
+  ),
 ];