TWNTY-4602 - Increase coverage for coverage for twenty-front:storybook:modules (#4649)

* Increase coverage for coverage for  `twenty-front:storybook:modules`

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Chiazokam <chiazokamecheta@gmail.com>

* Increase code coverage threshold

* Increase code coverage threshold

* Increase code coverage threshold

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Chiazokam <chiazokamecheta@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/nyc.config.cjs

@@ -6,8 +6,8 @@ const globalCoverage = {
 };
 
 const modulesCoverage = {
-  statements: 70,
+  statements: 75,
-  lines: 70,
+  lines: 75,
   functions: 70,
   include: ['src/modules/**/*'],
   exclude: ['src/**/*.ts'],

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResetPassword.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar.tsx';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useEmailPasswordResetLinkMutation } from '~/generated/graphql.tsx';
 
 export const useHandleResetPassword = () => {

packages/twenty-front/src/modules/object-metadata/components/__stories__/ObjectMetadataNavItems.stories.tsx

@@ -0,0 +1,37 @@
+import { expect } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+
+import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+import { ObjectMetadataNavItems } from '../ObjectMetadataNavItems';
+
+const meta: Meta<typeof ObjectMetadataNavItems> = {
+  title: 'Modules/ObjectMetadata/ObjectMetadataNavItems',
+  component: ObjectMetadataNavItems,
+  decorators: [
+    ObjectMetadataItemsDecorator,
+    ComponentWithRouterDecorator,
+    ComponentWithRecoilScopeDecorator,
+    SnackBarDecorator,
+  ],
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ObjectMetadataNavItems>;
+
+export const Default: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+    expect(await canvas.findByText('People')).toBeInTheDocument();
+    expect(await canvas.findByText('Companies')).toBeInTheDocument();
+    expect(await canvas.findByText('Opportunities')).toBeInTheDocument();
+  },
+};

packages/twenty-front/src/modules/spreadsheet-import/steps/components/__stories__/Steps.stories.tsx

@@ -0,0 +1,27 @@
+import { expect } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+
+import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+
+import { Steps } from '../Steps';
+
+const meta: Meta<typeof Steps> = {
+  title: 'Modules/SpreadsheetImport/Steps',
+  component: Steps,
+  decorators: [ComponentWithRecoilScopeDecorator, SnackBarDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof Steps>;
+
+export const Default: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+    expect(await canvas.findByText('Upload file')).toBeInTheDocument();
+    expect(await canvas.findByText('Match columns')).toBeInTheDocument();
+    expect(await canvas.findByText('Validate data')).toBeInTheDocument();
+    expect(await canvas.findByText('Select file')).toBeInTheDocument();
+  },
+};

packages/twenty-front/src/modules/support/components/SupportChat.tsx

@@ -45,26 +45,32 @@ export const SupportChat = () => {
       currentWorkspaceMember: Pick<WorkspaceMember, 'name'>,
     ) => {
       const url = 'https://chat-assets.frontapp.com/v1/chat.bundle.js';
-      const script = document.querySelector(`script[src="${url}"]`);
+      let script = document.querySelector(`script[src="${url}"]`);
 
-      if (!script) {
+      // This function only gets called when front chat is not loaded
-        insertScript({
+      // If the script is already defined, but front chat is not loaded
-          src: url,
+      // then there was an error loading the script; reload the script
-          onLoad: () => {
+      if (isDefined(script)) {
-            window.FrontChat?.('init', {
+        script.parentNode?.removeChild(script);
-              chatId,
+        script = null;
-              useDefaultLauncher: false,
-              email: currentUser.email,
-              name:
-                currentWorkspaceMember.name.firstName +
-                ' ' +
-                currentWorkspaceMember.name.lastName,
-              userHash: currentUser?.supportUserHash,
-            });
-            setIsFrontChatLoaded(true);
-          },
-        });
       }
+
+      insertScript({
+        src: url,
+        onLoad: () => {
+          window.FrontChat?.('init', {
+            chatId,
+            useDefaultLauncher: false,
+            email: currentUser.email,
+            name:
+              currentWorkspaceMember.name.firstName +
+              ' ' +
+              currentWorkspaceMember.name.lastName,
+            userHash: currentUser?.supportUserHash,
+          });
+          setIsFrontChatLoaded(true);
+        },
+      });
     },
     [],
   );

packages/twenty-front/src/modules/support/components/__stories__/SupportChat.stories.tsx

@@ -0,0 +1,52 @@
+import { expect } from '@storybook/jest';
+import { Meta, StoryObj } from '@storybook/react';
+import { within } from '@storybook/test';
+import { useSetRecoilState } from 'recoil';
+
+import { currentUserState } from '@/auth/states/currentUserState';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { supportChatState } from '@/client-config/states/supportChatState';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import {
+  mockDefaultWorkspace,
+  mockedUsersData,
+  mockedWorkspaceMemberData,
+} from '~/testing/mock-data/users';
+
+import { SupportChat } from '../SupportChat';
+
+const meta: Meta<typeof SupportChat> = {
+  title: 'Modules/Support/SupportChat',
+  component: SupportChat,
+  decorators: [
+    (Story) => {
+      const setCurrentUser = useSetRecoilState(currentUserState);
+      const setSupportChat = useSetRecoilState(supportChatState);
+      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
+      const setCurrentWorkspaceMember = useSetRecoilState(
+        currentWorkspaceMemberState,
+      );
+
+      setCurrentWorkspace(mockDefaultWorkspace);
+      setCurrentWorkspaceMember(mockedWorkspaceMemberData);
+      setCurrentUser(mockedUsersData[0]);
+      setSupportChat({ supportDriver: 'front', supportFrontChatId: '1234' });
+
+      return <Story />;
+    },
+  ],
+  parameters: {
+    msw: graphqlMocks,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SupportChat>;
+
+export const Default: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+    expect(await canvas.findByText('Support')).toBeInTheDocument();
+  },
+};

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.ts

@@ -151,6 +151,4 @@ export const useSelectableListHotKeys = (
     hotkeyScope,
     [],
   );
-
-  return <></>;
 };

packages/twenty-front/src/pages/auth/ChooseYourPlan.tsx

@@ -10,7 +10,7 @@ import { SubscriptionCard } from '@/billing/components/SubscriptionCard.tsx';
 import { billingState } from '@/client-config/states/billingState.ts';
 import { AppPath } from '@/types/AppPath.ts';
 import { Loader } from '@/ui/feedback/loader/components/Loader.tsx';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar.tsx';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar.ts';
 import { MainButton } from '@/ui/input/button/components/MainButton.tsx';
 import { CardPicker } from '@/ui/input/components/CardPicker.tsx';
 import {

packages/twenty-front/src/pages/settings/SettingsBilling.tsx

@@ -15,7 +15,7 @@ import { IconCreditCard, IconCurrencyDollar } from '@/ui/display/icon';
 import { Info } from '@/ui/display/info/components/Info.tsx';
 import { H1Title } from '@/ui/display/typography/components/H1Title.tsx';
 import { H2Title } from '@/ui/display/typography/components/H2Title.tsx';
-import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar.tsx';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar.ts';
 import { Button } from '@/ui/input/button/components/Button.tsx';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal.tsx';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';

packages/twenty-front/src/testing/graphqlMocks.ts

@@ -1,5 +1,5 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { graphql, HttpResponse } from 'msw';
+import { graphql, http, HttpResponse } from 'msw';
 
 import { TRACK } from '@/analytics/graphql/queries/track';
 import { GET_CLIENT_CONFIG } from '@/client-config/graphql/queries/getClientConfig';
@@ -315,5 +315,15 @@ export const graphqlMocks = {
         },
       });
     }),
+    http.get('https://chat-assets.frontapp.com/v1/chat.bundle.js', () => {
+      return HttpResponse.text(
+        `
+          window.FrontChat = () => {};
+          console.log("This is a mocked script response.");
+          // Additional JavaScript code here
+        `,
+        { status: 200 },
+      );
+    }),
   ],
 };