Correct timestamp roundoff (#4821)

* Correct timestamp roundoff * Update entry * More tolerance
microsoft · Aug 18, 2023 · 85a78ce · 85a78ce
1 parent 2c2d9f2
commit 85a78ce
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 -  Fixes [#4718](https://github.com/microsoft/BotFramework-WebChat/issues/4718). In high contrast mode, Adaptive Card buttons, when pushed, should highlighted properly, by [@compulim](https://github.com/compulim), in PR [#4746](https://github.com/microsoft/BotFramework-WebChat/pull/4746)
 -  Fixes [#4721](https://github.com/microsoft/BotFramework-WebChat/issues/4721) and [#4726](https://github.com/microsoft/BotFramework-WebChat/issues/4726). Adaptive Cards `TextBlock` heading elements should start at level 2, by [@compulim](https://github.com/compulim), in PR [#4747](https://github.com/microsoft/BotFramework-WebChat/issues/4747)
+-  Fixes [#3699](https://github.com/microsoft/BotFramework-WebChat/issues/3699). Correcting timestamp roundoff, by [@compulim](https://github.com/compulim), in PR [#4821](https://github.com/microsoft/BotFramework-WebChat/pull/4821)
 
 ## [4.15.8] - 2023-06-06
 

diff --git a/__tests__/html/timestamp.roundOff.html b/__tests__/html/timestamp.roundOff.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script>
+      run(async function () {
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+        const now = Date.now();
+
+        WebChat.renderWebChat(
+          {
+            directLine,
+            store,
+            styleOptions: {
+              groupTimestamp: 0
+            }
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageConditions.uiConnected();
+
+        // We have a few loc strings to use:
+        // - Just now
+        // - A minute ago
+        // - X minutes ago
+        // - An hour ago
+        // - X hours ago
+        // - Today
+        // - Yesterday
+        // - "Jan 2 at 12:34 PM"
+
+        const TIME_AGO = [
+          ['49 hours passed', 49 * 60 * 60 * 1_000, expect.stringMatching(/\sat\s/u)],
+          ['48.1 hours passed', 48.1 * 60 * 60 * 1_000, expect.stringMatching(/\sat\s/u)],
+          ['48 hours passed', 48 * 60 * 60 * 1_000, expect.stringMatching(/\sat\s/u)],
+          ['47.9 hours passed', 47.9 * 60 * 60 * 1_000, 'Yesterday'],
+          ['36 hours passed', 36 * 60 * 60 * 1_000, 'Yesterday'],
+          ['24.1 hours passed', 24.1 * 60 * 60 * 1_000, 'Yesterday'],
+          ['24 hours passed', 24 * 60 * 60 * 1_000, 'Yesterday'],
+          ['23.9 hours passed', 23.9 * 60 * 60 * 1_000, 'Today'],
+          ['12 hours passed', 12 * 60 * 60 * 1_000, 'Today'],
+          ['5.1 hours passed', 5.1 * 60 * 60 * 1_000, 'Today'],
+          ['5 hours passed', 5 * 60 * 60 * 1_000, 'Today'],
+          ['4.9 hours passed', 4.9 * 60 * 60 * 1_000, '4 hours ago'],
+          ['2 hours passed', 2 * 60 * 60 * 1_000, '2 hours ago'],
+          ['1.1 hours passed', 1.1 * 60 * 60 * 1_000, 'An hour ago'],
+          ['1 hours passed', 1 * 60 * 60 * 1_000, 'An hour ago'],
+          ['59.9 minutes passed', 59.9 * 60 * 1_000, '59 minutes ago'],
+          ['59 minutes passed', 59 * 60 * 1_000, '59 minutes ago'],
+          ['30 minutes passed', 30 * 60 * 1_000, '30 minutes ago'],
+          ['2.2 minutes passed', 2.2 * 60 * 1_000, '2 minutes ago'],
+          ['2 minutes passed', 2 * 60 * 1_000, '2 minutes ago'],
+          ['1.8 minutes passed', 1.8 * 60 * 1_000, 'A minute ago'],
+          ['1.2 minutes passed', 1.2 * 60 * 1_000, 'A minute ago'],
+          ['A minute passed', 1 * 60 * 1_000, 'A minute ago'],
+          ['0.8 minutes passed', 0.8 * 60 * 1_000, 'Just now'],
+          ['30 seconds passed', 30 * 1_000, 'Just now'],
+          ['it is now', 0, 'Just now']
+        ];
+
+        for (const [text, delta, expectation] of TIME_AGO) {
+          await directLine.emulateIncomingActivity({
+            timestamp: new Date(now - delta).toISOString(),
+            text: `When ${text}, should show "${expectation}"`,
+            type: 'message'
+          });
+
+          const activityStatuses = pageElements.activityStatuses();
+          const lastActivityStatus = activityStatuses[activityStatuses.length - 1];
+          const lastTimestamp = lastActivityStatus.querySelector('[aria-hidden]').textContent;
+
+          expect(lastTimestamp).toEqual(expectation);
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/timestamp.roundOff.js b/__tests__/html/timestamp.roundOff.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('timestamp', () => {
+  test('should round off correctly', () => runHTML('timestamp.roundOff.html'));
+});
diff --git a/packages/api/src/hooks/useRelativeTimeFormatter.ts b/packages/api/src/hooks/useRelativeTimeFormatter.ts
@@ -41,9 +41,9 @@ export default function useRelativeTimeFormatter(): (dateOrString: Date | string
         return localize('ACTIVITY_STATUS_TIMESTAMP_ONE_HOUR_AGO');
       } else if (deltaInHours < 5) {
         return relativeTimeFormatter('hour')(-deltaInHours);
-      } else if (deltaInHours <= 24) {
+      } else if (deltaInMs <= 24 * 3_600_000) {
         return localize('ACTIVITY_STATUS_TIMESTAMP_TODAY');
-      } else if (deltaInHours <= 48) {
+      } else if (deltaInMs <= 48 * 3_600_000) {
         return localize('ACTIVITY_STATUS_TIMESTAMP_YESTERDAY');
       }