Update tests

microsoft · Jul 2, 2019 · f385858 · f385858
1 parent 528e6ac
commit f385858
Show file tree

Hide file tree

Showing 33 changed files with 205 additions and 148 deletions.
diff --git a/...bubble-border-js-bubble-border-with-color-radius-style-and-width-set-1-snap.png b/...bubble-border-js-bubble-border-with-color-radius-style-and-width-set-1-snap.png
diff --git a/.../bubble-border-js-bubble-border-with-deprecated-border-style-of-2-px-1-snap.png b/.../bubble-border-js-bubble-border-with-deprecated-border-style-of-2-px-1-snap.png
diff --git a/...ith-deprecated-border-style-of-dashed-2-px-red-and-dotted-2-px-green-1-snap.png b/...ith-deprecated-border-style-of-dashed-2-px-red-and-dotted-2-px-green-1-snap.png
diff --git a/...r-js-bubble-border-with-deprecated-border-style-of-dashed-and-dotted-1-snap.png b/...r-js-bubble-border-with-deprecated-border-style-of-dashed-and-dotted-1-snap.png
diff --git a/...order-js-bubble-border-with-deprecated-border-style-of-red-and-green-1-snap.png b/...order-js-bubble-border-with-deprecated-border-style-of-red-and-green-1-snap.png
diff --git a/...r-with-deprecated-border-style-with-color-radius-style-and-width-set-1-snap.png b/...r-with-deprecated-border-style-with-color-radius-style-and-width-set-1-snap.png
diff --git a/...s-bubble-nub-at-corner-with-offset-at-bottom-should-have-flipped-nub-1-snap.png b/...s-bubble-nub-at-corner-with-offset-at-bottom-should-have-flipped-nub-1-snap.png
diff --git a/...ub-at-corner-with-offset-of-10-px-should-have-corner-radius-of-10-px-1-snap.png b/...ub-at-corner-with-offset-of-10-px-should-have-corner-radius-of-10-px-1-snap.png
diff --git a/...-nub-at-corner-with-offset-of-5-px-should-have-corner-radius-of-5-px-1-snap.png b/...-nub-at-corner-with-offset-of-5-px-should-have-corner-radius-of-5-px-1-snap.png
diff --git a/...et-of-minus-10-px-should-have-corner-radius-of-10-px-and-flipped-nub-1-snap.png b/...et-of-minus-10-px-should-have-corner-radius-of-10-px-and-flipped-nub-1-snap.png
diff --git a/...fset-of-minus-5-px-should-have-corner-radius-of-5-px-and-flipped-nub-1-snap.png b/...fset-of-minus-5-px-should-have-corner-radius-of-5-px-and-flipped-nub-1-snap.png
diff --git a/...bubble-nub-with-avatar-initials-and-a-single-message-should-have-nub-1-snap.png b/...bubble-nub-with-avatar-initials-and-a-single-message-should-have-nub-1-snap.png
diff --git a/...initials-and-carousel-with-a-message-should-have-nub-on-message-only-1-snap.png b/...initials-and-carousel-with-a-message-should-have-nub-on-message-only-1-snap.png
diff --git a/...nd-carousel-with-a-single-attachment-should-have-nub-on-message-only-1-snap.png b/...nd-carousel-with-a-single-attachment-should-have-nub-on-message-only-1-snap.png
diff --git a/...-avatar-initials-and-carousel-without-a-message-should-not-have-nubs-1-snap.png b/...-avatar-initials-and-carousel-without-a-message-should-not-have-nubs-1-snap.png
diff --git a/...h-avatar-initials-and-stacked-without-a-message-should-not-have-nubs-1-snap.png b/...h-avatar-initials-and-stacked-without-a-message-should-not-have-nubs-1-snap.png
diff --git a/...apshots__/chrome-docker/bubble-nub-js-bubble-nub-with-standard-setup-1-snap.png b/...apshots__/chrome-docker/bubble-nub-js-bubble-nub-with-standard-setup-1-snap.png
diff --git a/...ut-avatar-initials-and-a-single-message-should-have-nub-and-indented-1-snap.png b/...ut-avatar-initials-and-a-single-message-should-have-nub-and-indented-1-snap.png
diff --git a/...carousel-with-a-message-should-have-nub-on-message-only-and-indented-1-snap.png b/...carousel-with-a-message-should-have-nub-on-message-only-and-indented-1-snap.png
diff --git a/...nd-carousel-with-a-single-attachment-should-have-nub-on-message-only-1-snap.png b/...nd-carousel-with-a-single-attachment-should-have-nub-on-message-only-1-snap.png
diff --git a/...als-and-carousel-without-a-message-should-not-have-nubs-and-indented-1-snap.png b/...als-and-carousel-without-a-message-should-not-have-nubs-and-indented-1-snap.png
diff --git a/...ials-and-stacked-without-a-message-should-not-have-nubs-and-indented-1-snap.png b/...ials-and-stacked-without-a-message-should-not-have-nubs-and-indented-1-snap.png
diff --git a/...ousel-js-carousel-with-avatar-initials-1-attachment-with-wide-screen-1-snap.png b/...ousel-js-carousel-with-avatar-initials-1-attachment-with-wide-screen-1-snap.png
diff --git a/...el-js-carousel-without-avatar-initials-1-attachment-with-wide-screen-1-snap.png b/...el-js-carousel-without-avatar-initials-1-attachment-with-wide-screen-1-snap.png
diff --git a/...tacked-js-stacked-with-avatar-initials-1-attachment-with-wide-screen-1-snap.png b/...tacked-js-stacked-with-avatar-initials-1-attachment-with-wide-screen-1-snap.png
diff --git a/...ked-js-stacked-without-avatar-initials-1-attachment-with-wide-screen-1-snap.png b/...ked-js-stacked-without-avatar-initials-1-attachment-with-wide-screen-1-snap.png
diff --git a/__tests__/bubble.js b/__tests__/bubble.js
diff --git a/__tests__/bubbleBorder.js b/__tests__/bubbleBorder.js
@@ -0,0 +1,131 @@
+import { imageSnapshotOptions, timeouts } from './constants.json';
+
+import allImagesLoaded from './setup/conditions/allImagesLoaded';
+import minNumActivitiesShown from './setup/conditions/minNumActivitiesShown';
+import uiConnected from './setup/conditions/uiConnected';
+
+// selenium-webdriver API doc:
+// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html
+
+jest.setTimeout(timeouts.test);
+
+async function sendMessageAndMatchSnapshot(driver, pageObjects, message) {
+  await driver.wait(uiConnected(), timeouts.directLine);
+  await pageObjects.sendMessageViaSendBox(message);
+
+  await driver.wait(minNumActivitiesShown(3), timeouts.directLine);
+
+  const base64PNG = await driver.takeScreenshot();
+
+  expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
+}
+
+describe('bubble border', () => {
+  test('with color, radius, style, and width set', async () => {
+    const { driver, pageObjects } = await setupWebDriver({
+      props: {
+        styleOptions: {
+          bubbleBorderColor: 'Red',
+          bubbleBorderRadius: 10,
+          bubbleBorderStyle: 'dashed',
+          bubbleBorderWidth: 2,
+
+          bubbleFromUserBorderColor: 'Green',
+          bubbleFromUserBorderRadius: 20,
+          bubbleFromUserBorderStyle: 'dotted',
+          bubbleFromUserBorderWidth: 3
+        }
+      },
+      zoom: 3
+    });
+
+    await sendMessageAndMatchSnapshot(driver, pageObjects, 'echo Hello, World!');
+  });
+
+  describe('with deprecated border style', () => {
+    test('with color, radius, style, and width set', async () => {
+      const { driver, pageObjects } = await setupWebDriver({
+        props: {
+          styleOptions: {
+            bubbleBorder: 'dashed 2px Red',
+            bubbleBorderRadius: 10,
+
+            bubbleFromUserBorder: 'dotted 3px Green',
+            bubbleFromUserBorderRadius: 20
+          }
+        },
+        zoom: 3
+      });
+
+      await sendMessageAndMatchSnapshot(driver, pageObjects, 'echo Hello, World!');
+    });
+
+    test('of "dashed 2px Red" and "dotted 2px Green"', async () => {
+      const { driver, pageObjects } = await setupWebDriver({
+        props: {
+          styleOptions: {
+            bubbleBorder: 'dashed 2px Red',
+            bubbleFromUserBorder: 'dotted 2px Green'
+          }
+        }
+      });
+
+      await driver.wait(uiConnected(), timeouts.directLine);
+      await pageObjects.sendMessageViaSendBox('Hello, World!');
+      await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+
+      expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+    });
+
+    test('of "dashed" and "dotted"', async () => {
+      const { driver, pageObjects } = await setupWebDriver({
+        props: {
+          styleOptions: {
+            bubbleBorder: 'dashed',
+            bubbleFromUserBorder: 'dotted'
+          }
+        }
+      });
+
+      await driver.wait(uiConnected(), timeouts.directLine);
+      await pageObjects.sendMessageViaSendBox('Hello, World!');
+      await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+
+      expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+    });
+
+    test('of "2px"', async () => {
+      const { driver, pageObjects } = await setupWebDriver({
+        props: {
+          styleOptions: {
+            bubbleBorder: '2px',
+            bubbleFromUserBorder: '2px'
+          }
+        }
+      });
+
+      await driver.wait(uiConnected(), timeouts.directLine);
+      await pageObjects.sendMessageViaSendBox('Hello, World!');
+      await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+
+      expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+    });
+
+    test('of "Red" and "Green"', async () => {
+      const { driver, pageObjects } = await setupWebDriver({
+        props: {
+          styleOptions: {
+            bubbleBorder: 'Red',
+            bubbleFromUserBorder: 'Green'
+          }
+        }
+      });
+
+      await driver.wait(uiConnected(), timeouts.directLine);
+      await pageObjects.sendMessageViaSendBox('Hello, World!');
+      await driver.wait(minNumActivitiesShown(2), timeouts.directLine);
+
+      expect(await driver.takeScreenshot()).toMatchImageSnapshot(imageSnapshotOptions);
+    });
+  });
+});
diff --git a/__tests__/carousel.js b/__tests__/carousel.js
@@ -11,21 +11,9 @@ import uiConnected from './setup/conditions/uiConnected';
 
 jest.setTimeout(timeouts.test);
 
-let props;
-
-beforeEach(() => {
-  props = {
-    // We are using red/green border to emphasis the size of the border while testing
-    styleOptions: {
-      bubbleBorderColor: 'red',
-      bubbleFromUserBorderColor: 'green'
-    }
-  };
-});
-
 describe('carousel without avatar initials', () => {
   test('4 attachments and no message', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props });
+    const { driver, pageObjects } = await setupWebDriver();
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('carousel', { waitForSend: true });
@@ -49,7 +37,7 @@ describe('carousel without avatar initials', () => {
   });
 
   test('4 attachments and message', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props });
+    const { driver, pageObjects } = await setupWebDriver();
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout carousel', { waitForSend: true });
@@ -73,7 +61,7 @@ describe('carousel without avatar initials', () => {
   });
 
   test('2 attachments', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props });
+    const { driver, pageObjects } = await setupWebDriver();
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout double', { waitForSend: true });
@@ -85,7 +73,7 @@ describe('carousel without avatar initials', () => {
   });
 
   test('2 attachments with wide screen', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props, width: 640 });
+    const { driver, pageObjects } = await setupWebDriver({ width: 640 });
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout double', { waitForSend: true });
@@ -97,7 +85,7 @@ describe('carousel without avatar initials', () => {
   });
 
   test('1 attachment', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props });
+    const { driver, pageObjects } = await setupWebDriver();
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single carousel', { waitForSend: true });
@@ -109,7 +97,7 @@ describe('carousel without avatar initials', () => {
   });
 
   test('1 attachment with wide screen', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props, width: 640 });
+    const { driver, pageObjects } = await setupWebDriver({ width: 640 });
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single carousel', { waitForSend: true });
@@ -122,19 +110,10 @@ describe('carousel without avatar initials', () => {
 });
 
 describe('carousel with avatar initials', () => {
-  beforeEach(() => {
-    props = {
-      ...props,
-      styleOptions: {
-        ...props.styleOptions,
-        botAvatarInitials: 'BF',
-        userAvatarInitials: 'WC'
-      }
-    };
-  });
+  const WEB_CHAT_PROPS = { styleOptions: { botAvatarInitials: 'BF', userAvatarInitials: 'WC' } };
 
   test('4 attachments and no message', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props });
+    const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('carousel', { waitForSend: true });
@@ -158,7 +137,7 @@ describe('carousel with avatar initials', () => {
   });
 
   test('4 attachments and message', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props });
+    const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout carousel', { waitForSend: true });
@@ -182,7 +161,7 @@ describe('carousel with avatar initials', () => {
   });
 
   test('2 attachments', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props });
+    const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout double', { waitForSend: true });
@@ -194,7 +173,7 @@ describe('carousel with avatar initials', () => {
   });
 
   test('2 attachments with wide screen', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props, width: 640 });
+    const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS, width: 640 });
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout double', { waitForSend: true });
@@ -206,7 +185,7 @@ describe('carousel with avatar initials', () => {
   });
 
   test('1 attachment', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props });
+    const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS });
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single carousel', { waitForSend: true });
@@ -218,7 +197,7 @@ describe('carousel with avatar initials', () => {
   });
 
   test('1 attachment with wide screen', async () => {
-    const { driver, pageObjects } = await setupWebDriver({ props, width: 640 });
+    const { driver, pageObjects } = await setupWebDriver({ props: WEB_CHAT_PROPS, width: 640 });
 
     await driver.wait(uiConnected(), timeouts.directLine);
     await pageObjects.sendMessageViaSendBox('layout single carousel', { waitForSend: true });

diff --git a/__tests__/setup/pageObjects/sendMessageViaSendBox.js b/__tests__/setup/pageObjects/sendMessageViaSendBox.js
@@ -3,7 +3,7 @@ import { By, Key } from 'selenium-webdriver';
 import { timeouts } from '../../constants.json';
 import allOutgoingActivitiesSent from '../conditions/allOutgoingActivitiesSent';
 
-export default async function sendMessageViaSendBox(driver, text, { waitForSend = true }) {
+export default async function sendMessageViaSendBox(driver, text, { waitForSend = true } = {}) {
   const input = await driver.findElement(By.css('[role="form"] > * > form > input[type="text"]'));
 
   await input.sendKeys(text, Key.RETURN);