Improve test coverage and refactor storybook arch (#723)

* Improve test coverage and refactor storybook arch

* Fix coverage

* Fix tests

* Fix lint

* Fix lint

front/src/modules/activities/comment/Comment.tsx

@@ -30,7 +30,7 @@ const StyledCommentBody = styled.div`
   text-align: left;
 `;
 
-export function CommentThreadItem({ comment, actionBar }: OwnProps) {
+export function Comment({ comment, actionBar }: OwnProps) {
   return (
     <StyledContainer>
       <CommentHeader comment={comment} actionBar={actionBar} />

front/src/modules/activities/comment/__stories__/Comment.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
+
+import { Comment } from '../Comment';
+
+import { mockComment, mockCommentWithLongValues } from './mock-comment';
+
+const meta: Meta<typeof Comment> = {
+  title: 'Modules/Activity/Comment/Comment',
+  component: Comment,
+};
+
+export default meta;
+type Story = StoryObj<typeof Comment>;
+
+export const Default: Story = {
+  render: getRenderWrapperForComponent(<Comment comment={mockComment} />),
+};
+
+export const WithLongValues: Story = {
+  render: getRenderWrapperForComponent(
+    <Comment comment={mockCommentWithLongValues} />,
+  ),
+};

front/src/modules/activities/comment/__stories__/CommentHeader.stories.tsx

@@ -1,92 +1,34 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { DateTime } from 'luxon';
 
 import { CommentThreadActionBar } from '@/activities/right-drawer/components/CommentThreadActionBar';
-import { CommentForDrawer } from '@/activities/types/CommentForDrawer';
-import { mockedUsersData } from '~/testing/mock-data/users';
 import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
 
 import { CommentHeader } from '../CommentHeader';
 
+import { mockComment, mockCommentWithLongValues } from './mock-comment';
+
 const meta: Meta<typeof CommentHeader> = {
-  title: 'Modules/Comments/CommentHeader',
+  title: 'Modules/Activity/Comment/CommentHeader',
   component: CommentHeader,
 };
 
 export default meta;
 type Story = StoryObj<typeof CommentHeader>;
 
-const mockUser = mockedUsersData[0];
-
-const mockComment: Pick<CommentForDrawer, 'id' | 'author' | 'createdAt'> = {
-  id: 'fake_comment_1_uuid',
-  author: {
-    id: 'fake_comment_1_author_uuid',
-    displayName: mockUser.displayName ?? '',
-    firstName: mockUser.firstName ?? '',
-    lastName: mockUser.lastName ?? '',
-    avatarUrl: mockUser.avatarUrl,
-  },
-  createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
-};
-
-const mockCommentWithLongName: Pick<
-  CommentForDrawer,
-  'id' | 'author' | 'createdAt'
-> = {
-  id: 'fake_comment_2_uuid',
-  author: {
-    id: 'fake_comment_2_author_uuid',
-    displayName: mockUser.displayName + ' with a very long suffix' ?? '',
-    firstName: mockUser.firstName ?? '',
-    lastName: mockUser.lastName ?? '',
-    avatarUrl: mockUser.avatarUrl,
-  },
-  createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
-};
-
 export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <CommentHeader
-      comment={{
-        ...mockComment,
-        createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
-      }}
-    />,
-  ),
+  render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
 };
 
 export const FewDaysAgo: Story = {
-  render: getRenderWrapperForComponent(
-    <CommentHeader
-      comment={{
-        ...mockComment,
-        createdAt: DateTime.now().minus({ days: 2 }).toISO() ?? '',
-      }}
-    />,
-  ),
+  render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
 };
 
 export const FewMonthsAgo: Story = {
-  render: getRenderWrapperForComponent(
-    <CommentHeader
-      comment={{
-        ...mockComment,
-        createdAt: DateTime.now().minus({ months: 2 }).toISO() ?? '',
-      }}
-    />,
-  ),
+  render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
 };
 
 export const FewYearsAgo: Story = {
-  render: getRenderWrapperForComponent(
-    <CommentHeader
-      comment={{
-        ...mockComment,
-        createdAt: DateTime.now().minus({ years: 2 }).toISO() ?? '',
-      }}
-    />,
-  ),
+  render: getRenderWrapperForComponent(<CommentHeader comment={mockComment} />),
 };
 
 export const WithoutAvatar: Story = {
@@ -98,7 +40,6 @@ export const WithoutAvatar: Story = {
           ...mockComment.author,
           avatarUrl: '',
         },
-        createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
       }}
     />,
   ),
@@ -108,12 +49,11 @@ export const WithLongUserName: Story = {
   render: getRenderWrapperForComponent(
     <CommentHeader
       comment={{
-        ...mockCommentWithLongName,
+        ...mockCommentWithLongValues,
         author: {
-          ...mockCommentWithLongName.author,
+          ...mockCommentWithLongValues.author,
           avatarUrl: '',
         },
-        createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '',
       }}
     />,
   ),
@@ -122,10 +62,7 @@ export const WithLongUserName: Story = {
 export const WithActionBar: Story = {
   render: getRenderWrapperForComponent(
     <CommentHeader
-      comment={{
-        ...mockComment,
-        createdAt: DateTime.now().minus({ days: 2 }).toISO() ?? '',
-      }}
+      comment={mockComment}
       actionBar={<CommentThreadActionBar commentThreadId="test-id" />}
     />,
   ),

front/src/modules/activities/comment/__stories__/mock-comment.ts

@@ -0,0 +1,40 @@
+import { DateTime } from 'luxon';
+
+import { CommentForDrawer } from '@/activities/types/CommentForDrawer';
+import { mockedUsersData } from '~/testing/mock-data/users';
+
+const mockUser = mockedUsersData[0];
+
+export const mockComment: Pick<
+  CommentForDrawer,
+  'id' | 'author' | 'createdAt' | 'body' | 'updatedAt'
+> = {
+  id: 'fake_comment_1_uuid',
+  body: 'Hello, this is a comment.',
+  author: {
+    id: 'fake_comment_1_author_uuid',
+    displayName: mockUser.displayName ?? '',
+    firstName: mockUser.firstName ?? '',
+    lastName: mockUser.lastName ?? '',
+    avatarUrl: mockUser.avatarUrl,
+  },
+  createdAt: DateTime.fromFormat('2021-03-12', 'yyyy-MM-dd').toISO() ?? '',
+  updatedAt: DateTime.fromFormat('2021-03-13', 'yyyy-MM-dd').toISO() ?? '',
+};
+
+export const mockCommentWithLongValues: Pick<
+  CommentForDrawer,
+  'id' | 'author' | 'createdAt' | 'body' | 'updatedAt'
+> = {
+  id: 'fake_comment_2_uuid',
+  body: 'Hello, this is a comment. Hello, this is a comment. Hello, this is a comment. Hello, this is a comment. Hello, this is a comment. Hello, this is a comment.',
+  author: {
+    id: 'fake_comment_2_author_uuid',
+    displayName: mockUser.displayName + ' with a very long suffix' ?? '',
+    firstName: mockUser.firstName ?? '',
+    lastName: mockUser.lastName ?? '',
+    avatarUrl: mockUser.avatarUrl,
+  },
+  createdAt: DateTime.fromFormat('2021-03-12', 'yyyy-MM-dd').toISO() ?? '',
+  updatedAt: DateTime.fromFormat('2021-03-13', 'yyyy-MM-dd').toISO() ?? '',
+};

front/src/modules/activities/components/CommentThreadComments.tsx

@@ -8,7 +8,7 @@ import { AutosizeTextInput } from '@/ui/input/components/AutosizeTextInput';
 import { CommentThread, useCreateCommentMutation } from '~/generated/graphql';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
 
-import { CommentThreadItem } from '../comment/CommentThreadItem';
+import { Comment } from '../comment/Comment';
 import { GET_COMMENT_THREAD } from '../queries';
 import { CommentForDrawer } from '../types/CommentForDrawer';
 
@@ -80,7 +80,7 @@ export function CommentThreadComments({ commentThread }: OwnProps) {
           <StyledThreadItemListContainer>
             <StyledThreadCommentTitle>Comments</StyledThreadCommentTitle>
             {commentThread?.comments?.map((comment, index) => (
-              <CommentThreadItem key={comment.id} comment={comment} />
+              <Comment key={comment.id} comment={comment} />
             ))}
           </StyledThreadItemListContainer>
         </>

front/src/modules/activities/components/CommentThreadRelationPicker.tsx

@@ -152,8 +152,11 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
     placement: 'bottom-start',
   });
 
-  useListenClickOutsideArrayOfRef([refs.floating, refs.domReference], () => {
-    exitEditMode();
+  useListenClickOutsideArrayOfRef({
+    refs: [refs.floating, refs.domReference],
+    callback: () => {
+      exitEditMode();
+    },
   });
 
   const selectedEntities = flatMapAndSortEntityForSelectArrayOfArrayByName([