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

А, вот это тема, блядь! Тестирование хедера, ёпта! Казалось бы, хуйня — полоска сверху, а нихуя не просто! Там же дохуя всего может сломаться, и пользователь потом как баран упрётся в эту нерабочую кнопку и будет орать: «Пидарасы, сайт не работает!». А всё потому, что тестировщик, сука, хером по чек-листу прошелся.

Смотри, вот тебе разжеванный план, как не облажаться.

Чек-лист, чтобы не вышло пиздопроебибны:

1. Глаз-алмаз, или «А чё это у вас тут криво?»:

   • Всё ли один-в-один как в макете? Шрифты не съехали, цвета не перепутали (не синий, а хуёво-синий)? Отступы — не как у слона в посудной лавке?
   • Логотип на месте? И главное — тыкаешь в него — перекидывает на главную? А то бывает, лого — просто картинка, и хоть обоссысь, никуда не ведёт. Пиздец.

2. Рабоче-крестьянская проверка, или «А оно вообще жмётся?»:

   • ВСЕ кнопки, ссылки, иконки — должны откликаться. Не просто курсор меняется, а реально действие происходит. Нажал «Контакты» — уехал на страницу контактов, а не в жопу.
   • Если хедер прилипает к верху при скролле или, наоборот, прячется — проверь, чтоб он не начинал ебаться с контентом и не перекрывал собой важную хуйню.
   • Поиск (если есть) — это отдельная песня, блядь. Ввёл «телевизор» — получил результаты про телевизоры, а не про презервативы. Ввёл пустоту и нажал «Найти» — сайт не должен сдохнуть с ошибкой 500, ёпта! Должна быть адекватная обработка.

3. «А на телефоне-то оно как?», или проверка на вшивость:

   • Открыл на компе — красота. Открыл на телефоне — а там меню на всю ширину экрана вылезло и кнопку «Купить» заебало. Проверяй все разрешения! Мобилка, планшет, широкий монитор.
   • Это самое гамбургер-меню! Оно должно открываться, блядь, и закрываться! И внутри него ссылки должны работать, а не просто быть декорацией!
   • Запусти в разных браузерах. Вдруг в Хроме всё огонь, а в Сафари какая-нибудь хуйня творится с отступами. Такое бывает, ядрёна вошь!

4. Для роботов и незрячих, или «А доступность-то где?»:

   • Картинки (лого, иконки) должны иметь alt текст. Чтоб если картинка не загрузилась или человек со скринридером — было понятно, что тут.
   • По сайту должно можно похавать с клавиатуры (Tab, Enter). Фокус не должен теряться в каких-нибудь дебрях.
   • Разметка должна быть семантической. Не <div id="header">, а нормальный <header>. Не просто spanы для меню, а <nav>. Поисковым системам приятно, да и код читабельнее.

Ну и примерчик, как можно протестить этот поиск, чтоб наверняка (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');
});

Вот если всё это пройти — тогда можно спать спокойно. Ну или почти спокойно, потому что завтра начнётся тестирование футера, блядь.