Компонентне тестування з Vitest та React Testing Library у React 19

import React from 'react';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { server } from '@/test/mocks/server';
import { ChangePasswordForm } from '../ui/ChangePasswordForm';

describe('<ChangePasswordForm />', () => {
  it('рендерить форму в початковому доступному стані', () => {
    render(<ChangePasswordForm />);

    expect(screen.getByRole('heading', { level: 2, name: /зміна пароля/i })).toBeInTheDocument();
    expect(screen.getByLabelText(/поточний пароль/i)).toBeInTheDocument();
    expect(screen.getByLabelText(/^новий пароль/i)).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /зберегти пароль/i })).toBeEnabled();
  });

  it('відображає помилки клієнтської валідації при сабміті порожніх полів', async () => {
    const user = userEvent.setup();
    render(<ChangePasswordForm />);

    const submitBtn = screen.getByRole('button', { name: /зберегти пароль/i });
    await user.click(submitBtn);

    // findByText очікує появи помилки в DOM у циклі мікротасок
    const currentPassError = await screen.findByText(/введіть поточний пароль/i);
    const newPassError = screen.getByText(/пароль має містити щонайменше 8 символів/i);

    expect(currentPassError).toBeInTheDocument();
    expect(newPassError).toBeInTheDocument();
  });

  it('обробляє помилку сервера 422 (невірний поточний пароль)', async () => {
    // Локальне перевизначення обробника MSW для негативного сценарію
    server.use(
      http.post('/api/auth/change-password', () => {
        return HttpResponse.json(
          { message: 'Поточний пароль вказано невірно' },
          { status: 422 }
        );
      })
    );

    const user = userEvent.setup();
    render(<ChangePasswordForm />);

    await user.type(screen.getByLabelText(/поточний пароль/i), 'WrongOldPassword123!');
    await user.type(screen.getByLabelText(/^новий пароль/i), 'SuperSecurePass2026!');
    await user.click(screen.getByRole('button', { name: /зберегти пароль/i }));

    // Кнопка блокується на час виконання запиту
    expect(screen.getByRole('button', { name: /збереження\.\.\./i })).toBeDisabled();

    // Перевіряємо банер помилки із семантичною роллю alert
    const serverAlert = await screen.findByRole('alert');
    expect(serverAlert).toHaveTextContent(/поточний пароль вказано невірно/i);
  });

  it('успішно зберігає новий пароль та очищує поля форми', async () => {
    server.use(
      http.post('/api/auth/change-password', async ({ request }) => {
        const body = (await request.json()) as { oldPass: string; newPass: string };
        if (body.newPass === 'SuperSecurePass2026!') {
          return HttpResponse.json({ success: true }, { status: 200 });
        }
        return HttpResponse.json({ success: false }, { status: 400 });
      })
    );

    const user = userEvent.setup();
    render(<ChangePasswordForm />);

    const oldInput = screen.getByLabelText(/поточний пароль/i);
    const newInput = screen.getByLabelText(/^новий пароль/i);

    await user.type(oldInput, 'ValidOldPass123!');
    await user.type(newInput, 'SuperSecurePass2026!');
    await user.click(screen.getByRole('button', { name: /зберегти пароль/i }));

    // Очікуємо появу повідомлення про успіх
    const successNotice = await screen.findByText(/пароль успішно змінено/i);
    expect(successNotice).toBeInTheDocument();

    // Поля введення повинні бути очищені
    expect(oldInput).toHaveValue('');
    expect(newInput).toHaveValue('');
  });
});