Update snapshots and improve image load check perf

microsoft · Jan 27, 2019 · 993f169 · 993f169
1 parent f1f2f59
commit 993f169
Show file tree

Hide file tree

Showing 34 changed files with 49 additions and 75 deletions.
diff --git a/__tests__/__image_snapshots__/chrome-docker/basic-js-setup-1-snap.png b/__tests__/__image_snapshots__/chrome-docker/basic-js-setup-1-snap.png
diff --git a/...chrome-docker/carousel-js-carousel-with-avatar-initials-1-attachment-1-snap.png b/...chrome-docker/carousel-js-carousel-with-avatar-initials-1-attachment-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/...hrome-docker/carousel-js-carousel-with-avatar-initials-2-attachments-1-snap.png b/...hrome-docker/carousel-js-carousel-with-avatar-initials-2-attachments-1-snap.png
diff --git a/...usel-js-carousel-with-avatar-initials-2-attachments-with-wide-screen-1-snap.png b/...usel-js-carousel-with-avatar-initials-2-attachments-with-wide-screen-1-snap.png
diff --git a/.../carousel-js-carousel-with-avatar-initials-4-attachments-and-message-1-snap.png b/.../carousel-js-carousel-with-avatar-initials-4-attachments-and-message-1-snap.png
diff --git a/.../carousel-js-carousel-with-avatar-initials-4-attachments-and-message-2-snap.png b/.../carousel-js-carousel-with-avatar-initials-4-attachments-and-message-2-snap.png
diff --git a/...rousel-js-carousel-with-avatar-initials-4-attachments-and-no-message-1-snap.png b/...rousel-js-carousel-with-avatar-initials-4-attachments-and-no-message-1-snap.png
diff --git a/...rousel-js-carousel-with-avatar-initials-4-attachments-and-no-message-2-snap.png b/...rousel-js-carousel-with-avatar-initials-4-attachments-and-no-message-2-snap.png
diff --git a/...ome-docker/carousel-js-carousel-without-avatar-initials-1-attachment-1-snap.png b/...ome-docker/carousel-js-carousel-without-avatar-initials-1-attachment-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/...me-docker/carousel-js-carousel-without-avatar-initials-2-attachments-1-snap.png b/...me-docker/carousel-js-carousel-without-avatar-initials-2-attachments-1-snap.png
diff --git a/...l-js-carousel-without-avatar-initials-2-attachments-with-wide-screen-1-snap.png b/...l-js-carousel-without-avatar-initials-2-attachments-with-wide-screen-1-snap.png
diff --git a/...rousel-js-carousel-without-avatar-initials-4-attachments-and-message-1-snap.png b/...rousel-js-carousel-without-avatar-initials-4-attachments-and-message-1-snap.png
diff --git a/...rousel-js-carousel-without-avatar-initials-4-attachments-and-message-2-snap.png b/...rousel-js-carousel-without-avatar-initials-4-attachments-and-message-2-snap.png
diff --git a/...sel-js-carousel-without-avatar-initials-4-attachments-and-no-message-1-snap.png b/...sel-js-carousel-without-avatar-initials-4-attachments-and-no-message-1-snap.png
diff --git a/...sel-js-carousel-without-avatar-initials-4-attachments-and-no-message-2-snap.png b/...sel-js-carousel-without-avatar-initials-4-attachments-and-no-message-2-snap.png
diff --git a/..._/chrome-docker/stacked-js-stacked-with-avatar-initials-1-attachment-1-snap.png b/..._/chrome-docker/stacked-js-stacked-with-avatar-initials-1-attachment-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/.../chrome-docker/stacked-js-stacked-with-avatar-initials-4-attachments-1-snap.png b/.../chrome-docker/stacked-js-stacked-with-avatar-initials-4-attachments-1-snap.png
diff --git a/...hrome-docker/stacked-js-stacked-without-avatar-initials-1-attachment-1-snap.png b/...hrome-docker/stacked-js-stacked-without-avatar-initials-1-attachment-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/...rome-docker/stacked-js-stacked-without-avatar-initials-4-attachments-1-snap.png b/...rome-docker/stacked-js-stacked-without-avatar-initials-4-attachments-1-snap.png
diff --git a/...how-correctly-formatted-buttons-when-suggested-actions-are-displayed-1-snap.png b/...how-correctly-formatted-buttons-when-suggested-actions-are-displayed-1-snap.png
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
@@ -2,6 +2,7 @@ import { By, Key } from 'selenium-webdriver';
 
 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';
@@ -19,9 +20,7 @@ test('setup', async () => {
 
   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);
+  await driver.wait(allImagesLoaded, timeouts.fetch);
 
   // Hide cursor before taking screenshot
   await pageObjects.hideCursor();

diff --git a/__tests__/carousel.js b/__tests__/carousel.js
@@ -1,6 +1,7 @@
 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';
@@ -18,10 +19,8 @@ describe('carousel without avatar initials', () => {
     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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -50,10 +49,8 @@ describe('carousel without avatar initials', () => {
     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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -82,10 +79,8 @@ describe('carousel without avatar initials', () => {
     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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -102,10 +97,8 @@ describe('carousel without avatar initials', () => {
     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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -122,10 +115,8 @@ describe('carousel without avatar initials', () => {
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('layout single 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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -142,10 +133,8 @@ describe('carousel without avatar initials', () => {
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('layout single 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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -166,10 +155,8 @@ describe('carousel with avatar initials', () => {
     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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -198,10 +185,8 @@ describe('carousel with avatar initials', () => {
     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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -230,10 +215,8 @@ describe('carousel with avatar initials', () => {
     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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -250,10 +233,8 @@ describe('carousel with avatar initials', () => {
     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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -270,10 +251,8 @@ describe('carousel with avatar initials', () => {
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('layout single 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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -290,10 +269,8 @@ describe('carousel with avatar initials', () => {
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('layout single 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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();

diff --git a/__tests__/constants.json b/__tests__/constants.json
@@ -6,6 +6,7 @@
   },
   "timeouts": {
     "directLine": 2500,
+    "fetch": 2500,
     "navigation": 5000
   }
 }
diff --git a/__tests__/setup/conditions/allImagesLoaded.js b/__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))
+  );
+}
diff --git a/__tests__/stacked.js b/__tests__/stacked.js
@@ -1,6 +1,8 @@
 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';
@@ -18,10 +20,8 @@ describe('stacked without avatar initials', () => {
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('layout stacked', 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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -38,10 +38,8 @@ describe('stacked without avatar initials', () => {
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('layout single', 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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -58,10 +56,8 @@ describe('stacked without avatar initials', () => {
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('layout single', 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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -82,10 +78,8 @@ describe('stacked with avatar initials', () => {
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('layout stacked', 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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -102,10 +96,8 @@ describe('stacked with avatar initials', () => {
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('layout single', 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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();
@@ -122,10 +114,8 @@ describe('stacked with avatar initials', () => {
     const input = await driver.findElement(By.css('input[type="text"]'));
 
     await input.sendKeys('layout single', 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);
+    await driver.wait(minNumActivitiesReached(3), timeouts.directLine);
+    await driver.wait(allImagesLoaded(), timeouts.fetch);
 
     // Hide cursor before taking screenshot
     await pageObjects.hideCursor();