Как протестировать баннер-уведомление о технических работах на веб-сайте?

Тестирование системного уведомления требует проверки его появления, функциональности, тайминга и интеграции.

1. Тестирование логики отображения (Наиболее важно):

• Условие появления: уведомление показывается только в период, заданный на бэкенде (например, флаг is_maintenance = true).
• Проверка API статуса:

  // Пример теста для эндпоинта, возвращающего статус техработ
  it('API returns maintenance status', async () => {
  const response = await fetch('/api/health');
  const data = await response.json();
  // Предположим, статус 503 и флаг maintenanceMode
  expect(response.status).toBe(503);
  expect(data.maintenanceMode).toBe(true);
  expect(data.message).toContain('технические работы');
  });

• Исчезновение: после окончания работ уведомление должно пропасть без перезагрузки страницы (если используется WebSocket/Long Polling) или после нее.

2. Функциональное и UI-тестирование баннера:

• Содержимое: текст, ссылки (например, на статус-страницу), кнопка закрытия.
• Закрытие: если предусмотрено, закрытие должно скрывать баннер на текущей сессии.
• Сохраняемое закрытие: состояние "закрыто" может сохраняться в localStorage/sessionStorage, чтобы не мешать пользователю.
• Визуал: баннер не должен перекрывать критичные элементы управления (модальные окна, формы ввода).
• Адаптивность: корректное отображение на мобильных устройствах.

3. Интеграционное тестирование:

• При активном баннере ключевые функции сайта (логин, оплата) могут быть заблокированы или перенаправлять на статичную страницу-заглушку.
• Проверить, что статические ресурсы (CSS, JS) все еще загружаются для отображения самого уведомления.

4. Нефункциональные проверки:

• Кросс-браузерность: Chrome, Firefox, Safari, мобильные браузеры.
• Доступность: баннер должен быть доступен для скринридеров (role="alert"), управляем с клавиатуры.

5. Пример сценария тестирования:

1. До начала работ: Убедиться, что баннер не отображается.
2. В момент "включения" работ (через админку или изменение флага):
   • Обновить страницу -> баннер появился.
   • Закрыть баннер -> он скрылся.
   • Перейти на другую страницу сайта -> баннер не появился (если состояние закрыто сохранено).
   • Открыть сайт в новом окне -> баннер появился (состояние не переносится между окнами).
3. После "окончания" работ: Обновить страницу -> баннер исчез.