Insert typing activity into transcript

CHANGELOG.md

@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fixes [#3371](https://github.com/microsoft/BotFramework-WebChat/issues/3371). Add alt property for image in HeroCards, by [@corinagum](https://github.com/corinagum) in PR [#3541](https://github.com/microsoft/BotFramework-WebChat/pull/3541)
 -  Fixes [#3310](https://github.com/microsoft/BotFramework-WebChat/issues/3310). Add quantity, tap and text field to ReceiptCards, by [@corinagum](https://github.com/corinagum) in PR [#3541](https://github.com/microsoft/BotFramework-WebChat/pull/3541)
 -  Fixes [#3514](https://github.com/microsoft/BotFramework-WebChat/issues/3514). Fix PoliCheck language errors, by [@corinagum](https://github.com/corinagum) in PR [#3545](https://github.com/microsoft/BotFramework-WebChat/pull/3545)
+-  Fixes [#3431](https://github.com/microsoft/BotFramework-WebChat/issues/3431). Activities should not be delayed due to missing activity of type "typing", by [@compulim](https://github.com/compulim) in PR [#3554](https://github.com/microsoft/BotFramework-WebChat/pull/3554)
 
 ### Changed
 

Dockerfile-testharness

@@ -11,4 +11,5 @@ ENTRYPOINT ["npx", "--no-install", "serve", "-p", "80", "/web"]
 
 ADD __tests__/setup/web/ /web
 ADD packages/bundle/dist /web
+RUN echo {}>/web/package.json
 WORKDIR /web

Dockerfile-testharness2

@@ -14,3 +14,4 @@ ADD serve-test.json /web/
 ADD __tests__/html/ /web/__tests__/html/
 ADD packages/bundle/dist/webchat-es5.js /web/packages/bundle/dist/
 ADD packages/testharness/dist/testharness.js /web/packages/testharness/dist/
+RUN echo {}>/web/package.json

__tests__/html/__jest__/runPageProcessor.js

@@ -1,5 +1,5 @@
 import { join } from 'path';
-import { Key } from 'selenium-webdriver';
+import { Key, logging } from 'selenium-webdriver';
 import { promisify } from 'util';
 import { tmpdir } from 'os';
 import createDeferred from 'p-defer';
@@ -15,15 +15,27 @@ const customImageSnapshotOptions = {
 
 const writeFile = promisify(fs.writeFile);
 
+async function getBrowserConsoleLogs(driver) {
+  return await driver.manage().logs().get(logging.Type.BROWSER);
+}
+
 export default async function runPageProcessor(driver, { ignoreConsoleError = false, ignorePageError = false } = {}) {
   const webChatLoaded = await driver.executeScript(() => !!window.WebChat);
   const webChatTestLoaded = await driver.executeScript(() => !!window.WebChatTest);
 
   if (!webChatLoaded) {
+    try {
+      console.log('Browser console logs', await getBrowserConsoleLogs(driver));
+    } catch (err) {}
+
     throw new Error('"webchat.js" did not load on the page, or the page was not found.');
   }
 
   if (!webChatTestLoaded) {
+    try {
+      console.log('Browser console logs', await getBrowserConsoleLogs(driver));
+    } catch (err) {}
+
     throw new Error('"testharness.js" did not load on the page.');
   }
 
@@ -64,17 +76,9 @@ export default async function runPageProcessor(driver, { ignoreConsoleError = fa
             .reduce((actions, key) => actions.sendKeys(Key[key] || key), driver.actions())
             .perform();
         } else if (job.type === 'send tab') {
-          await driver
-            .actions()
-            .sendKeys(Key.TAB)
-            .perform();
+          await driver.actions().sendKeys(Key.TAB).perform();
         } else if (job.type === 'send shift tab') {
-          await driver
-            .actions()
-            .keyDown(Key.SHIFT)
-            .sendKeys(Key.TAB)
-            .keyUp(Key.SHIFT)
-            .perform();
+          await driver.actions().keyDown(Key.SHIFT).sendKeys(Key.TAB).keyUp(Key.SHIFT).perform();
         } else if (job.type === 'send access key') {
           await driver
             .actions()

__tests__/html/__jest__/setupRunHTMLTest.js

@@ -1,4 +1,4 @@
-import { Builder } from 'selenium-webdriver';
+import { Builder, logging } from 'selenium-webdriver';
 import { Options } from 'selenium-webdriver/chrome';
 import { URL } from 'url';
 import fetch from 'node-fetch';
@@ -19,6 +19,11 @@ global.runHTMLTest = async (
     width: width * zoom
   });
 
+  const preferences = new logging.Preferences();
+
+  preferences.setLevel(logging.Type.BROWSER, logging.Level.WARNING);
+  chromeOptions.setLoggingPrefs(preferences);
+
   const driver = global.docker
     ? builder
         .forBrowser('chrome')

__tests__/html/accessibility.delayActivity.typingActivity.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        WebChat: { createDirectLine },
+        WebChatTest: { conditions, createStore, getConsoleHistory, host, pageObjects, timeouts, token }
+      } = window;
+
+      (async function () {
+        window.WebChat.renderWebChat(
+          {
+            directLine: createDirectLine({ token: await token.fetchDirectLineToken() }),
+            sendTypingIndicator: true,
+            store: createStore()
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+
+        await pageObjects.sendMessageViaSendBox('echo-typing', { waitForSend: true });
+        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+
+        await pageObjects.typeInSendBox('a');
+
+        await pageObjects.wait(conditions.typingIndicatorShown(), timeouts.directLine);
+
+        // The typing activity sent from the bot should not trigger timeout.
+        if (getConsoleHistory().find(({ args: [arg0] }) => arg0.includes('Timed out'))) {
+          throw new Error('Should not see timeout warning.');
+        }
+
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>

__tests__/html/accessibility.delayActivity.typingActivity.js

@@ -0,0 +1,8 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  test('activity should not be delayed due to user typing activity', () =>
+    runHTMLTest('accessibility.delayActivity.typingActivity.html'));
+});

__tests__/html/accessibility.delayActivity.typingActivityWithoutReplyToActivity.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <script crossorigin="anonymous" src="/__dist__/testharness.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script type="text/babel" data-presets="env,stage-3,react">
+      const {
+        WebChatTest: {
+          conditions,
+          createDirectLineWithTranscript,
+          createStore,
+          getConsoleHistory,
+          host,
+          pageObjects,
+          timeouts,
+          token
+        }
+      } = window;
+
+      (async function () {
+        const clock = lolex.install();
+
+        window.WebChat.renderWebChat(
+          {
+            directLine: createDirectLineWithTranscript([
+              {
+                text: 'Hello, World!',
+                type: 'message',
+                id: 'CONVERSATION_ID-o|00000',
+                timestamp: '2000-01-23T12:34:56.12345Z',
+                channelId: 'directline',
+                from: {
+                  id: 'webchat-mockbot',
+                  name: 'webchat-mockbot'
+                },
+                conversation: {
+                  id: 'CONVERSATION_ID-o'
+                },
+                locale: 'en-US'
+              },
+              {
+                type: 'typing',
+                id: 'CONVERSATION_ID-o|00002',
+                timestamp: '2000-01-23T12:34:56.12345Z',
+                channelId: 'directline',
+                from: {
+                  id: 'webchat-mockbot',
+                  name: 'webchat-mockbot'
+                },
+                conversation: {
+                  id: 'CONVERSATION_ID-o'
+                },
+                locale: 'en-US',
+                replyToId: 'CONVERSATION_ID-o|00001'
+              }
+            ]),
+            sendTypingIndicator: true,
+            store: createStore()
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.webChatRendered(), timeouts.ui);
+
+        // Wait for "Connecting..." message to dismiss
+        clock.tick(600);
+
+        await pageObjects.wait(conditions.numActivitiesShown(1), timeouts.directLine);
+
+        clock.tick(5000);
+
+        await pageObjects.wait(conditions.typingIndicatorShown(), timeouts.directLine);
+
+        // The typing activity sent from the bot should trigger timeout because it is replying to a non-existing activity.
+        if (!getConsoleHistory().find(({ args: [arg0] }) => arg0.includes('Timed out'))) {
+          throw new Error('Should see timeout warning.');
+        }
+
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>

__tests__/html/accessibility.delayActivity.typingActivityWithoutReplyToActivity.js

@@ -0,0 +1,8 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('accessibility requirement', () => {
+  test('activity should be delayed due to non-existing activity', () =>
+    runHTMLTest('accessibility.delayActivity.typingActivityWithoutReplyToActivity.html'));
+});

__tests__/setup/setupTestEnvironment.js

@@ -1,29 +1,39 @@
+import { logging } from 'selenium-webdriver';
 import { Options } from 'selenium-webdriver/chrome';
 
 export default function setupTestEnvironment(browserName, builder, { height = 640, width = 360, zoom = 1 } = {}) {
+  const preferences = new logging.Preferences();
+
+  preferences.setLevel(logging.Type.BROWSER, logging.Level.WARNING);
+
   switch (browserName) {
     case 'chrome-local':
+      const localOptions = (builder.getChromeOptions() || new Options()).windowSize({
+        height: height * zoom,
+        width: width * zoom
+      });
+
+      localOptions.setLoggingPrefs(preferences);
+
       return {
         baseURL: 'http://localhost:$PORT/index.html',
-        builder: builder
-          .forBrowser('chrome')
-          .setChromeOptions(
-            (builder.getChromeOptions() || new Options()).windowSize({ height: height * zoom, width: width * zoom })
-          )
+        builder: builder.forBrowser('chrome').setChromeOptions(localOptions)
       };
 
     case 'chrome-docker':
     default:
+      const dockerOptions = (builder.getChromeOptions() || new Options())
+        .headless()
+        .windowSize({ height: height * zoom, width: width * zoom });
+
+      dockerOptions.setLoggingPrefs(preferences);
+
       return {
         baseURL: 'http://webchat/',
         builder: builder
           .forBrowser('chrome')
           .usingServer('http://localhost:4444/wd/hub')
-          .setChromeOptions(
-            (builder.getChromeOptions() || new Options())
-              .headless()
-              .windowSize({ height: height * zoom, width: width * zoom })
-          )
+          .setChromeOptions(dockerOptions)
       };
   }
 }

__tests__/setup/setupTestFramework.js

@@ -1,4 +1,4 @@
-import { Builder } from 'selenium-webdriver';
+import { Builder, logging } from 'selenium-webdriver';
 import { createServer } from 'http';
 import { join } from 'path';
 import { promisify } from 'util';
@@ -20,6 +20,10 @@ const DEFAULT_OPTIONS = {
   pingBotOnLoad: true
 };
 
+async function getBrowserConsoleLogs(driver) {
+  return await driver.manage().logs().get(logging.Type.BROWSER);
+}
+
 global.setupWebDriver = async options => {
   options = { ...DEFAULT_OPTIONS, ...options };
 
@@ -67,6 +71,10 @@ global.setupWebDriver = async options => {
 
         return { driver, pageObjects };
       } catch (err) {
+        try {
+          console.log('Browser console logs at exception', await getBrowserConsoleLogs(driver));
+        } catch (err) {}
+
         await driver.quit();
 
         throw err;

packages/component/src/Middleware/Activity/createCoreMiddleware.js

@@ -12,7 +12,7 @@ export default function createCoreMiddleware() {
     const { type } = activity;
 
     // Filter out activities that should not be visible
-    if (type === 'conversationUpdate' || type === 'event' || type === 'invoke') {
+    if (type === 'conversationUpdate' || type === 'event' || type === 'invoke' || type === 'typing') {
       return false;
     } else if (type === 'message') {
       const { attachments = [], channelData, text } = activity;

packages/core/src/reducers/activities.js

@@ -104,11 +104,8 @@ export default function activities(state = DEFAULT_STATE, { meta, payload, type
       break;
 
     case INCOMING_ACTIVITY:
-      // TODO: [P4] Move "typing" into Constants.ActivityType
-      if (payload.activity.type !== 'typing') {
-        state = upsertActivityWithSort(state, payload.activity);
-      }
-
+      // TODO: [P4] #2100 Move "typing" into Constants.ActivityType
+      state = upsertActivityWithSort(state, payload.activity);
       break;
 
     default:

packages/core/src/sagas/queueIncomingActivitySaga.js

@@ -57,7 +57,20 @@ function* queueIncomingActivity({ userID }) {
     // Thus, the "replyToId" will always be there even it is the first activity in the conversation.
     if (replyToId && initialActivities.length) {
       // Either the activity replied to is in the transcript or after timeout.
-      yield race([waitForActivityId(replyToId, initialActivities), call(sleep, REPLY_TIMEOUT)]);
+      const result = yield race({
+        _: waitForActivityId(replyToId, initialActivities),
+        timeout: call(sleep, REPLY_TIMEOUT)
+      });
+
+      if ('timeout' in result) {
+        console.warn(
+          `botframework-webchat: Timed out while waiting for activity "${replyToId}" which activity "${activity.id}" is replying to.`,
+          {
+            activity,
+            replyToId
+          }
+        );
+      }
     }
 
     yield put(incomingActivity(activity));

packages/testharness/src/conditions/index.js

@@ -11,6 +11,7 @@ import scrollStabilized from './scrollStabilized';
 import scrollToBottomCompleted from './scrollToBottomCompleted';
 import suggestedActionsShown from './suggestedActionsShown';
 import toastShown from './toastShown';
+import typingIndicatorShown from './typingIndicatorShown';
 import uiConnected from './uiConnected';
 import webChatRendered from './webChatRendered';
 
@@ -28,6 +29,7 @@ export {
   scrollToBottomCompleted,
   suggestedActionsShown,
   toastShown,
+  typingIndicatorShown,
   uiConnected,
   webChatRendered
 };

packages/testharness/src/conditions/typingIndicatorShown.js

@@ -0,0 +1,8 @@
+import typingIndicator from '../elements/typingIndicator';
+
+export default function typingIndicatorShown() {
+  return {
+    message: 'typing indicator is shown',
+    fn: () => typingIndicator()
+  };
+}