Как тестировать заголовок (Header) веб-страницы?

Тестирование Header включает проверку верстки, функциональности, адаптивности и доступности.

Чек-лист для тестирования:

1. Визуальное соответствие и верстка:

   • Соответствие макету (Figma, Zeplin) по шрифтам, цветам, размерам, отступам.
   • Корректное отображение логотипа и его ссылка на главную страницу.

2. Функциональность и UX:

   • Работоспособность всех кликабельных элементов (навигация, кнопки, иконки).
   • Правильные переходы по ссылкам.
   • Поведение при скролле (фиксированный, скрывающийся или статичный header).
   • Работа поиска (если есть): валидация ввода, выдача результатов, обработка пустого запроса.

3. Адаптивность и кроссплатформенность:

   • Корректное отображение и работа на разных разрешениях (мобильные, планшеты, десктоп).
   • Работа гамбургер-меню на мобильных устройствах.
   • Кросбраузерное тестирование (Chrome, Firefox, Safari, Edge).

4. Доступность (A11y) и SEO:

   • Наличие и корректность атрибутов alt для изображений, aria-label для иконок.
   • Правильная навигация с клавиатуры (порядок tabindex).
   • Семантическая разметка (<header>, <nav>).

Пример unit-теста для поиска (React + Testing Library):

test('Header search calls API with correct query', () => {
  const mockSearch = jest.fn();
  render(<Header onSearch={mockSearch} />);

  const input = screen.getByPlaceholderText('Search...');
  const button = screen.getByRole('button', { name: /search/i });

  fireEvent.change(input, { target: { value: 'test query' } });
  fireEvent.click(button);

  expect(mockSearch).toHaveBeenCalledTimes(1);
  expect(mockSearch).toHaveBeenCalledWith('test query');
});