Fix carousel alignment and test perf improvement (#1641)

* Remove empty line

* Fix padding for carousel with avatar

* Add carousel tests

* Update entry

* Add more tests for carousel and stacked layout

* Update snapshots and improve image load check perf

* Typo

* Fix test

* Fix image wait

* Add #1625

CHANGELOG.md

@@ -49,7 +49,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - `connectCarouselFilmStrip`: Fixed `botAvatarInitials` and `userAvatarInitials` functionality from [recent name change](https://github.com/Microsoft/BotFramework-WebChat/pull/1486),
   - `BasicTranscript`: Fixed user activity should not be recreated after receive ACK from Direct Line,
   - by [@corinagum](https://github.com/corinagum) in PR [#1528](https://github.com/Microsoft/BotFramework-WebChat/pull/1528)
-- `component`: Fix [#1560](https://github.com/Microsoft/BotFramework-WebChat/issues/1560). Fixed carousel layout did not show date and alignment issues, by [@compulim](https://github.com/compulim) in PR [#1561](https://github.com/Microsoft/BotFramework-WebChat/pull/1561)
+- `component`: Fix [#1560](https://github.com/Microsoft/BotFramework-WebChat/issues/1560), [#1625](https://github.com/Microsoft/BotFramework-WebChat/issues/1625) and [#1635](https://github.com/Microsoft/BotFramework-WebChat/issues/1635). Fixed carousel layout not showing date and alignment issues, by [@compulim](https://github.com/compulim) in PR [#1561](https://github.com/Microsoft/BotFramework-WebChat/pull/1561) and [#1641](https://github.com/Microsoft/BotFramework-WebChat/pull/1641)
 - `playground`: Fix [#1562](https://github.com/Microsoft/BotFramework-WebChat/issues/1562). Fixed timestamp grouping "Don't group" and added "Don't show timestamp", by [@compulim](https://github.com/compulim) in PR [#1563](https://github.com/Microsoft/BotFramework-WebChat/pull/1563)
 - `component`: Fix [#1576](https://github.com/Microsoft/BotFramework-WebChat/issues/1576). Rich card without `tap` should be rendered properly, by [@compulim](https://github.com/compulim) in PR [#1577](https://github.com/Microsoft/BotFramework-WebChat/pull/1577)
 - `core`: Some sagas missed handling successive actions, in PR [#1286](https://github.com/Microsoft/BotFramework-WebChat/pull/1286)

__tests__/basic.js

@@ -1,6 +1,8 @@
 import { By, Key } from 'selenium-webdriver';
 
-import { imageSnapshotOptions } from './constants.json';
+import { imageSnapshotOptions, timeouts } from './constants.json';
+
+import allImagesLoaded from './setup/conditions/allImagesLoaded.js';
 import directLineConnected from './setup/conditions/directLineConnected';
 import minNumActivitiesReached from './setup/conditions/minNumActivitiesReached';
 import webChatLoaded from './setup/conditions/webChatLoaded';
@@ -9,21 +11,19 @@ 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);
-
-  // TODO: [P2] Remove this sleep which wait for the image to be loaded
-  await driver.sleep(1000);
+  await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+  await driver.wait(allImagesLoaded(), timeouts.fetch);
 
   // 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,280 @@
+import { By, Key } from 'selenium-webdriver';
+
+import { imageSnapshotOptions, timeouts } from './constants.json';
+import allImagesLoaded from './setup/conditions/allImagesLoaded';
+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(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // 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(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // 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();
+
+    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(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+
+  test('2 attachments with wide screen', 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(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+
+  test('1 attachment', 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 single carousel', Key.RETURN);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+
+  test('1 attachment with wide screen', 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 single carousel', Key.RETURN);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // 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(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // 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(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // 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 });
+
+    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(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+
+  test('2 attachments with wide screen', 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(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+
+  test('1 attachment', 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 single carousel', Key.RETURN);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+
+  test('1 attachment with wide screen', 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 single carousel', Key.RETURN);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
+
+    // Hide cursor before taking screenshot
+    await pageObjects.hideCursor();
+
+    expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+  }, 60000);
+});

__tests__/constants.json

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

__tests__/setup/conditions/allImagesLoaded.js

@@ -0,0 +1,7 @@
+import { Condition } from 'selenium-webdriver';
+
+export default function () {
+  return new Condition('Waiting for all images to be loaded', async driver =>
+    await driver.executeScript(() => [].every.call(document.querySelectorAll('img'), ({ complete }) => complete))
+  );
+}

__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)
+  };
+}