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

Clock

Введение​

Точное моделирование поведения, зависящего от времени, необходимо для проверки корректности приложений. Использование функциональности 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` будет прогрессировать по мере срабатывания таймеров.
await Page.Clock.InstallAsync(new()
{
  TimeDate = new DateTime(2024, 2, 2, 8, 0, 0)
});
await Page.GotoAsync("http://localhost:3333");

// Представьте, что пользователь закрыл крышку ноутбука и снова открыл ее в 10 утра.
// Остановите время, как только достигнете этой точки.
await Page.Clock.PauseAtAsync(new DateTime(2024, 2, 2, 10, 0, 0));

// Проверьте состояние страницы.
await Expect(Page.GetByTestId("current-time")).ToHaveTextAsync("2/2/2024, 10:00:00 AM");

// Снова закройте крышку ноутбука и откройте ее в 10:30 утра.
await Page.Clock.FastForwardAsync("30:00");
await Expect(Page.GetByTestId("current-time")).ToHaveTextAsync("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 =
        'Вы были выведены из системы из-за неактивности.';
    } else {
      document.getElementById('remaining-time').textContent =
        `Вы будете выведены из системы через ${diffInSeconds} секунд.`;
    }
    setTimeout(renderTime, 1000);
  };
  renderTime();
</script>
<button type="button">Взаимодействие</button>
// Начальное время не имеет значения для теста, поэтому мы можем выбрать текущее время.
await Page.Clock.InstallAsync();
await page.GotoAsync("http://localhost:3333");

// Взаимодействуйте со страницей
await page.GetByRole("button").ClickAsync();

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

// Проверьте, что пользователь был автоматически выведен из системы.
await Expect(Page.GetByText("Вы были выведены из системы из-за неактивности.")).ToBeVisibleAsync();

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

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

<div id="current-time" data-testid="current-time"></div>
<script>
  const renderTime = () => {
    document.getElementById('current-time').textContent =
        new Date().toLocaleString();
  };
  setInterval(renderTime, 1000);
</script>
// Инициализируйте часы с конкретным временем, позвольте странице загрузиться естественным образом.
await Page.Clock.InstallAsync(new()
{
  TimeDate = new DateTime(2024, 2, 2, 8, 0, 0, DateTimeKind.Pst)
});
await page.GotoAsync("http://localhost:3333");
var locator = page.GetByTestId("current-time");

// Остановите течение времени, остановите таймеры, теперь у вас есть ручной контроль
// над временем страницы.
await Page.Clock.PauseAtAsync(new DateTime(2024, 2, 2, 10, 0, 0));
await Expect(locator).ToHaveTextAsync("2/2/2024, 10:00:00 AM");

// Ручное перемещение по времени, срабатывание всех таймеров в процессе.
// В этом случае время будет обновлено на экране 2 раза.
await Page.Clock.RunForAsync(2000);
await Expect(locator).ToHaveTextAsync("2/2/2024, 10:00:02 AM");

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