Add carousel tests

__tests__/basic.js

@@ -1,6 +1,7 @@
 import { By, Key } from 'selenium-webdriver';
 
-import { imageSnapshotOptions } from './constants.json';
+import { imageSnapshotOptions, timeouts } from './constants.json';
+
 import directLineConnected from './setup/conditions/directLineConnected';
 import minNumActivitiesReached from './setup/conditions/minNumActivitiesReached';
 import webChatLoaded from './setup/conditions/webChatLoaded';
@@ -9,21 +10,21 @@ import webChatLoaded from './setup/conditions/webChatLoaded';
 // https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
 
 test('setup', async () => {
-  const { driver } = await setupWebDriver();
+  const { driver, pageObjects } = await setupWebDriver();
 
-  await driver.wait(webChatLoaded(), 2000);
-  await driver.wait(directLineConnected(), 2000);
+  await driver.wait(webChatLoaded(), timeouts.navigation);
+  await driver.wait(directLineConnected(), timeouts.directLine);
 
-  const input = await driver.findElement(By.tagName('input[type="text"]'));
+  const input = await driver.findElement(By.css('input[type="text"]'));
 
   await input.sendKeys('layout carousel', Key.RETURN);
-  await driver.wait(minNumActivitiesReached(2), 2000);
+  await driver.wait(minNumActivitiesReached(2), timeouts.directLine);
 
   // TODO: [P2] Remove this sleep which wait for the image to be loaded
   await driver.sleep(1000);
 
   // Hide cursor before taking screenshot
-  await driver.executeScript(() => document.querySelector(':focus').blur());
+  await pageObjects.hideCursor();
 
   const base64PNG = await driver.takeScreenshot();
 

__tests__/carousel.js

@@ -0,0 +1,183 @@
+import { By, Key } from 'selenium-webdriver';
+
+import { imageSnapshotOptions, timeouts } from './constants.json';
+import directLineConnected from './setup/conditions/directLineConnected';
+import minNumActivitiesReached from './setup/conditions/minNumActivitiesReached';
+import webChatLoaded from './setup/conditions/webChatLoaded';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+describe('carousel without avatar initials', () => {
+  test('4 attachments and no message', async () => {
+    const { driver, pageObjects } = await setupWebDriver();
+
+    await driver.wait(webChatLoaded(), timeouts.navigation);
+    await driver.wait(directLineConnected(), timeouts.directLine);
+
+    const input = await driver.findElement(By.css('input[type="text"]'));
+
+    await input.sendKeys('carousel', Key.RETURN);
+    await driver.wait(minNumActivitiesReached(2), timeouts.directLine);
+
+    // TODO: [P2] Remove this sleep which wait for the image to be loaded
+    await driver.sleep(1000);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+
+    const rightFlipper = await driver.findElement(By.css('button[aria-label="Right"]'));
+
+    await rightFlipper.click();
+    await rightFlipper.click();
+    await rightFlipper.click();
+    await rightFlipper.click();
+
+    // Wait for carousel animation to finish
+    await driver.sleep(1000);
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+
+  test('4 attachments and message', async () => {
+    const { driver, pageObjects } = await setupWebDriver();
+
+    await driver.wait(webChatLoaded(), timeouts.navigation);
+    await driver.wait(directLineConnected(), timeouts.directLine);
+
+    const input = await driver.findElement(By.css('input[type="text"]'));
+
+    await input.sendKeys('layout carousel', Key.RETURN);
+    await driver.wait(minNumActivitiesReached(2), timeouts.directLine);
+
+    // TODO: [P2] Remove this sleep which wait for the image to be loaded
+    await driver.sleep(1000);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+
+    const rightFlipper = await driver.findElement(By.css('button[aria-label="Right"]'));
+
+    await rightFlipper.click();
+    await rightFlipper.click();
+    await rightFlipper.click();
+    await rightFlipper.click();
+
+    // Wait for carousel animation to finish
+    await driver.sleep(1000);
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+
+  test('2 attachments', async () => {
+    const { driver, pageObjects } = await setupWebDriver({ width: 640 });
+
+    await driver.wait(webChatLoaded(), timeouts.navigation);
+    await driver.wait(directLineConnected(), timeouts.directLine);
+
+    const input = await driver.findElement(By.css('input[type="text"]'));
+
+    await input.sendKeys('layout double', Key.RETURN);
+    await driver.wait(minNumActivitiesReached(2), timeouts.directLine);
+
+    // TODO: [P2] Remove this sleep which wait for the image to be loaded
+    await driver.sleep(1000);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+});
+
+describe('carousel with avatar initials', () => {
+  const WEB_CHAT_PROPS = { styleOptions: { botAvatarInitials: 'BF', userAvatarInitials: 'WC' } };
+
+  test('4 attachments and no message', async () => {
+    const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
+
+    await driver.wait(webChatLoaded(), timeouts.navigation);
+    await driver.wait(directLineConnected(), timeouts.directLine);
+
+    const input = await driver.findElement(By.css('input[type="text"]'));
+
+    await input.sendKeys('carousel', Key.RETURN);
+    await driver.wait(minNumActivitiesReached(2), timeouts.directLine);
+
+    // TODO: [P2] Remove this sleep which wait for the image to be loaded
+    await driver.sleep(1000);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+
+    const rightFlipper = await driver.findElement(By.css('button[aria-label="Right"]'));
+
+    await rightFlipper.click();
+    await rightFlipper.click();
+    await rightFlipper.click();
+    await rightFlipper.click();
+
+    // Wait for carousel animation to finish
+    await driver.sleep(1000);
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+
+  test('4 attachments and message', async () => {
+    const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
+
+    await driver.wait(webChatLoaded(), timeouts.navigation);
+    await driver.wait(directLineConnected(), timeouts.directLine);
+
+    const input = await driver.findElement(By.css('input[type="text"]'));
+
+    await input.sendKeys('layout carousel', Key.RETURN);
+    await driver.wait(minNumActivitiesReached(2), timeouts.directLine);
+
+    // TODO: [P2] Remove this sleep which wait for the image to be loaded
+    await driver.sleep(1000);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+
+    const rightFlipper = await driver.findElement(By.css('button[aria-label="Right"]'));
+
+    await rightFlipper.click();
+    await rightFlipper.click();
+    await rightFlipper.click();
+    await rightFlipper.click();
+
+    // Wait for carousel animation to finish
+    await driver.sleep(1000);
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+
+  test('2 attachments', async () => {
+    const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS, width: 640 });
+
+    await driver.wait(webChatLoaded(), timeouts.navigation);
+    await driver.wait(directLineConnected(), timeouts.directLine);
+
+    const input = await driver.findElement(By.css('input[type="text"]'));
+
+    await input.sendKeys('layout double', Key.RETURN);
+    await driver.wait(minNumActivitiesReached(2), timeouts.directLine);
+
+    // TODO: [P2] Remove this sleep which wait for the image to be loaded
+    await driver.sleep(1000);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+});

__tests__/constants.json

@@ -3,5 +3,9 @@
     "customDiffConfig": {
       "threshold": 0.14
     }
+  },
+  "timeouts": {
+    "directLine": 2500,
+    "navigation": 5000
   }
 }

__tests__/setup/conditions/allOutgoingActivitiesSent.js

@@ -0,0 +1,12 @@
+import { Condition } from 'selenium-webdriver';
+
+export default function () {
+  return new Condition('Waiting for Direct Line to connect', async driver => {
+    return await driver.executeScript(() => {
+      const { store } = window.WebChatTest;
+      const { activities } = store.getState();
+
+      return activities.filter(({ from: { role } }) => role === 'user').every(({ channelData: { state } }) => state === 'sent');
+    });
+  });
+}

__tests__/setup/conditions/suggestedActionsShowed.js

@@ -0,0 +1,5 @@
+import { By, until } from 'selenium-webdriver';
+
+export default function () {
+  return until.elementLocated(By.css('[role="form"] ul'));
+}

__tests__/setup/pageObjects/hideCursor.js

@@ -0,0 +1,3 @@
+export default async function hideCursor(driver) {
+  await driver.executeScript(() => document.querySelector(':focus').blur());
+}

__tests__/setup/pageObjects/index.js

@@ -0,0 +1,7 @@
+import hideCursor from './hideCursor';
+
+export default function (driver) {
+  return {
+    hideCursor: hideCursor.bind(null, driver)
+  };
+}

__tests__/setup/setupTestEnvironment.js

@@ -1,13 +1,13 @@
 import { Options } from 'selenium-webdriver/chrome';
 
-export default function (browserName, builder) {
+export default function (browserName, builder, { height, width } = {}) {
   switch (browserName) {
     case 'chrome-local':
       return {
         baseURL: 'http://localhost:$PORT/index.html',
         builder: builder.forBrowser('chrome').setChromeOptions(
           (builder.getChromeOptions() || new Options())
-            .windowSize({ height: 640, width: 360 })
+            .windowSize({ height: height || 640, width: width || 360 })
         )
       };
 
@@ -18,7 +18,7 @@ export default function (browserName, builder) {
         builder: builder.forBrowser('chrome').usingServer('http://localhost:4444/wd/hub').setChromeOptions(
           (builder.getChromeOptions() || new Options())
             .headless()
-            .windowSize({ height: 640, width: 360 })
+            .windowSize({ height: height || 640, width: width || 360 })
         )
       };
   }

__tests__/setup/setupTestFramework.js

@@ -6,6 +6,7 @@ import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
 import getPort from 'get-port';
 import handler from 'serve-handler';
 
+import createPageObjects from './pageObjects/index';
 import setupTestEnvironment from './setupTestEnvironment';
 
 const BROWSER_NAME = process.env.WEBCHAT_TEST_ENV || 'chrome-docker';
@@ -21,10 +22,10 @@ expect.extend({
 let driverPromise;
 let serverPromise;
 
-global.setupWebDriver = async () => {
+global.setupWebDriver = async (options = {}) => {
   if (!driverPromise) {
     driverPromise = (async () => {
-      let { baseURL, builder } = await setupTestEnvironment(BROWSER_NAME, new Builder());
+      let { baseURL, builder } = await setupTestEnvironment(BROWSER_NAME, new Builder(), options);
       const driver = builder.build();
 
       // If the baseURL contains $PORT, it means it requires us to fill-in
@@ -36,12 +37,12 @@ global.setupWebDriver = async () => {
         await driver.get(baseURL);
       }
 
-      await driver.executeScript(coverage => {
+      await driver.executeScript((coverage, props) => {
         window.__coverage__ = coverage;
-        main();
-      }, global.__coverage__);
+        main({ props });
+      }, global.__coverage__, options.props);
 
-      return { driver };
+      return { driver, pageObjects: createPageObjects(driver) };
     })();
   }
 

__tests__/setup/web/index.html

@@ -52,7 +52,7 @@
     <script>
       window.WebChatTest = { actions: [] };
 
-      function main() {
+      function main({ props }) {
         const webChatScript = document.createElement('script');
 
         webChatScript.setAttribute('src', '/webchat-instrumented.js');
@@ -66,7 +66,7 @@
           const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
           const { token } = await res.json();
 
-          const store = window.WebChat.createStore({}, () => next => action => {
+          const store = window.WebChatTest.store = window.WebChat.createStore({}, () => next => action => {
             window.WebChatTest.actions.push(action);
 
             return next(action);
@@ -78,7 +78,8 @@
             //   webSocket: false
             // })
             directLine: window.WebChat.createDirectLine({ token }),
-            store
+            store,
+            ...props
           }, document.getElementById('webchat'));
 
           document.querySelector('#webchat > *').focus();