File test thread-input component

thread-input.test.jsx

import {
  describe,
  test,
  expect,
  afterEach,
  beforeAll,
  vi,
} from 'vitest';
import { render, screen, cleanup } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import * as matchers from '@testing-library/jest-dom/matchers';
import ThreadInput from './thread-input';
import { renderWithProviders } from './render-with-providers';

expect.extend(matchers);

/* Skenario testing
 *
 * - ThreadInput component
 *   - Should handle title typing correctly
 *   - Should handle category typing correctly
 *   - Should handle body typing correctly
 *   - Should call onCreateThread function when save button clicked
 */

describe('ThreadInput component', () => {
  beforeAll(() => {
    // create mock for next/navigation
    vi.mock('next/navigation', () => {
      return {
        useRouter: () => ({
          push: () => {},
          replace: () => {},
          prefetch: () => {},
        }),
      };
    });
    // create mock for redux-hooks module
    vi.mock('@/hooks/redux-hooks', () => ({ useAppDispatch: () => {} }));
  });

  afterEach(() => {
    cleanup();
  });

  test('Should handle title typing correctly', async () => {
    // Arrange
    render(<ThreadInput />);
    const titleInput = screen.getByPlaceholderText(/title/i);

    // Action
    await userEvent.type(titleInput, 'This is title');

    // Assert
    expect(titleInput).toHaveValue('This is title');
  });

  test('Should handle category typing correctly', async () => {
    // Arrange
    render(<ThreadInput />);
    const categoryInput = screen.getByPlaceholderText(/category/i);

    // Action
    await userEvent.type(categoryInput, 'This is category');

    // Assert
    expect(categoryInput).toHaveValue('This is category');
  });

  test('Should handle body typing correctly', async () => {
    // Arrange
    render(<ThreadInput />);
    const bodyInput = screen.getByPlaceholderText(/body/i);

    // Action
    await userEvent.type(bodyInput, 'This is body');

    // Assert
    expect(bodyInput).toHaveValue('This is body');
  });

  test('Should call asyncCreateThread function when save button clicked', async () => {
    // Arrange
    vi.unmock('@/hooks/redux-hooks');
    // create mock for asyncCreateThread module
    vi.mock('@/lib/threads/action', async (importOriginal) => {
      const mod = await importOriginal();
      return {
        ...mod,
        asyncCreateThread: vi.fn().mockResolvedValue(true),
      };
    });
    const { asyncCreateThread } = await vi.importMock('@/lib/threads/action');

    renderWithProviders(<ThreadInput />);
    const titleInput = screen.getByPlaceholderText(/title/i);
    await userEvent.type(titleInput, 'This is title');
    const categoryInput = screen.getByPlaceholderText(/category/i);
    await userEvent.type(categoryInput, 'This is category');
    const bodyInput = screen.getByPlaceholderText(/body/i);
    await userEvent.type(bodyInput, 'This is body');
    const saveButton = screen.getByText('Save');

    // Action
    await userEvent.click(saveButton);

    // Assert
    expect(asyncCreateThread()).toHaveBeenCalled();
  });
});