Partially test HabitsPage component

.github/workflows/jest-coverage.yml

@@ -1,10 +1,12 @@
-name: 'coverage'
+name: Jest Coverage Report
+
 on:
     pull_request:
         branches:
             - master
             - main
 jobs:
+    permissions: write-all
     coverage:
         runs-on: ubuntu-latest
         steps:

package.json

@@ -34,7 +34,7 @@
     "prettier:write": "prettier --write src",
     "typecheck": "tsc --noEmit",
     "db:migrate": "supabase migration up",
-    "test": "DOTENV_CONFIG_PATH=./.env.test jest --setupFiles dotenv/config --config tests/jest.config.js",
+    "test": "DEBUG_PRINT_LIMIT=30000 DOTENV_CONFIG_PATH=./.env.test jest --setupFiles dotenv/config --config tests/jest.config.js",
     "test:watch": "yarn test --watch",
     "test:coverage": "yarn test --coverage"
   },

src/components/calendar/CalendarGrid.tsx

@@ -23,7 +23,6 @@ const CalendarGrid = ({ weeksInMonth, state }: CalendarGridProps) => {
   const { gridProps } = useCalendarGrid({}, state);
 
   const { occurrencesByDate } = useOccurrences();
-  console.log('occurrencesByDate', occurrencesByDate);
   const [dayModalDialogOpen, setDayModalDialogOpen] = React.useState(false);
   const [activeDate, setActiveDate] = React.useState<Date | null>(null);
 

src/components/habit/edit-habit/EditHabitDialog.test.tsx

@@ -98,7 +98,7 @@ describe(EditHabitDialog.name, () => {
     );
     const nameInput = getByLabelText('Name');
     const descriptionInput = getByLabelText('Description (optional)');
-    const form = getByRole('form');
+    const form = getByRole('edit-habit-form');
     const updatedAt = new Date();
     updatedAt.setMilliseconds(0);
     updatedAt.setSeconds(0);

src/components/habit/edit-habit/EditHabitDialog.tsx

@@ -55,6 +55,7 @@ const EditHabitDialog = ({
   const handleClose = () => {
     setIsOpen(false);
     onClose?.();
+    console.log('called handleClose');
   };
 
   const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -92,12 +93,17 @@ const EditHabitDialog = ({
   };
 
   return (
-    <Modal open={open} onClose={handleClose}>
+    <Modal
+      open={open}
+      onClose={handleClose}
+      role="edit-habit-modal"
+      data-visible={isOpen.toString()}
+    >
       <ModalDialog>
         <ModalClose data-testid="close-icon" onClick={handleClose} />
         <DialogTitle>Edit habit</DialogTitle>
         <DialogContent>
-          <StyledForm onSubmit={handleSubmit} role="form">
+          <StyledForm onSubmit={handleSubmit} role="edit-habit-form">
             <FloatingLabelInput
               value={name}
               onChange={handleNameChange}
@@ -134,7 +140,12 @@ const EditHabitDialog = ({
                 Bad
               </Option>
             </Select>
-            <Button type="submit" fullWidth loading={isUpdating}>
+            <Button
+              role="submit-edited-habit-button"
+              type="submit"
+              fullWidth
+              loading={isUpdating}
+            >
               Done
             </Button>
           </StyledForm>

src/components/habit/habits-page/HabitItem.tsx

@@ -164,6 +164,7 @@ const HabitItem = ({ habit, onEdit, onDelete }: HabitItemProps) => {
               color="primary"
               onClick={onEdit}
               role="edit-habit-button"
+              data-testid={`edit-habit-id-${habit.id}-button`}
             >
               <ModeRoundedIcon fontSize="small" />
             </StyledEditIconButton>

src/components/habit/habits-page/HabitsPage.test.tsx

@@ -1,24 +1,135 @@
-import HabitsPage from './HabitsPage';
+jest.mock('@context', () => ({
+  TraitsProvider: jest.fn(({ children }) => children),
+  HabitsProvider: jest.fn(({ children }) => children),
+  useHabits: jest.fn().mockImplementation(() => ({
+    habits: [],
+    habitsMap: {},
+    removeHabit: jest.fn(),
+  })),
+  useSnackbar: jest.fn().mockReturnValue({}),
+  useTraits: jest.fn().mockReturnValue({
+    traitsMap: {},
+    traits: [],
+    allTraits: [],
+  }),
+  useOccurrences: jest.fn().mockReturnValue({
+    removeOccurrencesByHabitId: jest.fn(),
+  }),
+}));
 
 jest.mock('@services', () => ({
-  listHabits: jest.fn(() =>
-    Promise.resolve([
+  StorageBuckets: {
+    HABIT_ICONS: 'habit-icons',
+  },
+  listHabits: jest.fn().mockReturnValue(() => []),
+}));
+
+import { HabitsProvider, TraitsProvider, useHabits, useTraits } from '@context';
+import type { Habit } from '@models';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import HabitsPage from './HabitsPage';
+
+describe(HabitsPage.name, () => {
+  it('should display habits', async () => {
+    const habits: Habit[] = [
       {
         id: 1,
-        name: 'Habit name',
-        description: 'Habit description',
+        name: 'Habit name #1',
+        description: 'Habit description #1',
         userId: 'uuid-42',
         createdAt: '2021-01-01T00:00:00Z',
         updatedAt: '2021-01-01T00:00:00Z',
-        iconPath: 'icon-path',
+        iconPath: 'icon-path-2',
         traitId: 1,
       },
-    ])
-  ),
-}));
+      {
+        id: 2,
+        name: 'Habit name #2',
+        description: 'Habit description #2',
+        userId: 'uuid-43',
+        createdAt: '2021-01-01T00:00:00Z',
+        updatedAt: '2021-01-01T00:00:00Z',
+        iconPath: 'icon-path-2',
+        traitId: 1,
+      },
+    ];
+    (useHabits as jest.Mock).mockImplementation(() => ({
+      habits,
+      habitsMap: {
+        1: habits[0],
+        2: habits[1],
+      },
+      removeHabit: jest.fn(),
+    }));
+    const { getByText } = render(
+      <TraitsProvider>
+        <HabitsProvider>
+          <HabitsPage />
+        </HabitsProvider>
+      </TraitsProvider>
+    );
+    await waitFor(() => {
+      expect(getByText('Your habits'));
+      expect(getByText('Count: 2'));
+      expect(getByText('Habit name #1'));
+      expect(getByText('Habit name #2'));
+      expect(getByText('Habit description #1'));
+      expect(getByText('Habit description #2'));
+    });
+  });
 
-describe(HabitsPage.name, () => {
-  it('should be tested', () => {
-    expect(true).toBeTruthy();
+  it('should open edit dialog on edit icon button click', async () => {
+    const habits: Habit[] = [
+      {
+        id: 1,
+        name: 'Habit name #1',
+        description: 'Habit description #1',
+        userId: 'uuid-42',
+        createdAt: '2021-01-01T00:00:00Z',
+        updatedAt: '2021-01-01T00:00:00Z',
+        iconPath: 'icon-path-2',
+        traitId: 1,
+      },
+      {
+        id: 2,
+        name: 'Habit name #2',
+        description: 'Habit description #2',
+        userId: 'uuid-43',
+        createdAt: '2021-01-01T00:00:00Z',
+        updatedAt: '2021-01-01T00:00:00Z',
+        iconPath: 'icon-path-2',
+        traitId: 2,
+      },
+    ];
+    (useHabits as jest.Mock).mockImplementation(() => ({
+      habits,
+      habitsMap: {
+        1: habits[0],
+        2: habits[1],
+      },
+      removeHabit: jest.fn(),
+    }));
+    (useTraits as jest.Mock).mockImplementation(() => ({
+      traitsMap: { 1: {}, 2: {} },
+      allTraits: [],
+    }));
+    const { queryByRole, getByRole, getByTestId } = render(
+      <TraitsProvider>
+        <HabitsProvider>
+          <HabitsPage />
+        </HabitsProvider>
+      </TraitsProvider>
+    );
+    expect(queryByRole('edit-habit-modal')).toBeNull();
+    fireEvent.click(getByTestId('edit-habit-id-2-button'));
+    expect(getByRole('edit-habit-modal')).toBeDefined();
+    // const form = getByRole('edit-habit-form');
+    // form.dispatchEvent(new Event('submit'));
+    // // fireEvent.click(getByRole('submit-edited-habit-button'));
+    // await waitFor(() => {
+    //   expect(queryByRole('edit-habit-modal')).toBeNull();
+    // });
   });
 });

src/components/habit/habits-page/HabitsPage.tsx

@@ -58,11 +58,13 @@ const HabitsPage = () => {
           />
         ))}
       </StyledList>
-      <EditHabitDialog
-        open={isEditingHabit}
-        onClose={handleEditEnd}
-        habit={habitsMap[habitIdToEdit]}
-      />
+      {!!habitIdToEdit && (
+        <EditHabitDialog
+          open={isEditingHabit}
+          onClose={handleEditEnd}
+          habit={habitsMap[habitIdToEdit]}
+        />
+      )}
       <AddHabitDialogButton />
       {!!habitIdToRemove && (
         <ConfirmDialog

src/context/Traits/TraitsProvider.tsx

@@ -12,7 +12,6 @@ const TraitsProvider = ({ children }: TraitsProviderProps) => {
   const [userTraits, setUserTraits] = React.useState<Trait[]>([]);
   const [traitsMap, setTraitsMap] = React.useState<TraitsMap>({});
   const [fetchingTraits, setFetchingTraits] = React.useState(false);
-  console.log('useTraits');
 
   const allTraits = [...publicTraits, ...userTraits];