Компонентное тестирование с 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 }));

    // Кнопка переходит в состояние disabled на время отправки
    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('');
  });
});