♻️ Update visual diff code to fix deprecation warning for waitFor (a…

…mpproject#31967)
TvoroG · Jan 14, 2021 · c06e8c6 · c06e8c6
1 parent 0883295
commit c06e8c6
Show file tree

Hide file tree

Showing 14 changed files with 238 additions and 178 deletions.
diff --git a/examples/visual-tests/amp-mega-menu/amp-mega-menu.js b/examples/visual-tests/amp-mega-menu/amp-mega-menu.js
@@ -15,13 +15,19 @@
  */
 'use strict';
 
-const {verifySelectorsVisible} = require('../../../build-system/tasks/visual-diff/helpers');
+const {
+  verifySelectorsVisible,
+} = require('../../../build-system/tasks/visual-diff/helpers');
 
 module.exports = {
   'click menu item one': async (page, name) => {
-    await page.waitFor('amp-mega-menu .i-amphtml-mega-menu-item:first-child .i-amphtml-mega-menu-heading');
-    await page.tap('amp-mega-menu .i-amphtml-mega-menu-item:first-child .i-amphtml-mega-menu-heading');
-    await page.waitFor(400);
+    await page.waitForSelector(
+      'amp-mega-menu .i-amphtml-mega-menu-item:first-child .i-amphtml-mega-menu-heading'
+    );
+    await page.tap(
+      'amp-mega-menu .i-amphtml-mega-menu-item:first-child .i-amphtml-mega-menu-heading'
+    );
+    await page.waitForTimeout(400);
     await verifySelectorsVisible(page, name, [
       'amp-mega-menu[open] .i-amphtml-mega-menu-item:first-child[open] .i-amphtml-mega-menu-content',
       'amp-mega-menu[open] .i-amphtml-mega-menu-item:first-child[open] amp-img img',

diff --git a/examples/visual-tests/amp-selector.js b/examples/visual-tests/amp-selector.js
@@ -23,31 +23,35 @@ const {
 module.exports = {
   'single selector select option 2': async (page, name) => {
     await page.tap('#single_selector span[option="2"]');
-    await verifySelectorsVisible(
-      page, name, ['#single_selector span[option="2"][selected]']);
+    await verifySelectorsVisible(page, name, [
+      '#single_selector span[option="2"][selected]',
+    ]);
   },
 
   'single selector select option 2, then 3': async (page, name) => {
     await page.tap('#single_selector span[option="2"]');
-    await page.waitFor('#single_selector span[option="2"][selected]');
+    await page.waitForSelector('#single_selector span[option="2"][selected]');
     await page.tap('#single_selector span[option="3"]');
-    await verifySelectorsVisible(
-      page, name, ['#single_selector span[option="3"][selected]']);
+    await verifySelectorsVisible(page, name, [
+      '#single_selector span[option="3"][selected]',
+    ]);
   },
 
-  'try to select disabled options': async page => {
+  'try to select disabled options': async (page) => {
     await page.tap('#multi_selector span[option="2"]');
     await page.tap('#disabled_selector span[option="2"]');
     await page.tap('#disabled_selector span[option="3"]');
-    await page.waitFor(100);
+    await page.waitForTimeout(100);
   },
 
   'change mutli select': async (page, name) => {
     await page.tap('#multi_selector span[option="1"]');
     await page.tap('#multi_selector span[option="4"]');
-    await verifySelectorsInvisible(
-      page, name, ['#multi_selector span[option="1"][selected]']);
-    await verifySelectorsVisible(
-      page, name, ['#multi_selector span[option="4"][selected]']);
+    await verifySelectorsInvisible(page, name, [
+      '#multi_selector span[option="1"][selected]',
+    ]);
+    await verifySelectorsVisible(page, name, [
+      '#multi_selector span[option="4"][selected]',
+    ]);
   },
- };
+};
diff --git a/examples/visual-tests/amp-story-player/placeholder.js b/examples/visual-tests/amp-story-player/placeholder.js
@@ -16,11 +16,12 @@
 'use strict';
 
 module.exports = {
-  'player ready': async page => {
-    await page.waitFor(1000);
+  'player ready': async (page) => {
+    await page.waitForTimeout(1000);
     await page.$eval('iframe', (iframe) => {
       iframe.src = '';
-      iframe.srcdoc = '<html><head></head><body style=\"background: darkgray;\"></body></html>';
+      iframe.srcdoc =
+        '<html><head></head><body style="background: darkgray;"></body></html>';
     });
-  }
+  },
 };
diff --git a/examples/visual-tests/amp-story-player/story-loaded.js b/examples/visual-tests/amp-story-player/story-loaded.js
@@ -16,13 +16,13 @@
 'use strict';
 
 module.exports = {
-  'story loaded and player ready': async page => {
-    await page.waitFor(5000);
+  'story loaded and player ready': async (page) => {
+    await page.waitForTimeout(5000);
     await page.$eval('iframe', (iframe) => {
       const contents = iframe.contentDocument.documentElement.outerHTML;
       iframe.src = '';
       iframe.srcdoc = contents;
     });
-    await page.waitFor(2000);
-  }
+    await page.waitForTimeout(2000);
+  },
 };
diff --git a/examples/visual-tests/amp-story/amp-story-landscape-templates.js b/examples/visual-tests/amp-story/amp-story-landscape-templates.js
@@ -17,10 +17,10 @@
 
 module.exports = {
   'shows half-half template with image on the left': async (page, name) => {
-    await page.waitFor(1600);
+    await page.waitForTimeout(1600);
   },
   'shows half-half template with image on the right': async (page, name) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page1[active]');
+    await page.waitForSelector('amp-story-page#page1[active]');
   },
- };
+};
diff --git a/examples/visual-tests/amp-story/amp-story-live-story.js b/examples/visual-tests/amp-story/amp-story-live-story.js
@@ -16,17 +16,27 @@
 'use strict';
 
 module.exports = {
-  'should show the notification.': async page => {
-    await page.waitFor('amp-story-page#cover[active]');
-    await page.$eval('.i-amphtml-story-system-layer', e => e.setAttribute('i-amphtml-story-has-new-page', 'show'));
-    await page.waitFor(2000); // For animations to finish.
-    await page.waitForSelector('.i-amphtml-story-has-new-page-notification-container', {opacity: 1});
+  'should show the notification.': async (page) => {
+    await page.waitForSelector('amp-story-page#cover[active]');
+    await page.$eval('.i-amphtml-story-system-layer', (e) =>
+      e.setAttribute('i-amphtml-story-has-new-page', 'show')
+    );
+    await page.waitForTimeout(2000); // For animations to finish.
+    await page.waitForSelector(
+      '.i-amphtml-story-has-new-page-notification-container',
+      {opacity: 1}
+    );
   },
-  '[RTL] should show the notification.': async page => {
-    await page.$eval('body', e => e.setAttribute('dir', 'rtl'));
-    await page.waitFor('amp-story-page#cover[active]');
-    await page.$eval('.i-amphtml-story-system-layer', e => e.setAttribute('i-amphtml-story-has-new-page', 'show'));
-    await page.waitFor(2000); // For animations to finish.
-    await page.waitForSelector('.i-amphtml-story-has-new-page-notification-container', {opacity: 1});
+  '[RTL] should show the notification.': async (page) => {
+    await page.$eval('body', (e) => e.setAttribute('dir', 'rtl'));
+    await page.waitForSelector('amp-story-page#cover[active]');
+    await page.$eval('.i-amphtml-story-system-layer', (e) =>
+      e.setAttribute('i-amphtml-story-has-new-page', 'show')
+    );
+    await page.waitForTimeout(2000); // For animations to finish.
+    await page.waitForSelector(
+      '.i-amphtml-story-has-new-page-notification-container',
+      {opacity: 1}
+    );
   },
- };
+};
diff --git a/examples/visual-tests/amp-story/amp-story-page-attachment-desktop.js b/examples/visual-tests/amp-story/amp-story-page-attachment-desktop.js
@@ -17,11 +17,11 @@
 
 module.exports = {
   'open attachment UI element': async (page, name) => {
-    await page.waitFor(1600);
+    await page.waitForTimeout(1600);
   },
 
   'open attachment': async (page, name) => {
     await page.tap('.i-amphtml-story-page-open-attachment-label');
-    await page.waitFor(410);
+    await page.waitForTimeout(410);
   },
- };
+};
diff --git a/examples/visual-tests/amp-story/amp-story-page-attachment.js b/examples/visual-tests/amp-story/amp-story-page-attachment.js
@@ -17,12 +17,12 @@
 
 module.exports = {
   'open attachment UI element': async (page, name) => {
-    await page.waitFor(1600);
+    await page.waitForTimeout(1600);
   },
 
   'open attachment': async (page, name) => {
     await page.tap('.i-amphtml-story-page-open-attachment-label');
-    await page.waitFor(410);
+    await page.waitForTimeout(410);
   },
   /**
    * TODO(@ampproject/wg-stories): fix flaky test:
@@ -31,7 +31,7 @@ module.exports = {
    * 'open attachment UI element with link': async (page, name) => {
    *   const screen = page.touchscreen;
    *   await screen.tap(200, 240);
-   *   await page.waitFor('amp-story-page#page-2[active]');
+   *   await page.waitForSelector('amp-story-page#page-2[active]');
    * },
    */
 };
diff --git a/examples/visual-tests/amp-story/amp-story-pagination-buttons.js b/examples/visual-tests/amp-story/amp-story-pagination-buttons.js
@@ -15,48 +15,48 @@
  */
 'use strict';
 
-const {verifySelectorsVisible} = require('../../../build-system/tasks/visual-diff/helpers');
+const {
+  verifySelectorsVisible,
+} = require('../../../build-system/tasks/visual-diff/helpers');
 
 module.exports = {
   'shows corresponding buttons for first page': async (page, name) => {
-    await verifySelectorsVisible(page, name,
-      [
-        '.next-container > .i-amphtml-story-button-move',
-        '.prev-container.i-amphtml-story-button-hidden',
-      ]);
+    await verifySelectorsVisible(page, name, [
+      '.next-container > .i-amphtml-story-button-move',
+      '.prev-container.i-amphtml-story-button-hidden',
+    ]);
   },
-  'shows corresponding buttons when there is a previous and next page':
-      async (page, name) => {
+  'shows corresponding buttons when there is a previous and next page': async (
+    page,
+    name
+  ) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
-    await verifySelectorsVisible(page, name,
-      [
-        '.next-container > button.i-amphtml-story-button-move',
-        '.prev-container > button.i-amphtml-story-button-move',
-      ]);
+    await page.waitForSelector('amp-story-page#page-2[active]');
+    await verifySelectorsVisible(page, name, [
+      '.next-container > button.i-amphtml-story-button-move',
+      '.prev-container > button.i-amphtml-story-button-move',
+    ]);
   },
   'shows corresponding buttons for last page': async (page, name) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
+    await page.waitForSelector('amp-story-page#page-2[active]');
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-3[active]');
-    await verifySelectorsVisible(page, name,
-      [
-        '.i-amphtml-story-fwd-more',
-        '.prev-container > button.i-amphtml-story-button-move',
-      ]);
+    await page.waitForSelector('amp-story-page#page-3[active]');
+    await verifySelectorsVisible(page, name, [
+      '.i-amphtml-story-fwd-more',
+      '.prev-container > button.i-amphtml-story-button-move',
+    ]);
   },
   'shows corresponding buttons for bookend': async (page, name) => {
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-2[active]');
+    await page.waitForSelector('amp-story-page#page-2[active]');
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('amp-story-page#page-3[active]');
+    await page.waitForSelector('amp-story-page#page-3[active]');
     await page.tap('.next-container > button.i-amphtml-story-button-move');
-    await page.waitFor('.i-amphtml-story-bookend-active');
-    await verifySelectorsVisible(page, name,
-      [
-        '.i-amphtml-story-fwd-replay',
-        '.i-amphtml-story-back-close-bookend',
-      ]);
+    await page.waitForSelector('.i-amphtml-story-bookend-active');
+    await verifySelectorsVisible(page, name, [
+      '.i-amphtml-story-fwd-replay',
+      '.i-amphtml-story-back-close-bookend',
+    ]);
   },
- };
+};
diff --git a/examples/visual-tests/amp-story/amp-story-sidebar.js b/examples/visual-tests/amp-story/amp-story-sidebar.js
@@ -15,43 +15,48 @@
  */
 'use strict';
 
-const {verifySelectorsVisible} = require('../../../build-system/tasks/visual-diff/helpers');
+const {
+  verifySelectorsVisible,
+} = require('../../../build-system/tasks/visual-diff/helpers');
 
 module.exports = {
-  'tapping on sidebar control button should show sidebar and opacity mask': async (page, name) => {
+  'tapping on sidebar control button should show sidebar and opacity mask': async (
+    page,
+    name
+  ) => {
     const screen = page.touchscreen;
     await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#cover[active]');
+    await page.waitForSelector('amp-story-page#cover[active]');
     await page.tap('.i-amphtml-story-sidebar-control');
-    await verifySelectorsVisible(page, name,
-      [
-        'amp-sidebar[side][open]',
-        '.i-amphtml-story-opacity-mask',
-      ]);
+    await verifySelectorsVisible(page, name, [
+      'amp-sidebar[side][open]',
+      '.i-amphtml-story-opacity-mask',
+    ]);
   },
-  'tapping on element with sidebar close action should close opacity mask ': async(page,name) => {
+  'tapping on element with sidebar close action should close opacity mask ': async (
+    page,
+    name
+  ) => {
     const screen = page.touchscreen;
     await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#cover[active]');
+    await page.waitForSelector('amp-story-page#cover[active]');
     await page.tap('.i-amphtml-story-sidebar-control');
-    await page.waitFor(400);
+    await page.waitForTimeout(400);
     await page.tap('button#close-button');
-    await verifySelectorsVisible(page, name,
-    [
+    await verifySelectorsVisible(page, name, [
       'amp-sidebar[hidden]',
       '.i-amphtml-story-opacity-mask[hidden]',
     ]);
   },
-  'tapping on the opacity mask should close sidebar ': async(page,name) => {
+  'tapping on the opacity mask should close sidebar ': async (page, name) => {
     const screen = page.touchscreen;
     await screen.tap(200, 240);
-    await page.waitFor('amp-story-page#cover[active]');
+    await page.waitForSelector('amp-story-page#cover[active]');
     await page.tap('.i-amphtml-story-sidebar-control');
     await screen.tap(200, 240);
-    await verifySelectorsVisible(page, name,
-    [
+    await verifySelectorsVisible(page, name, [
       'amp-sidebar[hidden]',
       '.i-amphtml-story-opacity-mask[hidden]',
     ]);
   },
- };
+};