test: add and update tests and stories for team components

frontend/src/components/CardBoard/CardBody/DuplicateBoardNameDialog.spec.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import { libraryMocks } from '@/utils/testing/mocks';
 import { renderWithProviders } from '@/utils/testing/renderWithProviders';
 import { UserFactory } from '@/utils/factories/user';
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { act } from 'react-dom/test-utils';
 import DuplicateBoardNameDialog, {
   DuplicateBoardNameDialogProps,
 } from './DuplicateBoardNameDialog';

frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.spec.tsx

@@ -4,43 +4,47 @@ import { UserListFactory } from '@/utils/factories/user';
 import { fireEvent, waitFor } from '@testing-library/react';
 import UserListDialog, { UserListDialogProps } from './UserListDialog';
 
-const DEFAULT_PROPS = {
-  usersList: UserListFactory.createMany(3),
-  setIsOpen: jest.fn(),
-  isOpen: true,
-  confirmationHandler: jest.fn(),
-};
-
 const router = createMockRouter({});
 
-const render = (props: UserListDialogProps = DEFAULT_PROPS) =>
-  renderWithProviders(<UserListDialog {...props} />, { routerOptions: router });
+const render = (props: Partial<UserListDialogProps> = {}) =>
+  renderWithProviders(
+    <UserListDialog
+      usersList={UserListFactory.createMany(3)}
+      setIsOpen={jest.fn()}
+      isOpen
+      confirmationHandler={jest.fn()}
+      confirmationLabel="confirm"
+      title="Title"
+      {...props}
+    />,
+    { routerOptions: router },
+  );
 
 describe('Components/Primitives/Dialogs/UserListDialog', () => {
   it('should render correctly', () => {
     // Arrange
-    const testProps = { ...DEFAULT_PROPS };
+    const usersList = UserListFactory.createMany(3);
 
     // Act
-    const { getAllByTestId, getByTestId } = render(testProps);
+    const { getAllByTestId, getByTestId } = render({ usersList });
 
     // Assert
-    expect(getAllByTestId('checkboxUserItem')).toHaveLength(testProps.usersList.length);
+    expect(getAllByTestId('checkboxUserItem')).toHaveLength(usersList.length);
     expect(getByTestId('searchInput')).toBeInTheDocument();
   });
 
   it('should call confirmationHandler function', async () => {
     // Arrange
-    const testProps = { ...DEFAULT_PROPS };
+    const confirmationHandler = jest.fn();
 
     // Act
-    const { getByTestId } = render(testProps);
+    const { getByTestId } = render({ confirmationHandler });
 
     // Assert
     fireEvent.click(getByTestId('dialogFooterSubmit'));
 
     await waitFor(() => {
-      expect(testProps.confirmationHandler).toBeCalled();
+      expect(confirmationHandler).toBeCalled();
     });
   });
 });

frontend/src/components/Primitives/Dialogs/UserListDialog/UserListDialog.tsx

@@ -107,63 +107,65 @@ const UserListDialog = React.memo<UserListDialogProps>(
 
     return (
       <Dialog isOpen={isOpen} setIsOpen={setIsOpen}>
-        <Dialog.Header title={confirmationLabel} />
-        <Flex css={{ p: '$32' }} direction="column">
-          <SearchInput
-            currentValue={searchMember}
-            handleChange={(e) => {
-              setSearchMember(e.target.value);
-            }}
-            handleClear={() => {
-              setSearchMember('');
-            }}
-            placeholder="Search member"
-          />
-        </Flex>
-        <Text css={{ display: 'block', px: '$32', pb: '$24' }} heading="4">
-          {title}
-        </Text>
-        <Flex direction="column" gap={8}>
-          <Flex align="center" css={{ px: '$32' }}>
-            <Flex css={{ flex: 1 }}>
-              <Flex align="center" gap={8}>
-                <Checkbox
-                  id="selectAll"
-                  checked={isCheckAll}
-                  handleChange={handleSelectAll}
-                  size="md"
-                />
-                <Text heading={5}>Name</Text>
+        <Flex direction="column" css={{ height: '100%' }} data-testid="userListDialog">
+          <Dialog.Header title={confirmationLabel} />
+          <Flex css={{ p: '$32' }} direction="column">
+            <SearchInput
+              currentValue={searchMember}
+              handleChange={(e) => {
+                setSearchMember(e.target.value);
+              }}
+              handleClear={() => {
+                setSearchMember('');
+              }}
+              placeholder="Search member"
+            />
+          </Flex>
+          <Text css={{ display: 'block', px: '$32', pb: '$24' }} heading="4">
+            {title}
+          </Text>
+          <Flex direction="column" gap={8}>
+            <Flex align="center" css={{ px: '$32' }}>
+              <Flex css={{ flex: 1 }}>
+                <Flex align="center" gap={8}>
+                  <Checkbox
+                    id="selectAll"
+                    checked={isCheckAll}
+                    handleChange={handleSelectAll}
+                    size="md"
+                  />
+                  <Text heading={5}>Name</Text>
+                </Flex>
+              </Flex>
+              <Flex css={{ flex: 1 }}>
+                <Text heading={5}>Email</Text>
               </Flex>
             </Flex>
-            <Flex css={{ flex: 1 }}>
-              <Text heading={5}>Email</Text>
-            </Flex>
+            <Separator orientation="horizontal" />
           </Flex>
-          <Separator orientation="horizontal" />
-        </Flex>
-        <Flex
-          direction="column"
-          justify="start"
-          css={{ height: '100%', overflowY: 'auto', py: '$16' }}
-        >
-          <Flex css={{ px: '$32' }} direction="column" gap={20}>
-            {filteredList?.map((user) => (
-              <CheckboxUserItem
-                key={user._id}
-                user={user}
-                disabled={user._id === userId && !isSAdmin}
-                handleChecked={handleChecked}
-              />
-            ))}
+          <Flex
+            direction="column"
+            justify="start"
+            css={{ height: '100%', overflowY: 'auto', py: '$16' }}
+          >
+            <Flex css={{ px: '$32' }} direction="column" gap={20}>
+              {filteredList?.map((user) => (
+                <CheckboxUserItem
+                  key={user._id}
+                  user={user}
+                  disabled={user._id === userId && !isSAdmin}
+                  handleChecked={handleChecked}
+                />
+              ))}
+            </Flex>
           </Flex>
+          <Dialog.Footer
+            handleAffirmative={handleUpdateUsers}
+            handleClose={handleClose}
+            affirmativeLabel="Update"
+            disabled={disableUpdate}
+          />
         </Flex>
-        <Dialog.Footer
-          handleAffirmative={handleUpdateUsers}
-          handleClose={handleClose}
-          affirmativeLabel="Update"
-          disabled={disableUpdate}
-        />
       </Dialog>
     );
   },

frontend/src/components/Teams/CreateTeam/CreateTeam.spec.tsx

@@ -0,0 +1,32 @@
+import { renderWithProviders } from '@/utils/testing/renderWithProviders';
+import { fireEvent, waitFor } from '@testing-library/react';
+import CreateTeam from './CreateTeam';
+
+const render = () => renderWithProviders(<CreateTeam />);
+
+describe('Teams/CreateTeam', () => {
+  it('should render correctly', () => {
+    // Act
+    const { getByTestId, queryByLabelText } = render();
+
+    // Assert
+    expect(getByTestId('createHeader')).toBeInTheDocument();
+    expect(getByTestId('createFooter')).toBeInTheDocument();
+    expect(getByTestId('tipbar')).toBeInTheDocument();
+    expect(queryByLabelText('Team name')).toBeInTheDocument();
+    expect(getByTestId('addRemoveMembersTrigger')).toBeInTheDocument();
+    expect(getByTestId('teamMembersList')).toBeInTheDocument();
+  });
+
+  it('should open a UserListDialog', async () => {
+    // Act
+    const { getByTestId } = render();
+
+    // Assert
+    fireEvent.click(getByTestId('addRemoveMembersTrigger'));
+
+    await waitFor(() => {
+      expect(getByTestId('userListDialog')).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/Teams/CreateTeam/CreateTeam.tsx

@@ -107,7 +107,12 @@ const CreateTeam = () => {
                   <Text css={{ flex: 1 }} heading="3">
                     Team Members
                   </Text>
-                  <Button variant="link" size="sm" onClick={handleOpen}>
+                  <Button
+                    variant="link"
+                    size="sm"
+                    onClick={handleOpen}
+                    data-testid="addRemoveMembersTrigger"
+                  >
                     <Icon name="plus" />
                     Add/remove members
                   </Button>

frontend/src/components/Teams/Team/Header/Header.spec.tsx

@@ -1,65 +1,59 @@
 import React from 'react';
 import { libraryMocks } from '@/utils/testing/mocks';
 import { fireEvent, waitFor } from '@testing-library/react';
-import { TeamFactory } from '@/utils/factories/team';
 import { renderWithProviders } from '@/utils/testing/renderWithProviders';
 import { TEAMS_ROUTE } from '@/utils/routes';
+import { TeamFactory } from '@/utils/factories/team';
 import TeamHeader, { TeamHeaderProps } from './Header';
 
 const { mockRouter } = libraryMocks.mockNextRouter({ pathname: '/teams' });
-const render = (props: TeamHeaderProps) =>
-  renderWithProviders(<TeamHeader {...props} />, { routerOptions: mockRouter });
-
-describe('Components/Teams/Team/Header', () => {
-  let defaultProps: TeamHeaderProps;
-  beforeEach(() => {
-    const team = TeamFactory.create();
-    defaultProps = {
-      title: team.name,
-      hasPermissions: true,
-    };
+libraryMocks.mockReactQuery();
+const render = (props: Partial<TeamHeaderProps> = {}) =>
+  renderWithProviders(<TeamHeader title="MyTeam" hasPermissions {...props} />, {
+    routerOptions: mockRouter,
   });
 
+describe('Components/Teams/Team/Header', () => {
   it('should render correctly', () => {
     // Arrange
-    const teamHeaderProps = { ...defaultProps };
+    const team = TeamFactory.create();
 
     // Act
-    const { getByTestId } = render(teamHeaderProps);
+    const { getByTestId } = render({ title: team.name });
     const title = getByTestId('teamHeader').querySelector('span');
 
     // Assert
-    expect(title).toHaveTextContent(teamHeaderProps.title);
+    expect(title).toHaveTextContent(team.name);
   });
 
   it('should render breadcrumbs correctly', async () => {
     // Arrange
-    const teamHeaderProps = { ...defaultProps };
+    const team = TeamFactory.create();
 
     // Act
-    const { getByTestId } = render(teamHeaderProps);
+    const { getByTestId } = render({ title: team.name });
     const breadcrumbs = getByTestId('teamHeader').querySelectorAll('li');
     const [teamBreadcrumb, currentTeamBreadcrumb] = breadcrumbs;
 
     fireEvent.click(teamBreadcrumb.querySelector('a')!);
 
     // Assert
     expect(breadcrumbs).toHaveLength(2);
-    expect(currentTeamBreadcrumb).toHaveTextContent(teamHeaderProps.title);
+    expect(currentTeamBreadcrumb).toHaveTextContent(team.name);
+
     await waitFor(() => {
       expect(mockRouter.push).toHaveBeenCalledWith(TEAMS_ROUTE, TEAMS_ROUTE, expect.anything());
     });
   });
 
   it('should be able to open the team members dialog', async () => {
     // Arrange
-    const teamHeaderProps = { ...defaultProps };
     const setState = jest.fn();
     const useStateMock: any = (initState: boolean) => [initState, setState];
     jest.spyOn(React, 'useState').mockImplementationOnce(useStateMock);
 
     // Act
-    const { getByTestId } = render(teamHeaderProps);
+    const { getByTestId } = render();
     const button = getByTestId('teamHeader').querySelector('button');
     if (button) fireEvent.click(button);
 

frontend/src/components/Teams/Team/Header/Header.stories.tsx

@@ -0,0 +1,41 @@
+import { ComponentStory } from '@storybook/react';
+import Header from './Header';
+
+export default {
+  title: 'Teams/Header',
+  component: Header,
+  parameters: {
+    layout: 'padded',
+    previewTabs: {
+      'storybook/docs/panel': {
+        hidden: true,
+      },
+    },
+  },
+  args: {
+    title: 'My Team',
+    hasPermissions: true,
+  },
+  argTypes: {
+    title: {
+      type: { required: true, name: 'string' },
+      description: 'Team Name',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    hasPermissions: {
+      type: { required: true, name: 'boolean' },
+      description:
+        "Controls if the User is able to add/remove members (plase don't cancel the dialog)",
+      table: {
+        type: { summary: 'boolean' },
+      },
+    },
+  },
+};
+
+const Template: ComponentStory<typeof Header> = (props) => <Header {...props} />;
+
+export const Default = Template.bind({});
+Default.storyName = 'Basic Usage';