Test EditHabitDialog

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

@@ -1,7 +1,105 @@
-import EditHabitDialog from './EditHabitDialog';
+jest.mock('@hooks', () => ({
+  useTraits: jest
+    .fn()
+    .mockReturnValue({ traitsMap: { 1: { slug: 'trait-slug' } } }),
+}));
+
+jest.mock('@context', () => ({
+  useHabits: jest.fn().mockReturnValue({ updateHabit: jest.fn() }),
+}));
+
+jest.mock('@supabase/auth-helpers-react', () => ({
+  useUser: jest
+    .fn()
+    .mockReturnValue({ id: '4c6b7c3b-ec2f-45fb-8c3a-df16f7a4b3aa' }),
+}));
+
+import { useHabits } from '@context';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import EditHabitDialog, { type EditHabitDialogProps } from './EditHabitDialog';
 
 describe(EditHabitDialog.name, () => {
-  it('should be tested', () => {
-    expect(true).toBeTruthy();
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const props: EditHabitDialogProps = {
+    open: true,
+    onClose: jest.fn(),
+    habit: {
+      id: 7,
+      createdAt: '2024-02-21T17:30:08.886124+00:00',
+      updatedAt: null,
+      userId: '4c6b7c3b-ec2f-45fb-8c3a-df16f7a4b3aa',
+      name: 'Habit Name',
+      description: 'Habit description',
+      traitId: 1,
+      iconPath: '',
+    },
+  };
+
+  it('should set values from props', () => {
+    const { getByRole, getByLabelText } = render(
+      <EditHabitDialog {...props} />
+    );
+    expect(getByRole('dialog')).toBeDefined();
+    expect(getByLabelText('Name')).toHaveProperty('value', 'Habit Name');
+    expect(getByLabelText('Description (optional)')).toHaveProperty(
+      'value',
+      'Habit description'
+    );
+  });
+
+  it('should not render if habit is not provided', () => {
+    const { queryByRole } = render(<EditHabitDialog {...props} habit={null} />);
+    expect(queryByRole('dialog')).toBeNull();
+  });
+
+  it('should not render if open is false', () => {
+    const { queryByRole } = render(<EditHabitDialog {...props} open={false} />);
+    expect(queryByRole('dialog')).toBeNull();
+  });
+
+  it('should call onClose when closed', async () => {
+    const onClose = jest.fn();
+    const { getByTestId } = render(
+      <EditHabitDialog {...props} onClose={onClose} />
+    );
+    const closeIcon = getByTestId('close-icon');
+    fireEvent.click(closeIcon);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('should call updateHabit when submitted', async () => {
+    const mockUpdateHabit = jest.fn();
+    (useHabits as jest.Mock).mockReturnValue({ updateHabit: mockUpdateHabit });
+    const { getByRole, getByLabelText } = render(
+      <EditHabitDialog {...props} />
+    );
+    const nameInput = getByLabelText('Name');
+    const descriptionInput = getByLabelText('Description (optional)');
+    const form = getByRole('form');
+    const updatedAt = new Date();
+    updatedAt.setMilliseconds(0);
+    act(() => {
+      fireEvent.change(nameInput, { target: { value: 'New Habit Name' } });
+      fireEvent.change(descriptionInput, {
+        target: { value: 'New habit description' },
+      });
+      fireEvent.submit(form);
+    });
+    await waitFor(() =>
+      expect(mockUpdateHabit).toHaveBeenCalledWith(7, {
+        createdAt: '2024-02-21T17:30:08.886124+00:00',
+        updatedAt: updatedAt.toISOString(),
+        userId: '4c6b7c3b-ec2f-45fb-8c3a-df16f7a4b3aa',
+        name: 'New Habit Name',
+        description: 'New habit description',
+        traitId: 1,
+        iconPath: '',
+      })
+    );
   });
 });

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

@@ -17,9 +17,9 @@ import React from 'react';
 
 import { StyledForm } from './styled';
 
-type EditHabitDialogProps = {
+export type EditHabitDialogProps = {
   open: boolean;
-  habit: Habit;
+  habit: Habit | null;
   onClose?: () => void;
 };
 
@@ -73,6 +73,8 @@ const EditHabitDialog = ({
   };
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    const updatedAt = new Date();
+    updatedAt.setMilliseconds(0);
     event.preventDefault();
     setIsUpdating(true);
     const newHabit = {
@@ -82,7 +84,7 @@ const EditHabitDialog = ({
       userId: user?.id as string,
       iconPath: habit.iconPath,
       createdAt: habit.createdAt,
-      updatedAt: new Date().toISOString(),
+      updatedAt: updatedAt.toISOString(),
     };
     await updateHabit(habit.id, newHabit);
     setIsUpdating(false);
@@ -92,10 +94,10 @@ const EditHabitDialog = ({
   return (
     <Modal open={open} onClose={handleClose}>
       <ModalDialog>
-        <ModalClose />
+        <ModalClose data-testid="close-icon" onClick={handleClose} />
         <DialogTitle>Edit habit</DialogTitle>
         <DialogContent>
-          <StyledForm onSubmit={handleSubmit}>
+          <StyledForm onSubmit={handleSubmit} role="form">
             <FloatingLabelInput
               value={name}
               onChange={handleNameChange}

src/components/user-account/use-account-page/useAccountPage.test.ts

@@ -13,6 +13,7 @@ jest.mock('@supabase/auth-helpers-react', () => ({
 
 jest.mock('@utils', () => ({
   transformClientEntity: jest.fn(),
+  transformServerEntities: jest.fn(),
 }));
 
 import { getUserAccount, updateUserAccount } from '@services';

src/models/habit.model.ts

@@ -6,7 +6,7 @@ export type ServerHabit = {
   description: string;
   user_id: string;
   created_at: string;
-  updated_at: string;
+  updated_at: string | null;
   icon_path?: string;
   trait_id: number;
 };
@@ -17,7 +17,7 @@ export type Habit = {
   description: string;
   userId: string;
   createdAt: string;
-  updatedAt?: string;
+  updatedAt: string | null;
   iconPath?: string;
   traitId: number;
 };