Fixed Small Card Form Issue and Added Tests

__tests__/board-title-form.test.tsx

@@ -14,21 +14,21 @@ jest.mock('@/hooks/use-action', () => ({
   })),
 }));
 
-describe('BoardTitleForm', () => {
-  const mockBoard: Board = {
-    id: '1',
-    title: 'Test Board',
-    imageId: 'image1',
-    imageThumbUrl: 'thumb-url',
-    imageFullUrl: 'full-url',
-    imageUserName: 'user1',
-    imageLinkHTML: 'link-html',
-    imageDownloadUrl: 'download-url',
-    createdAt: new Date(),
-    updatedAt: new Date(),
-    orgId: 'org1',
-  };
+const mockBoard: Board = {
+  id: '1',
+  title: 'Test Board',
+  imageId: 'image1',
+  imageThumbUrl: 'thumb-url',
+  imageFullUrl: 'full-url',
+  imageUserName: 'user1',
+  imageLinkHTML: 'link-html',
+  imageDownloadUrl: 'download-url',
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  orgId: 'org1',
+};
 
+describe('BoardTitleForm', () => {
   it('should render correctly in browser environment', () => {
     render(<BoardTitleForm data={mockBoard} />);
 

__tests__/card-form.test.tsx

@@ -0,0 +1,86 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { CardForm } from '@/app/(platform)/(dashboard)/board/[boardId]/_components/card-form';
+import { toast } from 'sonner';
+
+jest.mock('@/hooks/use-action', () => ({
+  useAction: jest.fn().mockImplementation(() => ({
+    execute: jest.fn().mockImplementation(({ title }) => {
+      toast.success(`Card "${title}" created`);
+    }),
+  })),
+}));
+
+jest.mock('next/navigation', () => ({
+  useParams: jest.fn(() => ({
+    boardId: 'test-board-id',
+  })),
+}));
+
+let isEditing;
+
+const mockEnableEditing = jest.fn(() => {
+  isEditing = true;
+});
+
+const mockDisableEditing = jest.fn(() => {
+  isEditing = false;
+});
+const mockListId = 'test-list-id';
+
+describe('CardForm', () => {
+  it('should render correctly in browser environment', () => {
+    render(
+      <CardForm
+        listId={mockListId}
+        isEditing={true}
+        enableEditing={mockEnableEditing}
+        disableEditing={mockDisableEditing}
+      />
+    );
+    expect(
+      screen.getByPlaceholderText(/Enter a title for this card\.\.\./i)
+    ).toBeInTheDocument();
+  });
+
+  it('should create a new card when form is submitted using button', async () => {
+    render(
+      <CardForm
+        listId={mockListId}
+        isEditing={true}
+        enableEditing={mockEnableEditing}
+        disableEditing={mockDisableEditing}
+      />
+    );
+
+    const input = await screen.getByPlaceholderText(
+      'Enter a title for this card...'
+    );
+    fireEvent.change(input, { target: { value: 'New Card' } });
+    fireEvent.click(screen.getByText(/Add Card/i));
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith('Card "New Card" created');
+    });
+  });
+
+  it('should create a new card when form is submitted using the enter key', async () => {
+    render(
+      <CardForm
+        listId={mockListId}
+        isEditing={true}
+        enableEditing={mockEnableEditing}
+        disableEditing={mockDisableEditing}
+      />
+    );
+
+    const input = await screen.getByPlaceholderText(
+      'Enter a title for this card...'
+    );
+    fireEvent.change(input, { target: { value: 'New Card' } });
+    fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith('Card "New Card" created');
+    });
+  });
+});

__tests__/list-header.test.tsx

@@ -1,11 +1,5 @@
 import '@testing-library/jest-dom';
-import {
-  render,
-  screen,
-  fireEvent,
-  act,
-  waitFor,
-} from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { toast } from 'sonner';
 
 import { ListHeader } from '@/app/(platform)/(dashboard)/board/[boardId]/_components/list-header';