Language of timestamp should update on-the-fly (#2414)

* Fix timestamp not updating on language

* Add tests

* Update PR number

* Remove console log

CHANGELOG.md

@@ -90,6 +90,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [Emulator:#1823](https://github.com/microsoft/BotFramework-Emulator/issues/1823). Fix Sendbox "Type your message" being read twice by AT, by [@corinagum](https://github.com/corinagum) in PR [#2423](https://github.com/microsoft/BotFramework-WebChat/pull/2423)
 -  Fix [#2415](https://github.com/microsoft/BotFramework-WebChat/issues/2415) and [#2416](https://github.com/microsoft/BotFramework-WebChat/issues/2416). Fix receipt card rendering, by [@compulim](https://github.com/compulim) in PR [#2417](https://github.com/microsoft/BotFramework-WebChat/issues/2417)
 -  Fix [#2415](https://github.com/microsoft/BotFramework-WebChat/issues/2415) and [#2416](https://github.com/microsoft/BotFramework-WebChat/issues/2416). Fix Adaptive Cards cannot be disabled on-the-fly, by [@compulim](https://github.com/compulim) in PR [#2417](https://github.com/microsoft/BotFramework-WebChat/issues/2417)
+-  Fix [#2360](https://github.com/microsoft/BotFramework-WebChat/issues/2360). Timestamp should update on language change, by [@compulim](https://github.com/compulim) in PR [#2414](https://github.com/microsoft/BotFramework-WebChat/pull/2414)
 
 ### Added
 

__tests__/setup/web/index.html

@@ -145,12 +145,7 @@
           ...props
         };
 
-        renderWebChat = props => {
-          console.log(props);
-
-          window.WebChat.renderWebChat(props, document.getElementById('webchat'));
-        };
-
+        renderWebChat = props => window.WebChat.renderWebChat(props, document.getElementById('webchat'));
         renderWebChat(props);
 
         document.querySelector('#webchat > *').focus();

__tests__/timestamp.js

@@ -0,0 +1,28 @@
+import { imageSnapshotOptions, timeouts } from './constants.json';
+
+import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown';
+import uiConnected from './setup/conditions/uiConnected';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+jest.setTimeout(timeouts.test);
+
+test('update timestamp on-the-fly', async () => {
+  const { driver, pageObjects } = await setupWebDriver();
+
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox('echo Hello, World!', { waitForSend: true });
+
+  await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+
+  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+
+  await pageObjects.updateProps({ locale: 'zh-HK' });
+
+  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+
+  await pageObjects.updateProps({ locale: 'zh-YUE' });
+
+  expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+});

packages/component/src/Utils/RelativeTime.js

@@ -25,16 +25,14 @@ function getText(language, value) {
 }
 
 const RelativeTime = ({ language, value }) => {
-  const [text, setText] = useState(getText(language, value));
   const [timer, setTimer] = useState(nextTimer(value));
-
-  const localizedAbsoluteTime = localize('SentAt', language) + getLocaleString(value, language);
-
   const handleInterval = useCallback(() => {
-    setText(getText(language, value));
     setTimer(nextTimer(value));
   }, [language, value]);
 
+  const localizedAbsoluteTime = localize('SentAt', language) + getLocaleString(value, language);
+  const text = getText(language, value);
+
   return (
     <React.Fragment>
       <ScreenReaderText text={localizedAbsoluteTime} />

packages/playground/src/App.js

@@ -243,7 +243,7 @@ const App = ({ store }) => {
 
   const handleLanguageChange = useCallback(
     ({ target: { value } }) => {
-      setLanguage(!!value);
+      setLanguage(value);
       document.querySelector('html').setAttribute('lang', value || window.navigator.language);
       window.sessionStorage.setItem('PLAYGROUND_LANGUAGE', value);
     },