Transcript navigation by arrow keys

CHANGELOG.md

@@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Resolves [#3368](https://github.com/microsoft/BotFramework-WebChat/issues/3368). Added new `sendBoxButtonAlignment` for button alignment in multi-line text mode, by [@compulim](https://github.com/compulim) in PR [#3668](https://github.com/microsoft/BotFramework-WebChat/pull/3668)
 -  Resolves [#3666](https://github.com/microsoft/BotFramework-WebChat/issues/3666). Added support of sovereign clouds when using Direct Line Speech, by [@compulim](https://github.com/compulim) in PR [#3694](https://github.com/microsoft/BotFramework-WebChat/pull/3694)
    -  Please refer to [`DIRECT_LINE_SPEECH.md`](https://github.com/microsoft/BotFramework-WebChat/blob/master/docs/DIRECT_LINE_SPEECH.md#directlinespeechcredentials) for instructions
+-  Resolves [#2996](https://github.com/microsoft/BotFramework-WebChat/issues/2996). Added transcript navigation by keyboard navigation keys, by [@compulim](https://github.com/compulim) in PR [#3703](https://github.com/microsoft/BotFramework-WebChat/pull/3703)
 
 ### Fixed
 

__tests__/.eslintrc

@@ -1,2 +1,4 @@
-globals:
-  runHTMLTest: readonly
+ignorePatterns:
+- "**/*.js"
+- "!/html/__jest__/*.js"
+- "!/setup/*.js"

__tests__/basic.js

@@ -76,19 +76,6 @@ test('long URLs with keep-all', async () => {
   expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
 });
 
-test('unknown activities do not render anything in the transcript', async () => {
-  const { driver, pageObjects } = await setupWebDriver();
-
-  await driver.wait(uiConnected(), timeouts.directLine);
-  await pageObjects.sendMessageViaSendBox('unknown activity', { waitForSend: true });
-
-  await driver.wait(minNumActivitiesShown(1), timeouts.directLine);
-
-  const base64PNG = await driver.takeScreenshot();
-
-  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
-});
-
 test('hero card with a long title and richCardWrapTitle set to true', async () => {
   const { driver, pageObjects } = await setupWebDriver({ props: { styleOptions: { richCardWrapTitle: true } } });
 

__tests__/clockSkew.js

@@ -103,7 +103,7 @@ describe('Clock skew', () => {
     await driver.wait(minNumActivitiesShown(3), timeouts.directLine);
 
     const activityElements = await getActivityElements(driver);
-    const lastActivityParagraphElement = await activityElements[activityElements.length - 1].findElement(By.css('p'));
+    const lastActivityParagraphElement = await activityElements[activityElements.length - 1].findElement(By.css('.webchat__basic-transcript__activity-box p'));
 
     await expect(lastActivityParagraphElement.getText()).resolves.toBe(
       'echo This outgoing activity should be the last in the list.'
@@ -146,7 +146,7 @@ describe('Clock skew', () => {
     await driver.wait(minNumActivitiesShown(3), timeouts.directLine);
 
     const activityElements = await getActivityElements(driver);
-    const firstActivityParagraphElement = await activityElements[0].findElement(By.css('p'));
+    const firstActivityParagraphElement = await activityElements[0].findElement(By.css('.webchat__basic-transcript__activity-box p'));
 
     await expect(firstActivityParagraphElement.getText()).resolves.toBe(
       'echo This outgoing activity should be the first in the list before echo back, and last after the echo back.'

__tests__/html/accessibility.adaptiveCard.nonInteractive.html

@@ -24,7 +24,7 @@
         Components: { AdaptiveCardContent }
       } = window.WebChat;
 
-      (async function() {
+      (async function () {
         const store = createStore();
         const directLine = window.WebChat.createDirectLine({ token: await token.fetchDirectLineToken() });
         const baseProps = { directLine, store };
@@ -42,9 +42,7 @@
 
         await host.sendShiftTab();
 
-        const blurred = document.activeElement === document.body || !document.activeElement;
-
-        expect(blurred).toBe(true);
+        expect(document.activeElement === elements.transcript()).toBe(true);
 
         // There should be no yellow part on the screen as there are no focusing elements.
         await host.snapshot();

__tests__/html/activity.unknownActivity.html

@@ -0,0 +1,37 @@
+<!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, host, pageObjects, timeouts, token }
+      } = window;
+
+      (async function () {
+        window.WebChat.renderWebChat(
+          {
+            directLine: createDirectLine({ token: await token.fetchDirectLineToken() }),
+            store: createStore()
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.sendMessageViaSendBox('unknown activity');
+        await pageObjects.wait(conditions.minNumActivitiesShown(1), timeouts.directLine);
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>

__tests__/html/activity.unknownActivity.js

@@ -0,0 +1,8 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('activity', () => {
+  test('should not show unknown activity', () =>
+    runHTMLTest('activity.unknownActivity.html', { ignoreConsoleError: true }));
+});

__tests__/html/adaptiveCards.tapAction.html

@@ -40,7 +40,7 @@
         return new Uint8Array(byteArray).buffer;
       }
 
-      (async function() {
+      (async function () {
         window.WebChat.renderWebChat(
           {
             activityMiddleware: createRunHookActivityMiddleware(),
@@ -78,7 +78,9 @@
         fileBlob.name = 'hello-card.attachmentjson';
 
         await pageObjects.runHook(({ useSendFiles }) => useSendFiles()([fileBlob]));
-        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.directLine);
+
+        // When using runHookActivityMiddleware, an additional hidden activities will be rendered to run the hook function. Thus, minNumActivitiesShown must be +1.
+        await pageObjects.wait(conditions.minNumActivitiesShown(3), timeouts.directLine);
 
         const renderer = document.querySelector('.webchat__adaptive-card-renderer');
         const card = renderer.querySelector('.ac-adaptiveCard[tabindex="0"]');
@@ -87,17 +89,17 @@
 
         renderer.click();
 
-        await pageObjects.wait(conditions.minNumActivitiesShown(4), timeouts.directLine);
+        await pageObjects.wait(conditions.minNumActivitiesShown(5), timeouts.directLine);
 
         card.focus();
         await host.sendKeys('\n');
 
-        await pageObjects.wait(conditions.minNumActivitiesShown(6), timeouts.directLine);
+        await pageObjects.wait(conditions.minNumActivitiesShown(7), timeouts.directLine);
 
         card.focus();
         await host.sendKeys(' ');
 
-        await pageObjects.wait(conditions.minNumActivitiesShown(8), timeouts.directLine);
+        await pageObjects.wait(conditions.minNumActivitiesShown(9), timeouts.directLine);
 
         await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.scrollToBottom);
         await host.snapshot();