From 39f4ec9e7b34e7899f8e345e86592de2c4ce66c6 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Thu, 1 Feb 2024 17:44:36 +0100
Subject: [PATCH] Fix storybook tests on Field Preview (Settings) (#3761)

---
 .../components/CurrencyFieldDisplay.tsx       |  2 +-
 .../components/RecordTableRow.tsx             |  2 +-
 .../SettingsObjectFieldPreview.stories.tsx    | 19 +++++++++++++++++++
 .../decorators/RecordStoreDecorator.tsx       | 16 ++++++++++++++++
 4 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 packages/twenty-front/src/testing/decorators/RecordStoreDecorator.tsx

diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/CurrencyFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/CurrencyFieldDisplay.tsx
index c7988a1d4..75e4030e5 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/CurrencyFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/CurrencyFieldDisplay.tsx
@@ -8,7 +8,7 @@ export const CurrencyFieldDisplay = () => {
   return (
     <CurrencyDisplay
       amount={
-        fieldValue.amountMicros ? fieldValue.amountMicros / 1000000 : null
+        fieldValue?.amountMicros ? fieldValue.amountMicros / 1000000 : null
       }
     />
   );
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx
index afdeb9c3b..3d1782acd 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRow.tsx
@@ -69,7 +69,7 @@ export const RecordTableRow = ({ recordId, rowIndex }: RecordTableRowProps) => {
                 <RecordTableCellContainer />
               </RecordTableCellContext.Provider>
             ) : (
-              <td></td>
+              <td key={column.fieldMetadataId}></td>
             );
           })}
         <td></td>
diff --git a/packages/twenty-front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx b/packages/twenty-front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx
index 0dd1c8d7a..4a942727d 100644
--- a/packages/twenty-front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx
@@ -4,6 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Field, FieldMetadataType } from '~/generated-metadata/graphql';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { RecordStoreDecorator } from '~/testing/decorators/RecordStoreDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import {
@@ -17,6 +18,7 @@ const meta: Meta<typeof SettingsObjectFieldPreview> = {
   title: 'Modules/Settings/DataModel/SettingsObjectFieldPreview',
   component: SettingsObjectFieldPreview,
   decorators: [
+    RecordStoreDecorator,
     ComponentDecorator,
     ObjectMetadataItemsDecorator,
     SnackBarDecorator,
@@ -28,6 +30,23 @@ const meta: Meta<typeof SettingsObjectFieldPreview> = {
     objectMetadataId: mockedCompaniesMetadata.node.id,
   },
   parameters: {
+    records: [
+      {
+        id: `${mockedCompaniesMetadata.node.id}-field-form`,
+        domainName: 'Test',
+        idealCustomerProfile: true,
+        annualRecurringRevenue: {
+          amountMicros: 1000000,
+          currency: 'USD',
+        },
+        updatedAt: '2021-08-05T14:00:00.000Z',
+        linkedinLink: {
+          label: 'LinkedIn',
+          url: 'https://linkedin.com',
+        },
+        employees: 100,
+      },
+    ],
     msw: graphqlMocks,
   },
 };
diff --git a/packages/twenty-front/src/testing/decorators/RecordStoreDecorator.tsx b/packages/twenty-front/src/testing/decorators/RecordStoreDecorator.tsx
new file mode 100644
index 000000000..96fcda4ab
--- /dev/null
+++ b/packages/twenty-front/src/testing/decorators/RecordStoreDecorator.tsx
@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { Decorator } from '@storybook/react';
+
+import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore';
+
+export const RecordStoreDecorator: Decorator = (Story, context) => {
+  const { records } = context.parameters;
+
+  const { setRecords } = useSetRecordInStore();
+
+  useEffect(() => {
+    setRecords(records);
+  });
+
+  return <Story />;
+};