Перейти к основному содержимому

Часы

Введение​

Точное моделирование поведения, зависящего от времени, необходимо для проверки корректности приложений. Использование функциональности Clock позволяет разработчикам манипулировать и контролировать время в тестах, что обеспечивает точную проверку таких функций, как время рендеринга, тайм-ауты, запланированные задачи без задержек и изменчивости реального времени выполнения.

API Clock предоставляет следующие методы для управления временем:

  • setFixedTime: Устанавливает фиксированное время для Date.now() и new Date().
  • install: инициализирует часы и позволяет:
    • pauseAt: Останавливает время в определенный момент.
    • fastForward: Перематывает время вперед.
    • runFor: Запускает время на определенную продолжительность.
    • resume: Возобновляет время.
  • setSystemTime: Устанавливает текущее системное время.

Рекомендуемый подход - использовать setFixedTime для установки времени на конкретное значение. Если это не подходит для вашего случая, вы можете использовать install, который позволяет позже останавливать время, перематывать его вперед, тикать и т.д. setSystemTime рекомендуется только для сложных случаев.

примечание

Page.clock() переопределяет нативные глобальные классы и функции, связанные со временем, позволяя им управляться вручную:

  • Date
  • setTimeout
  • clearTimeout
  • setInterval
  • clearInterval
  • requestAnimationFrame
  • cancelAnimationFrame
  • requestIdleCallback
  • cancelIdleCallback
  • performance
  • Event.timeStamp
warning

Если вы вызываете install в любой момент вашего теста, вызов ДОЛЖЕН произойти до любых других вызовов, связанных с часами (см. список выше). Вызов этих методов в неправильном порядке приведет к неопределенному поведению. Например, вы не можете вызвать setInterval, затем install, а затем clearInterval, так как install переопределяет нативное определение функций часов.

Тестирование с предопределенным временем​

Часто вам нужно только подделать Date.now, сохраняя таймеры работающими. Таким образом, время течет естественно, но Date.now всегда возвращает фиксированное значение.

<div id="current-time" data-testid="current-time"></div>
<script>
  const renderTime = () => {
    document.getElementById('current-time').textContent =
        new Date().toLocaleString();
  };
  setInterval(renderTime, 1000);
</script>

Последовательное время и таймеры​

Иногда ваши таймеры зависят от Date.now и сбиваются, когда значение Date.now не меняется со временем. В этом случае вы можете установить часы и перемотать вперед до интересующего времени при тестировании.

<div id="current-time" data-testid="current-time"></div>
<script>
  const renderTime = () => {
    document.getElementById('current-time').textContent =
        new Date().toLocaleString();
  };
  setInterval(renderTime, 1000);
</script>
// Инициализируйте часы с некоторым временем до тестового времени и дайте странице загрузиться
// естественно. `Date.now` будет прогрессировать по мере срабатывания таймеров.
SimpleDateFormat format = new SimpleDateFormat("yyy-MM-dd'T'HH:mm:ss");
page.clock().install(new Clock.InstallOptions().setTime(format.parse("2024-02-02T08:00:00")));
page.navigate("http://localhost:3333");
Locator locator = page.getByTestId("current-time");

// Предположим, что пользователь закрыл крышку ноутбука и открыл ее снова в 10 утра.
// Остановите время, как только достигнете этой точки.
page.clock().pauseAt(format.parse("2024-02-02T10:00:00"));

// Проверьте состояние страницы.
assertThat(locator).hasText("2/2/2024, 10:00:00 AM");

// Снова закройте крышку ноутбука и откройте ее в 10:30 утра.
page.clock().fastForward("30:00");
assertThat(locator).hasText("2/2/2024, 10:30:00 AM");

Тестирование мониторинга бездействия​

Мониторинг бездействия - это общая функция в веб-приложениях, которая выходит из системы пользователей после периода бездействия. Тестирование этой функции может быть сложным, потому что вам нужно долго ждать, чтобы увидеть эффект. С помощью часов вы можете ускорить время и быстро протестировать эту функцию.

<div id="remaining-time" data-testid="remaining-time"></div>
<script>
  const endTime = Date.now() + 5 * 60_000;
  const renderTime = () => {
    const diffInSeconds = Math.round((endTime - Date.now()) / 1000);
    if (diffInSeconds <= 0) {
      document.getElementById('remaining-time').textContent =
        'You have been logged out due to inactivity.';
    } else {
      document.getElementById('remaining-time').textContent =
        `You will be logged out in ${diffInSeconds} seconds.`;
    }
    setTimeout(renderTime, 1000);
  };
  renderTime();
</script>
<button type="button">Interaction</button>
// Начальное время не имеет значения для теста, поэтому мы можем выбрать текущее время.
page.clock().install();
page.navigate("http://localhost:3333");
Locator locator = page.getByRole("button");

// Взаимодействуйте со страницей
locator.click();

// Перемотайте время на 5 минут вперед, как если бы пользователь ничего не делал.
// Перемотка вперед похожа на закрытие крышки ноутбука и открытие ее через 5 минут.
// Все таймеры, которые должны были сработать, сработают сразу, как в реальном браузере.
page.clock().fastForward("05:00");

// Проверьте, что пользователь был автоматически выведен из системы.
assertThat(page.getByText("You have been logged out due to inactivity.")).isVisible();

Ручное перемещение по времени, срабатывание всех таймеров последовательно​

В редких случаях вы можете захотеть вручную перемещаться по времени, срабатывая все таймеры и анимационные кадры в процессе, чтобы достичь тонкого контроля над течением времени.

<div id="current-time" data-testid="current-time"></div>
<script>
  const renderTime = () => {
    document.getElementById('current-time').textContent =
        new Date().toLocaleString();
  };
  setInterval(renderTime, 1000);
</script>
SimpleDateFormat format = new SimpleDateFormat("yyy-MM-dd'T'HH:mm:ss");
// Инициализируйте часы с конкретным временем, дайте странице загрузиться естественно.
page.clock().install(new Clock.InstallOptions()
    .setTime(format.parse("2024-02-02T08:00:00")));
page.navigate("http://localhost:3333");
Locator locator = page.getByTestId("current-time");

// Остановите поток времени, остановите таймеры, теперь у вас есть ручной контроль
// над временем страницы.
page.clock().pauseAt(format.parse("2024-02-02T10:00:00"));
assertThat(locator).hasText("2/2/2024, 10:00:00 AM");

// Ручное перемещение по времени, срабатывание всех таймеров в процессе.
// В этом случае время будет обновлено на экране 2 раза.
page.clock().runFor(2000);
assertThat(locator).hasText("2/2/2024, 10:00:02 AM");

Связанные видео​