From b79f3076eeec25757621356c8bda7816bbd278d3 Mon Sep 17 00:00:00 2001
From: Max Schmitt <max@schmitt.mx>
Date: Fri, 5 Jul 2024 13:20:54 +0200
Subject: [PATCH] doc(clock): fix code snippets (#31568)

Fixes https://github.com/microsoft/playwright/issues/31566
---
 docs/src/clock.md | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/docs/src/clock.md b/docs/src/clock.md
index ec3aaf8bd5..bfee51ab7a 100644
--- a/docs/src/clock.md
+++ b/docs/src/clock.md
@@ -43,7 +43,7 @@ That way the time flows naturally, but `Date.now` always returns a fixed value.
 <script>
   const renderTime = () => {
     document.getElementById('current-time').textContent =
-        new Date().toLocaleTimeString();
+        new Date().toLocaleString();
   };
   setInterval(renderTime, 1000);
 </script>
@@ -69,7 +69,7 @@ In this case, you can install the clock and fast forward to the time of interest
 <script>
   const renderTime = () => {
     document.getElementById('current-time').textContent =
-        new Date().toLocaleTimeString();
+        new Date().toLocaleString();
   };
   setInterval(renderTime, 1000);
 </script>
@@ -176,6 +176,26 @@ Inactivity monitoring is a common feature in web applications that logs out user
 Testing this feature can be tricky because you need to wait for a long time to see the effect.
 With the help of the clock, you can speed up time and test this feature quickly.
 
+```html
+<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>
+```
+
 ```js
 // Initial time does not matter for the test, so we can pick current time.
 await page.clock.install();
@@ -186,7 +206,7 @@ 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('5:00');
+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();
@@ -202,7 +222,7 @@ await page.get_by_role("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.fast_forward("5:00")
+await page.clock.fast_forward("05:00")
 
 # Check that the user was logged out automatically.
 await expect(page.getByText("You have been logged out due to inactivity.")).toBeVisible()
@@ -218,7 +238,7 @@ page.get_by_role("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.
-page.clock.fast_forward("5:00")
+page.clock.fast_forward("05:00")
 
 # Check that the user was logged out automatically.
 expect(page.get_by_text("You have been logged out due to inactivity.")).to_be_visible()
@@ -236,7 +256,7 @@ locator.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.
-page.clock().fastForward("5:00");
+page.clock().fastForward("05:00");
 
 // Check that the user was logged out automatically.
 assertThat(page.getByText("You have been logged out due to inactivity.")).isVisible();
@@ -253,7 +273,7 @@ await page.GetByRole("button").ClickAsync();
 // 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.FastForwardAsync("5:00");
+await Page.Clock.FastForwardAsync("05:00");
 
 // Check that the user was logged out automatically.
 await Expect(Page.GetByText("You have been logged out due to inactivity.")).ToBeVisibleAsync();
@@ -269,7 +289,7 @@ animation frames in the process to achieve a fine-grained control over the passa
 <script>
   const renderTime = () => {
     document.getElementById('current-time').textContent =
-        new Date().toLocaleTimeString();
+        new Date().toLocaleString();
   };
   setInterval(renderTime, 1000);
 </script>