tasko/__tests__/board-title-form.test.tsx

import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { toast } from 'sonner';

import { BoardTitleForm } from '@/app/(platform)/(dashboard)/board/[boardId]/_components/board-title-form';
import { Board } from '@prisma/client';

jest.mock('@/hooks/use-action', () => ({
  useAction: jest.fn().mockImplementation(() => ({
    execute: jest.fn().mockImplementation(({ title }) => {
      Promise.resolve().then(() => {
        toast.success(`Board "${title}" updated!`);
      });
    }),
  })),
}));

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} />);

    const titleButton = screen.getByText('Test Board');
    expect(titleButton).toBeInTheDocument();
  });

  it('should switch to edit mode when clicked', async () => {
    render(<BoardTitleForm data={mockBoard} />);

    const titleButton = screen.getByText('Test Board');
    fireEvent.click(titleButton);

    const input = await screen.findByDisplayValue('Test Board');
    expect(input).toBeInTheDocument();
  });

  it('should update board title when form is blurred', async () => {
    render(<BoardTitleForm data={mockBoard} />);

    const titleButton = screen.getByText('Test Board');
    fireEvent.click(titleButton);

    const input = await screen.findByDisplayValue('Test Board');
    fireEvent.change(input, { target: { value: 'New Title' } });
    fireEvent.blur(input);

    await waitFor(() => {
      expect(toast.success).toHaveBeenCalledWith('Board "New Title" updated!');
    });
  });
});