Філософія React Testing Library (RTL)

+-----------------------------------------------------------------------+
|                      Користувач / Скринрідер                          |
+-----------------------------------------------------------------------+
                                    │
                                    ▼ (Сприйняття через UI & ARIA)
+-----------------------------------------------------------------------+
|                 Accessibility Tree (AOM) & DOM Tree                   |
|  - role: "button", name: "Оформити замовлення"                        |
|  - role: "textbox", name: "Електронна пошта"                          |
|  - role: "status", aria-live: "polite"                                |
+-----------------------------------------------------------------------+
                                    ▲
                                    │ (Семантичні селектори RTL)
+-----------------------------------------------------------------------+
|             React Testing Library (screen.getByRole / findBy)         |
+-----------------------------------------------------------------------+
                                    ▲
                                    │ (Ізоляція: рендер чорного ящика)
+-----------------------------------------------------------------------+
|           React 19 Component (Fiber / Hooks / Private State)          |
+-----------------------------------------------------------------------+

+-----------------------------------------------------------------------+
| ПРІОРИТЕТ 1: Доступно всім користувачам (Accessible to Everyone)     |
|  ├── getByRole(role, { name, pressed, expanded, hidden })             |
|  ├── getByLabelText(text, { selector })                               |
|  ├── getByPlaceholderText(text)                                       |
|  ├── getByText(text, { selector })                                    |
|  └── getByDisplayValue(value)                                         |
+-----------------------------------------------------------------------+
                                    │
                                    ▼
+-----------------------------------------------------------------------+
| ПРІОРИТЕТ 2: Семантичні візуальні атрибути                            |
|  ├── getByAltText(altText)                                            |
|  └── getByTitle(titleText)                                            |
+-----------------------------------------------------------------------+
                                    │
                                    ▼
+-----------------------------------------------------------------------+
| ПРІОРИТЕТ 3: Крайній захід (Escape Hatch)                             |
|  └── getByTestId('checkout-submit-btn')                               |
+-----------------------------------------------------------------------+

import { render, screen, logRoles } from '@testing-library/react';

// Рендеринг дерева
const { container } = render(<CheckoutForm />);

// Виведення поточного стану DOM у консоль тестового раннера
screen.debug();

// Виведення доступних семантичних ролей ARIA для переданого контейнера
logRoles(container);

import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React, { useState } from 'react';

interface OrderItem {
  readonly id: string;
  readonly title: string;
  readonly price: number;
}

interface OrderProps {
  readonly items: readonly OrderItem[];
  readonly onCheckout: (total: number) => void;
}

function OrderSummary({ items, onCheckout }: OrderProps) {
  const [promoApplied, setPromoApplied] = useState(false);
  const total = items.reduce((sum, item) => sum + item.price, 0);
  const finalPrice = promoApplied ? total * 0.9 : total;

  return (
    <section aria-labelledby="order-heading">
      <h2 id="order-heading">Зведення замовлення</h2>

      <ul aria-label="Список позицій">
        {items.map((item) => (
          <li key={item.id}>
            <span>{item.title}</span> — <span>{item.price} грн</span>
          </li>
        ))}
      </ul>

      <label>
        <input
          type="checkbox"
          checked={promoApplied}
          onChange={(e) => setPromoApplied(e.target.checked)}
        />
        Застосувати знижку 10%
      </label>

      <div role="status" aria-live="polite">
        Разом до сплати: {finalPrice} грн
      </div>

      <button
        type="button"
        disabled={items.length === 0}
        onClick={() => onCheckout(finalPrice)}
      >
        Підтвердити та оплатити
      </button>
    </section>
  );
}

describe('OrderSummary Component', () => {
  const mockItems: readonly OrderItem[] = [
    { id: '1', title: 'React 19 Architecture Guide', price: 1500 },
    { id: '2', title: 'Vitest Deep Dive', price: 1200 },
  ];

  it('коректно знаходить елементи через дерево ARIA та розраховує підсумкову вартість', async () => {
    const user = userEvent.setup();
    const handleCheckout = vi.fn();

    render(<OrderSummary items={mockItems} onCheckout={handleCheckout} />);

    // 1. Пошук структурних заголовків і списків за роллю та доступним ім'ям
    expect(
      screen.getByRole('region', { name: 'Зведення замовлення' })
    ).toBeInTheDocument();

    expect(
      screen.getByRole('list', { name: 'Список позицій' })
    ).toBeInTheDocument();

    // 2. Пошук інтерактивних елементів форм
    const discountCheckbox = screen.getByRole('checkbox', {
      name: /застосувати знижку 10%/i,
    });
    expect(discountCheckbox).not.toBeChecked();

    // 3. Перевірка динамічної області статусу
    expect(screen.getByRole('status')).toHaveTextContent('Разом до сплати: 2700 грн');

    // 4. Взаємодія через користувацьку подію
    await user.click(discountCheckbox);

    expect(discountCheckbox).toBeChecked();
    expect(screen.getByRole('status')).toHaveTextContent('Разом до сплати: 2430 грн');

    // 5. Активація кнопки оформлення замовлення
    const submitBtn = screen.getByRole('button', {
      name: /підтвердити та оплатити/i,
    });
    await user.click(submitBtn);

    expect(handleCheckout).toHaveBeenCalledTimes(1);
    expect(handleCheckout).toHaveBeenCalledWith(2430);
  });
});

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React, { useState, useId } from 'react';

interface CollapsibleProps {
  readonly title: string;
  readonly children: React.ReactNode;
}

function CollapsibleFilter({ title, children }: CollapsibleProps) {
  const [isExpanded, setIsExpanded] = useState(false);
  const panelId = useId();

  return (
    <div className="filter-wrapper">
      <button
        type="button"
        aria-expanded={isExpanded}
        aria-controls={panelId}
        onClick={() => setIsExpanded((prev) => !prev)}
      >
        {title}
      </button>

      {isExpanded && (
        <div id={panelId} role="region" aria-label={title}>
          {children}
        </div>
      )}
    </div>
  );
}

describe('CollapsibleFilter Accessibility States', () => {
  it('синхронізує атрибут aria-expanded із фізичною видимістю контенту', async () => {
    const user = userEvent.setup();

    render(
      <CollapsibleFilter title="Категорії товарів">
        <p>Електроніка, Книги, Програмне забезпечення</p>
      </CollapsibleFilter>
    );

    // Початковий стан: кнопка згорнута
    const toggleButton = screen.getByRole('button', {
      name: 'Категорії товарів',
      expanded: false,
    });
    expect(toggleButton).toBeInTheDocument();

    // Регіон контенту відсутній у DOM
    expect(
      screen.queryByRole('region', { name: 'Категорії товарів' })
    ).not.toBeInTheDocument();

    // Розгортання панелі
    await user.click(toggleButton);

    // Перевірка зміни ARIA-стану на expanded: true
    expect(
      screen.getByRole('button', {
        name: 'Категорії товарів',
        expanded: true,
      })
    ).toBeInTheDocument();

    // Перевірка відображення регіону
    expect(
      screen.getByRole('region', { name: 'Категорії товарів' })
    ).toHaveTextContent('Електроніка, Книги, Програмне забезпечення');
  });
});

import { describe, it, expect } from 'vitest';
import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React, { useState } from 'react';

function DismissibleBanner({ message }: { readonly message: string }) {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <aside role="alert">
      <span>{message}</span>
      <button
        type="button"
        aria-label="Закрити повідомлення"
        onClick={() => setVisible(false)}
      >
        &times;
      </button>
    </aside>
  );
}

describe('DismissibleBanner LifeCycle', () => {
  it('коректно видаляє алерт з DOM при натисканні кнопки закриття', async () => {
    const user = userEvent.setup();

    render(<DismissibleBanner message="Сесія завершується через 5 хвилин" />);

    // 1. Переконуємося в наявності алерту через getByRole
    const alertElement = screen.getByRole('alert');
    expect(alertElement).toHaveTextContent('Сесія завершується через 5 хвилин');

    const closeBtn = screen.getByRole('button', {
      name: 'Закрити повідомлення',
    });

    // 2. Ініціюємо приховування
    await user.click(closeBtn);

    // 3. Синхронна перевірка відсутності: queryByRole повертає null
    expect(screen.queryByRole('alert')).not.toBeInTheDocument();

    // 4. Альтернатива для асинхронних анімацій/переходів:
    // await waitForElementToBeRemoved(() => screen.queryByRole('alert'));
  });
});

import { describe, it, expect } from 'vitest';
import { render, screen, logRoles } from '@testing-library/react';
import React from 'react';

function UserNavigation() {
  return (
    <header>
      <nav aria-label="Головне меню">
        <a href="/profile">Мій профіль</a>
        <a href="/settings">Налаштування</a>
        <button type="button" aria-label="Вийти з акаунта">
          <svg aria-hidden="true" focusable="false"><path d="M0 0h24v24H0z" /></svg>
        </button>
      </nav>
    </header>
  );
}

describe('UserNavigation Diagnostic', () => {
  it('виводить дерево ролей для точного налаштування селекторів', () => {
    const { container } = render(<UserNavigation />);

    // Логує у stdout структуру ролей:
    // banner:
    //   navigation "Головне меню":
    //     link "Мій профіль"
    //     link "Налаштування"
    //     button "Вийти з акаунта"
    logRoles(container);

    // Точний селектор на базі лога
    expect(screen.getByRole('navigation', { name: 'Головне меню' })).toBeInTheDocument();
    expect(screen.getByRole('button', { name: 'Вийти з акаунта' })).toBeInTheDocument();
  });
});