Fix Frontend modules tests (#2688)

* Fix naming issue Co-authored-by: gitstart-twenty <twenty@gitstart.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> * Fix more tests Co-authored-by: gitstart-twenty <twenty@gitstart.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> * Revert unnecessary changes Co-authored-by: gitstart-twenty <twenty@gitstart.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> * Refactor according to self-review Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: gitstart-twenty <twenty@gitstart.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> * Fix graphql mocks not working anymore --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: v1b3m <vibenjamin6@gmail.com> Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com> Co-authored-by: Charles Bochet <charles@twenty.com>
2023-11-29 04:18:34 +05:45
parent fd969de311
commit 0fa55b0634
25 changed files with 693 additions and 313 deletions
--- a/front/src/modules/activities/tasks/stories/TaskGroups.stories.tsx
+++ b/front/src/modules/activities/tasks/stories/TaskGroups.stories.tsx
@ -5,6 +5,7 @@ import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
 import { ObjectFilterDropdownScope } from '@/ui/object/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedTasks } from '~/testing/mock-data/activities';

@ -19,6 +20,7 @@ const meta: Meta<typeof TaskGroups> = {
    ),
    ComponentWithRouterDecorator,
    ComponentWithRecoilScopeDecorator,
+    SnackBarDecorator,
  ],
  parameters: {
    msw: graphqlMocks,
--- a/front/src/modules/activities/tasks/stories/TaskList.stories.tsx
+++ b/front/src/modules/activities/tasks/stories/TaskList.stories.tsx
@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';

 import { TaskList } from '@/activities/tasks/components/TaskList';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedActivities } from '~/testing/mock-data/activities';

@ -16,6 +17,7 @@ const meta: Meta<typeof TaskList> = {
      </MemoryRouter>
    ),
    ComponentDecorator,
+    SnackBarDecorator,
  ],
  args: {
    title: 'Tasks',
--- a/front/src/modules/activities/tasks/components/TaskRow.tsx
+++ b/front/src/modules/activities/tasks/components/TaskRow.tsx
@ -77,7 +77,7 @@ export const TaskRow = ({
  const { completeTask } = useCompleteTask(task);

  const activityTargetIds =
-    task?.activityTargets?.edges.map(
+    task?.activityTargets?.edges?.map(
      (activityTarget) => activityTarget.node.id,
    ) ?? [];

--- a/front/src/modules/command-menu/components/stories/CommandMenu.stories.tsx
+++ b/front/src/modules/command-menu/components/stories/CommandMenu.stories.tsx
@ -7,6 +7,8 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandType } from '@/command-menu/types/Command';
 import { IconCheckbox, IconNotes } from '@/ui/display/icon';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { sleep } from '~/testing/sleep';

@ -18,6 +20,7 @@ const meta: Meta<typeof CommandMenu> = {
  title: 'Modules/CommandMenu/CommandMenu',
  component: CommandMenu,
  decorators: [
+    ObjectMetadataItemsDecorator,
    ComponentWithRouterDecorator,
    (Story) => {
      const { addToCommandMenu, setToIntitialCommandMenu, toggleCommandMenu } =
@ -48,6 +51,7 @@ const meta: Meta<typeof CommandMenu> = {

      return <Story />;
    },
+    SnackBarDecorator,
  ],
  parameters: {
    msw: graphqlMocks,
--- a/front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/front/src/modules/command-menu/hooks/useCommandMenu.ts
@ -1,4 +1,4 @@
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';

 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
@ -9,9 +9,7 @@ import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 import { Command } from '../types/Command';

 export const useCommandMenu = () => {
-  const [isCommandMenuOpened, setIsCommandMenuOpened] = useRecoilState(
-    isCommandMenuOpenedState,
-  );
+  const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState);
  const setCommands = useSetRecoilState(commandMenuCommandsState);
  const {
    setHotkeyScopeAndMemorizePreviousScope,
@ -28,13 +26,17 @@ export const useCommandMenu = () => {
    goBackToPreviousHotkeyScope();
  };

-  const toggleCommandMenu = () => {
+  const toggleCommandMenu = useRecoilCallback(({ snapshot }) => async () => {
+    const isCommandMenuOpened = snapshot
+      .getLoadable(isCommandMenuOpenedState)
+      .getValue();
+
    if (isCommandMenuOpened) {
      closeCommandMenu();
    } else {
      openCommandMenu();
    }
-  };
+  });

  const addToCommandMenu = (addCommand: Command[]) => {
    setCommands((prev) => [...prev, ...addCommand]);
--- a/front/src/modules/companies/stories/Board.stories.tsx
+++ b/front/src/modules/companies/stories/Board.stories.tsx
@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';

 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';

 import { CompanyBoard } from '../board/components/CompanyBoard';
@ -16,6 +17,7 @@ const meta: Meta<typeof CompanyBoard> = {
      </CompanyBoardRecoilScopeContext.Provider>
    ),
    ComponentWithRouterDecorator,
+    SnackBarDecorator,
  ],
  parameters: {
    msw: graphqlMocks,
--- a/front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx
+++ b/front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx
@ -10,9 +10,11 @@ export const ObjectMetadataItemsProvider = ({
  return loading ? (
    <></>
  ) : (
-    <RelationPickerScope relationPickerScopeId="relation-picker">
+    <>
      <ObjectMetadataItemsRelationPickerEffect />
-      {children}
-    </RelationPickerScope>
+      <RelationPickerScope relationPickerScopeId="relation-picker">
+        {children}
+      </RelationPickerScope>
+    </>
  );
 };
--- a/front/src/modules/object-metadata/components/ObjectMetadataItemsRelationPickerEffect.tsx
+++ b/front/src/modules/object-metadata/components/ObjectMetadataItemsRelationPickerEffect.tsx
@ -5,7 +5,9 @@ import { IdentifiersMapper } from '@/ui/input/components/internal/relation-picke
 import { getLogoUrlFromDomainName } from '~/utils';

 export const ObjectMetadataItemsRelationPickerEffect = () => {
-  const { setIdentifiersMapper, setSearchQuery } = useRelationPicker();
+  const { setIdentifiersMapper, setSearchQuery } = useRelationPicker({
+    relationPickerScopeId: 'relation-picker',
+  });

  const computeFilterFields = (relationPickerType: string) => {
    if (relationPickerType === 'company') {
--- a/front/src/modules/object-metadata/states/objectMetadataItemFamilySelector.ts
+++ b/front/src/modules/object-metadata/states/objectMetadataItemFamilySelector.ts
@ -18,7 +18,6 @@ export const objectMetadataItemFamilySelector = selectorFamily<
    }) =>
    ({ get }) => {
      const objectMetadataItems = get(objectMetadataItemsState);
-
      return (
        objectMetadataItems.find(
          (objectMetadataItem) =>
--- a/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
+++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
@ -69,7 +69,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
        description="The field's type and values."
      />
      <Select
-        disabled={!!fieldMetadata.id}
+        disabled={!!fieldMetadata?.id}
        dropdownScopeId="object-field-type-select"
        value={values?.type}
        onChange={(value) => onChange({ type: value })}
--- a/front/src/modules/settings/data-model/components/stories/SettingsObjectFieldTypeSelectSection.stories.tsx
+++ b/front/src/modules/settings/data-model/components/stories/SettingsObjectFieldTypeSelectSection.stories.tsx
@ -14,7 +14,6 @@ import {
  mockedCompaniesMetadata,
  mockedPeopleMetadata,
 } from '~/testing/mock-data/metadata';
-import { sleep } from '~/testing/sleep';

 import { SettingsObjectFieldTypeSelectSection } from '../SettingsObjectFieldTypeSelectSection';

@ -61,9 +60,10 @@ export const WithOpenSelect: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

-    await sleep(500);
+    const input = await canvas.findByText('Unique ID');
+    await userEvent.click(input);

-    const selectLabel = canvas.getByText('Text');
+    const selectLabel = canvas.getByText('Number');

    await userEvent.click(selectLabel);
  },
--- a/front/src/modules/spreadsheet-import/steps/components/stories/MatchColumns.stories.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/stories/MatchColumns.stories.tsx
@ -5,6 +5,7 @@ import { Providers } from '@/spreadsheet-import/components/Providers';
 import { MatchColumnsStep } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep';
 import { mockRsiValues } from '@/spreadsheet-import/tests/mockRsiValues';
 import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';

 const meta: Meta<typeof MatchColumnsStep> = {
  title: 'Modules/SpreadsheetImport/MatchColumnsStep',
@ -12,6 +13,7 @@ const meta: Meta<typeof MatchColumnsStep> = {
  parameters: {
    layout: 'fullscreen',
  },
+  decorators: [SnackBarDecorator],
 };

 export default meta;
--- a/front/src/modules/spreadsheet-import/steps/components/stories/Upload.stories.tsx
+++ b/front/src/modules/spreadsheet-import/steps/components/stories/Upload.stories.tsx
@ -5,6 +5,7 @@ import { Providers } from '@/spreadsheet-import/components/Providers';
 import { UploadStep } from '@/spreadsheet-import/steps/components/UploadStep/UploadStep';
 import { mockRsiValues } from '@/spreadsheet-import/tests/mockRsiValues';
 import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';

 const meta: Meta<typeof UploadStep> = {
  title: 'Modules/SpreadsheetImport/UploadStep',
@ -12,6 +13,7 @@ const meta: Meta<typeof UploadStep> = {
  parameters: {
    layout: 'fullscreen',
  },
+  decorators: [SnackBarDecorator],
 };

 export default meta;
--- a/front/src/modules/ui/navigation/navbar/components/stories/MainNavbar.stories.tsx
+++ b/front/src/modules/ui/navigation/navbar/components/stories/MainNavbar.stories.tsx
@ -11,6 +11,7 @@ import {
  IconUser,
 } from '@/ui/display/icon';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';

 import MainNavbar from '../MainNavbar';
 import NavItem from '../NavItem';
@ -19,6 +20,7 @@ import NavTitle from '../NavTitle';
 const meta: Meta<typeof MainNavbar> = {
  title: 'UI/Navigation/Navbar/MainNavbar',
  component: MainNavbar,
+  decorators: [SnackBarDecorator],
 };

 export default meta;
--- a/front/src/modules/ui/object/field/meta-types/display/components/stories/PhoneFieldDisplay.stories.tsx
+++ b/front/src/modules/ui/object/field/meta-types/display/components/stories/PhoneFieldDisplay.stories.tsx
@ -29,11 +29,12 @@ const meta: Meta = {
          fieldDefinition: {
            fieldMetadataId: 'phone',
            label: 'Phone',
-            type: 'PHONE',
+            type: 'TEXT',
            iconName: 'IconPhone',
            metadata: {
-              fieldName: 'Phone',
+              fieldName: 'phone',
              placeHolder: 'Phone',
+              objectMetadataNameSingular: 'person',
            },
          },
          hotkeyScope: 'hotkey-scope',
--- a/front/src/modules/ui/object/field/meta-types/input/components/stories/PhoneFieldInput.stories.tsx
+++ b/front/src/modules/ui/object/field/meta-types/input/components/stories/PhoneFieldInput.stories.tsx
@ -45,11 +45,12 @@ const PhoneFieldInputWithContext = ({
        fieldDefinition={{
          fieldMetadataId: 'phone',
          label: 'Phone',
-          type: 'PHONE',
+          type: 'TEXT',
          iconName: 'IconPhone',
          metadata: {
-            fieldName: 'Phone',
+            fieldName: 'phone',
            placeHolder: 'Enter phone number',
+            objectMetadataNameSingular: 'person',
          },
        }}
        entityId={entityId}
--- a/front/src/modules/ui/object/field/meta-types/input/components/stories/RelationFieldInput.stories.tsx
+++ b/front/src/modules/ui/object/field/meta-types/input/components/stories/RelationFieldInput.stories.tsx
@ -3,6 +3,7 @@ import { expect, jest } from '@storybook/jest';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { userEvent, waitFor, within } from '@storybook/testing-library';

+import { RelationPickerScope } from '@/ui/input/components/internal/relation-picker/scopes/RelationPickerScope';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
@ -43,21 +44,23 @@ const RelationFieldInputWithContext = ({

  return (
    <div>
-      <FieldContextProvider
-        fieldDefinition={{
-          fieldMetadataId: 'relation',
-          label: 'Relation',
-          type: 'RELATION',
-          iconName: 'IconLink',
-          metadata: {
-            fieldName: 'Relation',
-          },
-        }}
-        entityId={entityId}
-      >
-        <RelationFieldValueSetterEffect value={value} />
-        <RelationFieldInput onSubmit={onSubmit} onCancel={onCancel} />
-      </FieldContextProvider>
+      <RelationPickerScope relationPickerScopeId="relation-picker">
+        <FieldContextProvider
+          fieldDefinition={{
+            fieldMetadataId: 'relation',
+            label: 'Relation',
+            type: 'RELATION',
+            iconName: 'IconLink',
+            metadata: {
+              fieldName: 'Relation',
+            },
+          }}
+          entityId={entityId}
+        >
+          <RelationFieldValueSetterEffect value={value} />
+          <RelationFieldInput onSubmit={onSubmit} onCancel={onCancel} />
+        </FieldContextProvider>
+      </RelationPickerScope>
      <div data-testid="data-field-input-click-outside-div" />
    </div>
  );
@ -108,6 +111,7 @@ export const Submit: Story = {

    expect(submitJestFn).toHaveBeenCalledTimes(0);

+    // FIXME: Failing because the picker is not fetching any items
    const item = await canvas.findByText('Jane Doe');

    userEvent.click(item);
--- a/front/src/modules/ui/object/field/types/FieldType.ts
+++ b/front/src/modules/ui/object/field/types/FieldType.ts
@ -12,10 +12,6 @@ export type FieldType =
  | 'NUMBER'
  | 'PHONE'
  | 'PROBABILITY'
-  | 'RELATION'
-  | 'TEXT'
-  | 'URL'
-  | 'PHONE'
  | 'URL'
  | 'LINK'
  | 'CURRENCY'