Часы

Введение​

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

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

• 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

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

Часто вам нужно только смоделировать 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>

await page.clock.setFixedTime(new Date('2024-02-02T10:00:00'));
await page.goto('http://localhost:3333');
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:00:00 AM');

await page.clock.setFixedTime(new Date('2024-02-02T10:30:00'));
// We know that the page has a timer that updates the time every second.
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:30:00 AM');

Согласованное время и таймеры​

Иногда ваши таймеры зависят от 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>

// Initialize clock with some time before the test time and let the page load
// naturally. `Date.now` will progress as the timers fire.
await page.clock.install({ time: new Date('2024-02-02T08:00:00') });
await page.goto('http://localhost:3333');

// Pretend that the user closed the laptop lid and opened it again at 10am,
// Pause the time once reached that point.
await page.clock.pauseAt(new Date('2024-02-02T10:00:00'));

// Assert the page state.
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:00:00 AM');

// Close the laptop lid again and open it at 10:30am.
await page.clock.fastForward('30:00');
await expect(page.getByTestId('current-time')).toHaveText('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>

// Initial time does not matter for the test, so we can pick current time.
await page.clock.install();
await page.goto('http://localhost:3333');
// Interact with the page
await page.getByRole('button').click();

// Fast forward time 5 minutes as if the user did not do anything.
// Fast forward is like closing the laptop lid and opening it after 5 minutes.
// All the timers due will fire once immediately, as in the real browser.
await page.clock.fastForward('05:00');

// Check that the user was logged out automatically.
await expect(page.getByText('You have been logged out due to inactivity.')).toBeVisible();

Ручная прокрутка времени, последовательно запуска всех таймеров​

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

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

// Initialize clock with a specific time, let the page load naturally.
await page.clock.install({ time: new Date('2024-02-02T08:00:00') });
await page.goto('http://localhost:3333');

// Pause the time flow, stop the timers, you now have manual control
// over the page time.
await page.clock.pauseAt(new Date('2024-02-02T10:00:00'));
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:00:00 AM');

// Tick through time manually, firing all timers in the process.
// In this case, time will be updated in the screen 2 times.
await page.clock.runFor(2000);
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:00:02 AM');

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