Outgoing activities restored from chat service should be marked as sent (#4532)

* Fix send status during chat history restoration

* Add entry

* Update tests

Author: compulim

CHANGELOG.md

@@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+-  Fixes [#4501](https://github.com/microsoft/BotFramework-WebChat/issues/4501). Outgoing activities restored from chat service should be marked as sent, by [@compulim](https://github.com/compulim) in PR [#4532](https://github.com/microsoft/BotFramework-WebChat/pull/4532)
+
 ### Changed
 
 -  Fixes [#4523](https://github.com/microsoft/BotFramework-WebChat/issues/4523). Bumped Microsoft Cognitive Services Speech SDK to [`microsoft-cognitiveservices-speech-sdk@1.17.0`](https://npmjs.com/package/microsoft-cognitiveservices-speech-sdk), by [@compulim](https://github.com/compulim) in PR [#4533](https://github.com/microsoft/BotFramework-WebChat/pull/4533)

__tests__/__image_snapshots__/html/localization-file-upload-polish-js-upload-a-file-in-polish-should-render-properly-1-snap.png

@@ -11,56 +11,13 @@
     <script>
       run(async function () {
         const clock = lolex.install();
-        const directLine = await testHelpers.createDirectLineWithTranscript([
-          {
-            from: { role: 'bot' },
-            id: '1.0',
-            text: 'Culpa qui non id occaecat consectetur veniam laborum Lorem nulla commodo.',
-            timestamp: -300001,
-            type: 'message'
-          },
-          {
-            channelData: { state: 'sent' },
-            from: { role: 'user' },
-            id: '2.0',
-            text: 'Est labore mollit do cillum cillum est amet tempor quis reprehenderit veniam sunt.',
-            timestamp: -300001,
-            type: 'message'
-          },
-          {
-            channelData: { clientActivityID: '2.1', state: 'sending', 'webchat:sequence-id': -300000.999 },
-            from: { role: 'user' },
-            localTimestamp: -300001,
-            text: 'Elit adipisicing laborum sit anim.',
-            type: 'message'
-          },
-          {
-            channelData: { clientActivityID: '2.2', state: 'sending', 'webchat:sequence-id': -300000.998 },
-            from: { role: 'user' },
-            localTimestamp: -5001,
-            text: 'Nostrud enim enim ipsum pariatur commodo.',
-            type: 'message'
-          },
-          {
-            channelData: { state: 'sent' },
-            from: { role: 'user' },
-            text: 'Culpa id proident sit officia aliquip.',
-            timestamp: -5001,
-            type: 'message'
-          },
-          {
-            from: { role: 'bot' },
-            id: '3.0',
-            text: 'Quis sit aliquip sit velit in velit magna culpa velit qui.',
-            timestamp: 0,
-            type: 'message'
-          }
-        ]);
+        const store = testHelpers.createStore();
+        const directLine = testHelpers.createDirectLineEmulator(store);
 
         WebChat.renderWebChat(
           {
             directLine,
-            store: testHelpers.createStore(),
+            store,
             styleOptions: {
               botAvatarInitials: 'Bot',
               bubbleBackground: '#0063B1',
@@ -86,29 +43,40 @@
 
         clock.tick(1000);
 
+        await directLine.emulateIncomingActivity(
+          'Culpa qui non id occaecat consectetur veniam laborum Lorem nulla commodo.'
+        );
+
+        await (
+          await directLine.emulateOutgoingActivity(
+            'Est labore mollit do cillum cillum est amet tempor quis reprehenderit veniam sunt.'
+          )
+        ).resolveAll();
+
+        const { resolveAll: resolveAll1 } = await directLine.emulateOutgoingActivity(
+          'Elit adipisicing laborum sit anim.'
+        );
+
+        clock.tick(295000);
+
+        const { resolveAll: resolveAll2 } = await directLine.emulateOutgoingActivity(
+          'Nostrud enim enim ipsum pariatur commodo.'
+        );
+
+        await (await directLine.emulateOutgoingActivity('Culpa id proident sit officia aliquip.')).resolveAll();
+
+        clock.tick(5000);
+
+        await directLine.emulateIncomingActivity('Quis sit aliquip sit velit in velit magna culpa velit qui.');
+
         await host.snapshot();
 
         clock.tick(29000);
 
         await host.snapshot();
 
-        directLine.activityDeferredObservable.next({
-          channelData: { clientActivityID: '2.1', state: 'sent' },
-          from: { role: 'user' },
-          id: '2.1',
-          text: 'Elit adipisicing laborum sit anim.',
-          timestamp: -300001,
-          type: 'message'
-        });
-
-        directLine.activityDeferredObservable.next({
-          channelData: { clientActivityID: '2.2', state: 'sent' },
-          from: { role: 'user' },
-          id: '2.2',
-          text: 'Nostrud enim enim ipsum pariatur commodo.',
-          timestamp: -5001,
-          type: 'message'
-        });
+        await resolveAll1();
+        await resolveAll2();
 
         await host.snapshot();
       });

__tests__/html/activityGrouping.disableTimestamp.html

@@ -68,41 +68,15 @@
             return next(...args);
           };
 
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
         WebChat.renderWebChat(
           {
             activityStatusMiddleware,
-            directLine: await testHelpers.createDirectLineWithTranscript([
-              {
-                from: { role: 'bot' },
-                id: '1.0',
-                text: 'This message should have timestamp "Bot at Just now".',
-                timestamp: -30001,
-                type: 'message'
-              },
-              {
-                channelData: { state: 'sent' },
-                from: { role: 'user' },
-                id: '2.0',
-                text: 'This message should have timestamp "User at Just now".',
-                timestamp: -30001,
-                type: 'message'
-              },
-              {
-                channelData: { clientActivityID: '2.1', state: 'sending', 'webchat:sequence-id': -30000.999 },
-                from: { role: 'user' },
-                localTimestamp: -20001,
-                text: 'This message should have status "Send failed".',
-                type: 'message'
-              },
-              {
-                channelData: { clientActivityID: '2.2', state: 'sending', 'webchat:sequence-id': -30000.998 },
-                from: { role: 'user' },
-                localTimestamp: 0,
-                text: 'This message should have status "Sending...", then turn to "Send failed".',
-                type: 'message'
-              }
-            ]),
-            store: testHelpers.createStore()
+            directLine,
+            store
           },
           document.getElementById('webchat')
         );
@@ -111,9 +85,25 @@
 
         clock.tick(1000);
 
+        await directLine.emulateIncomingActivity('This message should have timestamp "Bot at Just now".');
+
+        await (
+          await directLine.emulateOutgoingActivity('This message should have timestamp "User at Just now".')
+        ).resolveAll();
+
+        clock.tick(10000);
+
+        await directLine.emulateOutgoingActivity('This message should have status "Send failed".');
+
+        clock.tick(20000);
+
+        await directLine.emulateOutgoingActivity(
+          'This message should have status "Sending...", then turn to "Send failed".'
+        );
+
         await host.snapshot();
 
-        clock.tick(19000);
+        clock.tick(20000);
 
         await host.snapshot();
       });

__tests__/html/activityGrouping.legacyActivityStatusMiddleware.html

@@ -0,0 +1,52 @@
+<!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>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const clock = lolex.install({ now: new Date('2022-11-11T19:34:00.000Z') });
+
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat({ directLine, store, userID: 'u-00001' }, document.getElementById('webchat'));
+
+        await pageConditions.webChatRendered();
+
+        clock.tick(1000);
+
+        // Related to issue #4501.
+        // WHEN: An outgoing activity arrived via chat history restoration.
+        await directLine.emulateIncomingActivity({
+          type: 'message',
+          id: 'c00001-us|0000000',
+          timestamp: '2022-11-11T19:34:00.000Z',
+          // All messages sent from end-user must have `localTimestamp`.
+          // If `localTimestamp` is not present, this will not repro.
+          localTimestamp: '2022-11-11T11:34:00.000-08:00',
+          from: {
+            id: 'u00001',
+            role: 'user'
+          },
+          text: 'Hello, World!',
+          channelData: {
+            clientActivityID: 'ca00001'
+          }
+        });
+
+        // THEN: Activity status on the outgoing activity should be "sent".
+        //       This is because all activities restored from service, are successfully sent.
+        expect(
+          pageElements.activityStatuses().map(element => element.querySelector('[aria-hidden="true"]').innerText)
+        ).toEqual(['Just now']);
+      });
+    </script>
+  </body>
+</html>

__tests__/html/chatHistory.restore.sent.html

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('when restoring chat history', () => {
+  test('outgoing activities should be marked as sent', () => runHTML('chatHistory.restore.sent.html'));
+});

__tests__/html/chatHistory.restore.sent.js

@@ -21,6 +21,8 @@
       } = window;
 
       run(async function () {
+        const clock = lolex.install();
+
         const Test = () => {
           const [activities] = useActivities();
 
@@ -39,52 +41,54 @@
           );
         };
 
-        const directLine = await testHelpers.createDirectLineWithTranscript([
-          {
-            // Setting sequence ID to simplify the order of these test cases.
-            channelData: { 'webchat:sequence-id': 0 },
-            from: { role: 'bot' },
-            id: '1.0',
-            text: 'Sint ex sunt ipsum exercitation id id reprehenderit cupidatat incididunt aliquip.',
-            timestamp: -60001,
-            type: 'message'
-          },
-          {
-            channelData: { state: 'sending', 'webchat:sequence-id': 1 },
-            from: { role: 'user' },
-            id: '2.0',
-            localTimestamp: -60001,
-            text: 'Ipsum ex labore occaecat aute eu ea anim veniam tempor.',
-            type: 'message'
-          },
-          {
-            channelData: { state: 'sending', 'webchat:sequence-id': 2 },
-            from: { role: 'user' },
-            id: '3.0',
-            localTimestamp: 0,
-            text: 'Laboris Lorem sint magna sit ad eu ullamco irure.',
-            type: 'message'
-          },
-          {
-            channelData: { state: 'sent', 'webchat:sequence-id': 3 },
-            from: { role: 'user' },
-            id: '4.0',
-            text: 'Sunt cupidatat mollit id adipisicing occaecat ipsum fugiat ullamco in aute deserunt ut.',
-            timestamp: 0,
-            type: 'message'
-          }
-        ]);
-
         const store = testHelpers.createStore();
 
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
         render(
           <Composer directLine={directLine} store={store}>
             <Test />
           </Composer>,
           document.getElementById('webchat')
         );
 
-        await pageConditions.uiConnected();
+        await pageConditions.webChatRendered();
+
+        await directLine.emulateIncomingActivity({
+          // Setting sequence ID to simplify the order of these test cases.
+          channelData: { 'webchat:sequence-id': 0 },
+          from: { role: 'bot' },
+          text: 'Sint ex sunt ipsum exercitation id id reprehenderit cupidatat incididunt aliquip.',
+          type: 'message'
+        });
+
+        await directLine.emulateOutgoingActivity({
+          channelData: { 'webchat:sequence-id': 1 },
+          from: { role: 'user' },
+          text: 'Ipsum ex labore occaecat aute eu ea anim veniam tempor.',
+          type: 'message'
+        });
+
+        clock.tick(60000);
+
+        await directLine.emulateOutgoingActivity({
+          channelData: { 'webchat:sequence-id': 2 },
+          from: { role: 'user' },
+          localTimestamp: 0,
+          text: 'Laboris Lorem sint magna sit ad eu ullamco irure.',
+          type: 'message'
+        });
+
+        await (
+          await directLine.emulateOutgoingActivity({
+            channelData: { 'webchat:sequence-id': 3 },
+            from: { role: 'user' },
+            text: 'Sunt cupidatat mollit id adipisicing occaecat ipsum fugiat ullamco in aute deserunt ut.',
+            timestamp: 0,
+            type: 'message'
+          })
+        ).resolveAll();
+
         await pageConditions.became('Done', () => document.querySelector('.done'), 1000);
 
         await host.snapshot();