Add messageBack support to suggested actions (#1581)

* Add messageBack support for Web Chat * Add integration test for suggested-actions command on Mockbot * Test framework fixes * Update Web Chat with DL changes * Bump botframework-directlinejs * Update Changelog.md * PR Fixes * Re-iterate on PR fixes
microsoft · Jan 16, 2019 · 77b466e · 77b466e
1 parent cbfa0b6
commit 77b466e
Show file tree

Hide file tree

Showing 33 changed files with 313 additions and 88 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `core`: `incomingActivitySaga` may throw null-ref exception if the first activity is from user, in PR [#1286](https://github.com/Microsoft/BotFramework-WebChat/pull/1286)
 - `component`: Fix [#1328](https://github.com/Microsoft/BotFramework-WebChat/issues/1328). Should not start microphone if input hint is set to `ignoringInput`, in PR [#1286](https://github.com/Microsoft/BotFramework-WebChat/pull/1286)
 - `component`: Fix outgoing typing indicators are not sent and acknowledged properly, in PR [#1286](https://github.com/Microsoft/BotFramework-WebChat/pull/1286)
+- Fix [#1402](https://github.com/Microsoft/BotFramework-WebChat/issues/1402). Add `messageBack` support, by [@corinagum](https://github.com/corinagum) in PR [#1581](https://github.com/Microsoft/BotFramework-WebChat/pull/1581)
 
 ### Removed
 - `botAvatarImage` and `userAvatarImage` props, as they are moved inside `styleOptions`, in PR [#1486](https://github.com/Microsoft/BotFramework-WebChat/pull/1486)

diff --git a/...ommand-should-show-response-from-bot-and-no-text-from-user-on-imback-1-snap.png b/...ommand-should-show-response-from-bot-and-no-text-from-user-on-imback-1-snap.png
diff --git a/...d-should-show-response-from-bot-and-no-text-from-user-on-messageback-1-snap.png b/...d-should-show-response-from-bot-and-no-text-from-user-on-messageback-1-snap.png
diff --git a/...mand-should-show-response-from-bot-and-no-text-from-user-on-postback-1-snap.png b/...mand-should-show-response-from-bot-and-no-text-from-user-on-postback-1-snap.png
diff --git a/...mand-should-show-response-from-bot-and-text-from-user-on-messageback-1-snap.png b/...mand-should-show-response-from-bot-and-text-from-user-on-messageback-1-snap.png
diff --git a/...command-should-show-response-from-bot-and-text-from-user-on-postback-1-snap.png b/...command-should-show-response-from-bot-and-text-from-user-on-postback-1-snap.png
diff --git a/__tests__/basic.js b/__tests__/basic.js
@@ -1,4 +1,5 @@
 import { By, Key } from 'selenium-webdriver';
+import { imageSnapshotOptions } from './constants.json';
 
 function sleep(ms = 1000) {
   return new Promise(resolve => setTimeout(resolve, ms));
@@ -19,8 +20,5 @@ test('setup', async () => {
 
   const base64PNG = await driver.takeScreenshot();
 
-  expect(base64PNG).toMatchImageSnapshot({
-    failureThreshold: 10,
-    failureThresholdType: 'pixel'
-  });
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
 }, 60000);
diff --git a/__tests__/constants.json b/__tests__/constants.json
@@ -0,0 +1,6 @@
+{
+  "imageSnapshotOptions": {
+    "failureThreshold": 10,
+    "failureThresholdType": "pixel"
+  }
+}
diff --git a/__tests__/setup/setupTestFramework.js b/__tests__/setup/setupTestFramework.js
@@ -36,6 +36,11 @@ global.setupWebDriver = async () => {
         await driver.get(baseURL);
       }
 
+      await driver.executeScript(coverage => {
+        window.__coverage__ = coverage;
+        main();
+      }, global.__coverage__);
+
       return { driver };
     })();
   }
@@ -90,6 +95,7 @@ afterEach(async () => {
         });
     } finally {
       await driver.quit();
+      driverPromise = null;
     }
   }
 });

diff --git a/__tests__/setup/web/index.html b/__tests__/setup/web/index.html
@@ -36,7 +36,6 @@
       When you are using Web Chat for production, you should use the latest stable at "/latest/webchat.js".
       Or locked down on a specific version "/4.1.0/webchat.js".
     -->
-    <script src="/webchat-instrumented.js"></script>
     <style>
       html, body { height: 100% }
       body { margin: 0 }
@@ -51,25 +50,33 @@
   <body>
     <div id="webchat" role="main"></div>
     <script>
-      (async function () {
-        // In this demo, we are using Direct Line token from MockBot.
-        // To talk to your bot, you should use the token exchanged using your Direct Line secret.
-        // You should never put the Direct Line secret in the browser or client app.
-        // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
+      function main() {
+        const webChatScript = document.createElement('script');
 
-        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
-        const { token } = await res.json();
+        webChatScript.setAttribute('src', '/webchat-instrumented.js');
 
-        window.WebChat.renderWebChat({
-          // directLine: window.WebChat.createDirectLine({
-          //   domain: 'http://localhost:5000/v3/directline',
-          //   webSocket: false
-          // })
-          directLine: window.WebChat.createDirectLine({ token })
-        }, document.getElementById('webchat'));
+        webChatScript.addEventListener('load', async () => {
+          // In this demo, we are using Direct Line token from MockBot.
+          // To talk to your bot, you should use the token exchanged using your Direct Line secret.
+          // You should never put the Direct Line secret in the browser or client app.
+          // https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-direct-line-3-0-authentication
 
-        document.querySelector('#webchat > *').focus();
-      })().catch(err => console.error(err));
+          const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
+          const { token } = await res.json();
+
+          window.WebChat.renderWebChat({
+            // directLine: window.WebChat.createDirectLine({
+            //   domain: 'http://localhost:5000/v3/directline',
+            //   webSocket: false
+            // })
+            directLine: window.WebChat.createDirectLine({ token })
+          }, document.getElementById('webchat'));
+
+          document.querySelector('#webchat > *').focus();
+        });
+
+        document.body.appendChild(webChatScript);
+      }
     </script>
   </body>
 </html>
diff --git a/__tests__/suggestedActions.js b/__tests__/suggestedActions.js
@@ -0,0 +1,123 @@
+import { By, Key } from 'selenium-webdriver';
+import { imageSnapshotOptions } from './constants.json';
+
+function sleep(ms = 1000) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+describe('suggested-actions command', async () => {
+
+    test('should show response from bot and no text from user on imback', async () => {
+        const { driver } = await setupWebDriver();
+
+        await sleep(2000);
+
+        const input = await driver.findElement(By.tagName('input[type="text"]'));
+
+        await input.sendKeys('suggested-actions', Key.RETURN);
+        await sleep(2000);
+
+        const buttons = await driver.findElements(By.tagName('button'));
+
+        const imBackButton = buttons[1];
+
+        await imBackButton.click();
+        await sleep(2000);
+
+        const base64PNG = await driver.takeScreenshot();
+
+        expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+    }, 60000);
+
+    test('should show response from bot and no text from user on postback', async () => {
+        const { driver } = await setupWebDriver();
+
+        await sleep(2000);
+
+        const input = await driver.findElement(By.tagName('input[type="text"]'));
+
+        await input.sendKeys('suggested-actions', Key.RETURN);
+        await sleep(2000);
+
+        const buttons = await driver.findElements(By.tagName('button'));
+
+        const postBackStringButton = buttons[2];
+
+        await postBackStringButton.click();
+        await sleep(2000);
+
+        const base64PNG = await driver.takeScreenshot();
+
+        expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+    }, 60000);
+
+    test('should show response from bot and text from user on postback', async () => {
+        const { driver } = await setupWebDriver();
+
+        await sleep(2000);
+
+        const input = await driver.findElement(By.tagName('input[type="text"]'));
+
+        await input.sendKeys('suggested-actions', Key.RETURN);
+        await sleep(2000);
+
+        const buttons = await driver.findElements(By.tagName('button'));
+
+        const postBackStringButton = buttons[3];
+
+        await postBackStringButton.click();
+        await sleep(2000);
+
+        const base64PNG = await driver.takeScreenshot();
+
+        expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+    }, 60000);
+
+
+    test('should show response from bot and no text from user on messageback', async () => {
+        const { driver } = await setupWebDriver();
+
+        await sleep(2000);
+
+        const input = await driver.findElement(By.tagName('input[type="text"]'));
+
+        await input.sendKeys('suggested-actions', Key.RETURN);
+        await sleep(2000);
+
+        const buttons = await driver.findElements(By.tagName('button'));
+
+        const postBackStringButton = buttons[4];
+
+        await postBackStringButton.click();
+        await sleep(2000);
+
+        const base64PNG = await driver.takeScreenshot();
+
+        expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+    }, 60000);
+
+    test('should show response from bot and text from user on messageback', async () => {
+        const { driver } = await setupWebDriver();
+
+        await sleep(2000);
+
+        const input = await driver.findElement(By.tagName('input[type="text"]'));
+
+        await input.sendKeys('suggested-actions', Key.RETURN);
+        await sleep(2000);
+
+        const buttons = await driver.findElements(By.tagName('button'));
+
+        const postBackStringButton = buttons[4];
+
+        await postBackStringButton.click();
+        await sleep(2000);
+
+        const base64PNG = await driver.takeScreenshot();
+
+        expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+    }, 60000);
+});
diff --git a/package.json b/package.json
@@ -18,11 +18,16 @@
   "keywords": [],
   "jest": {
     "collectCoverage": true,
+    "coveragePathIgnorePatterns": [
+      "\\.json$",
+      "/node_modules/"
+    ],
     "coverageReporters": [
       "lcov",
       "text-summary"
     ],
     "setupTestFrameworkScriptFile": "<rootDir>/__tests__/setup/setupTestFramework.js",
+    "testEnvironment": "node",
     "testPathIgnorePatterns": [
       "<rootDir>/__tests__/setup/"
     ],

diff --git a/packages/bundle/package-lock.json b/packages/bundle/package-lock.json
diff --git a/packages/bundle/package.json b/packages/bundle/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "@babel/runtime": "^7.1.2",
     "adaptivecards": "~1.1.2",
-    "botframework-directlinejs": "^0.10.1",
+    "botframework-directlinejs": "^0.10.2",
     "botframework-webchat-component": "^0.0.0-0",
     "botframework-webchat-core": "^0.0.0-0",
     "core-js": "^2.5.7",

diff --git a/packages/component/package-lock.json b/packages/component/package-lock.json
diff --git a/packages/component/package.json b/packages/component/package.json
@@ -52,7 +52,7 @@
     "babel-jest": "^23.6.0",
     "babel-plugin-istanbul": "^5.1.0",
     "babel-plugin-version-transform": "^1.0.0",
-    "botframework-directlinejs": "^0.10.1",
+    "botframework-directlinejs": "^0.10.2",
     "concurrently": "^4.0.1",
     "jest": "^23.6.0",
     "react": "^16.4.1",
@@ -77,7 +77,7 @@
     "simple-update-in": "^1.3.0"
   },
   "peerDependencies": {
-    "botframework-directlinejs": "^0.10.1",
+    "botframework-directlinejs": "^0.10.2",
     "react": "^16.4.1"
   }
 }