Add tests

__tests__/cardActionMiddleware.js

@@ -0,0 +1,92 @@
+import { By, Key } from 'selenium-webdriver';
+
+import { imageSnapshotOptions, timeouts } from './constants.json';
+
+import allOutgoingActivitiesSent from './setup/conditions/allOutgoingActivitiesSent';
+import botConnected from './setup/conditions/botConnected';
+import suggestedActionsShowed from './setup/conditions/suggestedActionsShowed';
+import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown.js';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+test('card action "openUrl"', async () => {
+  const { driver, pageObjects } = await setupWebDriver({
+    props: {
+      cardActionMiddleware: ({ dispatch }) => next => ({ cardAction }) => {
+        if (cardAction.type === 'openUrl') {
+          dispatch({
+            type: 'WEB_CHAT/SEND_MESSAGE',
+            payload: {
+              text: `Navigating to ${ cardAction.value }`
+            }
+          });
+        } else {
+          return next(cardAction);
+        }
+      }
+    }
+  });
+
+  await driver.wait(botConnected(), timeouts.directLine);
+
+  const input = await driver.findElement(By.css('input[type="text"]'));
+
+  await input.sendKeys('card-actions', Key.RETURN);
+  await driver.wait(allOutgoingActivitiesSent(), timeouts.directLine);
+  await driver.wait(suggestedActionsShowed(), timeouts.directLine);
+
+  const openUrlButton = await driver.findElement(By.css('[role="form"] ul > li:first-child button'));
+
+  await openUrlButton.click();
+  await driver.wait(allOutgoingActivitiesSent(), timeouts.directLine);
+  await driver.wait(minNumActivitiesShown(5), timeouts.directLine);
+
+  // Hide cursor before taking screenshot
+  await pageObjects.hideCursor();
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+}, 60000);
+
+test('card action "signin"', async () => {
+  const { driver, pageObjects } = await setupWebDriver({
+    props: {
+      cardActionMiddleware: ({ dispatch }) => next => ({ cardAction, getSignInUrl }) => {
+        if (cardAction.type === 'signin') {
+          getSignInUrl().then(url => {
+            dispatch({
+              type: 'WEB_CHAT/SEND_MESSAGE',
+              payload: {
+                text: `Signing into ${ new URL(url).host }`
+              }
+            });
+          });
+        } else {
+          return next(cardAction);
+        }
+      }
+    }
+  });
+
+  await driver.wait(botConnected(), timeouts.directLine);
+
+  const input = await driver.findElement(By.css('input[type="text"]'));
+
+  await input.sendKeys('oauth', Key.RETURN);
+  await driver.wait(allOutgoingActivitiesSent(), timeouts.directLine);
+
+  const openUrlButton = await driver.findElement(By.css('[role="log"] ul > li button'));
+
+  await openUrlButton.click();
+  await driver.wait(allOutgoingActivitiesSent(), timeouts.directLine);
+  await driver.wait(minNumActivitiesShown(5), timeouts.directLine);
+
+  // Hide cursor before taking screenshot
+  await pageObjects.hideCursor();
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+}, 60000);

__tests__/setup/setupTestFramework.js

@@ -16,6 +16,23 @@ const BROWSER_NAME = process.env.WEBCHAT_TEST_ENV || 'chrome-docker';
 // const BROWSER_NAME = 'chrome-docker';
 // const BROWSER_NAME = 'chrome-local';
 
+function marshal(props) {
+  return props && Object.keys(props).reduce((nextProps, key) => {
+    const { [key]: value } = props;
+
+    if (typeof value === 'function') {
+      nextProps[key] = `() => ${ value.toString() }`;
+      nextProps.__evalKeys.push(key);
+    } else {
+      nextProps[key] = value;
+    }
+
+    return nextProps;
+  }, {
+    __evalKeys: []
+  });
+}
+
 expect.extend({
   toMatchImageSnapshot: configureToMatchImageSnapshot({
     customSnapshotsDir: join(__dirname, '../__image_snapshots__', BROWSER_NAME)
@@ -41,24 +58,16 @@ global.setupWebDriver = async (options = {}) => {
       }
 
       await driver.executeAsyncScript(
-        (coverage, props, createDirectLineFnString, setupFnString, callback) => {
+        (coverage, options, callback) => {
           window.__coverage__ = coverage;
 
-          const setupPromise = setupFnString ? eval(`() => ${ setupFnString }`)()() : Promise.resolve();
-
-          setupPromise.then(() => {
-            main({
-              createDirectLine: createDirectLineFnString && eval(`() => ${ createDirectLineFnString }`)(),
-              props
-            });
-
-            callback();
-          });
+          main(options).then(() => callback(), callback);
         },
         global.__coverage__,
-        options.props,
-        options.createDirectLine && options.createDirectLine.toString(),
-        options.setup && options.setup.toString()
+        marshal({
+          ...options,
+          props: marshal(options.props)
+        })
       );
 
       await driver.wait(webChatLoaded(), timeouts.navigation);

__tests__/setup/web/index.html

@@ -52,42 +52,54 @@
     <script>
       window.WebChatTest = { actions: [] };
 
-      function main({
-        createDirectLine,
-        props
-      } = {}) {
-        const webChatScript = document.createElement('script');
+      function unmarshal({ __evalKeys, ...obj } = {}) {
+        __evalKeys && __evalKeys.forEach(key => {
+          obj[key] = eval(obj[key])();
+        });
+
+        return obj;
+      }
 
-        webChatScript.setAttribute('src', '/webchat-instrumented.js');
+      function loadScript(src) {
+        return new Promise((resolve, reject) => {
+          const script = document.createElement('script');
 
-        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
+          script.setAttribute('src', '/webchat-instrumented.js');
+          script.addEventListener('load', resolve);
+          script.addEventListener('error', ({ error }) => reject(error));
 
-          const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
-          const { token } = await res.json();
+          document.body.appendChild(script);
+        });
+      }
 
-          const store = window.WebChatTest.store = window.WebChat.createStore({}, () => next => action => {
-            window.WebChatTest.actions.push(action);
+      async function main(options) {
+        let { createDirectLine, props, setup } = unmarshal(options);
 
-            return next(action);
-          });
+        props = unmarshal(props);
 
-          createDirectLine || (createDirectLine = window.WebChat.createDirectLine);
+        if (setup) { await setup(); }
 
-          window.WebChat.renderWebChat({
-            directLine: createDirectLine({ token }),
-            store,
-            username: 'Happy Web Chat user',
-            ...props
-          }, document.getElementById('webchat'));
+        await loadScript('/webchat-instrumented.js');
 
-          document.querySelector('#webchat > *').focus();
+        const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
+        const { token } = await res.json();
+
+        const store = window.WebChatTest.store = window.WebChat.createStore({}, () => next => action => {
+          window.WebChatTest.actions.push(action);
+
+          return next(action);
         });
 
-        document.body.appendChild(webChatScript);
+        createDirectLine || (createDirectLine = window.WebChat.createDirectLine);
+
+        window.WebChat.renderWebChat({
+          directLine: createDirectLine({ token }),
+          store,
+          username: 'Happy Web Chat user',
+          ...props
+        }, document.getElementById('webchat'));
+
+        document.querySelector('#webchat > *').focus();
       }
     </script>
   </body>