fix(e2e): migrate from deprecated waitFor fn (uber#3803)

vasdhara · Oct 2, 2020 · eebaf24 · eebaf24
1 parent c76a63c
commit eebaf24
Show file tree

Hide file tree

Showing 57 changed files with 414 additions and 397 deletions.
diff --git a/documentation-site/pages/blog/visual-regression-testing/index.mdx b/documentation-site/pages/blog/visual-regression-testing/index.mdx
@@ -313,7 +313,8 @@ If you have any components that make use of transitions or animations you are go
 When testing components that require interactions, you often need to wait for the UI to change before you can proceed to the next step in the interaction. It might be tempting to simply pad steps with arbitrary wait times, but this is a sure way to add flakiness to your test.
 
 ```js
-await page.waitFor(250); // waits for 250ms before proceeding
+const {waitForTimeout} = require('../../../e2e/helpers/index.js');
+await waitForTimeout(250); // waits for 250ms before proceeding
 ```
 
 This should be a last resort as it will almost certainly flake at some point. When it does someone will probably just increase the wait duration- so over time these paddings accumulate. These can add up to make your test run unbearably slow. The preferable approach is to wait for assertions on the page to pass. Take this example from one of our interaction snapshots:

diff --git a/e2e/helpers/index.js b/e2e/helpers/index.js
@@ -83,6 +83,13 @@ async function analyzeAccessibility(page, options = {rules: []}) {
   return accessibilityReport;
 }
 
+// This utility is available in newer versions of puppetteer, but upgrading did not seem worth just for this
+function waitForTimeout(ms) {
+  return new Promise(res => {
+    setTimeout(res, ms);
+  });
+}
+
 const defaultOptions = {
   violationsThreshold: 0,
   incompleteThreshold: 0,
@@ -140,4 +147,5 @@ expect.extend({
 module.exports = {
   analyzeAccessibility,
   mount,
+  waitForTimeout,
 };
diff --git a/src/accordion/__tests__/accordion.e2e.js b/src/accordion/__tests__/accordion.e2e.js
@@ -16,7 +16,7 @@ const expanded = '[aria-expanded=true]';
 describe('accordion', () => {
   it('passes basic a11y tests', async () => {
     await mount(page, 'accordion');
-    await page.waitFor('ul');
+    await page.waitForSelector('ul');
     const accessibilityReport = await analyzeAccessibility(page);
     expect(accessibilityReport).toHaveNoAccessibilityIssues();
   });

diff --git a/src/breadcrumbs/__tests__/breadcrumbs.e2e.js b/src/breadcrumbs/__tests__/breadcrumbs.e2e.js
@@ -13,7 +13,7 @@ const {mount, analyzeAccessibility} = require('../../../e2e/helpers');
 describe('breadcrumbs', () => {
   it('passes basic a11y tests', async () => {
     await mount(page, 'breadcrumbs');
-    await page.waitFor('a');
+    await page.waitForSelector('a');
 
     const accessibilityReport = await analyzeAccessibility(page);
     expect(accessibilityReport).toHaveNoAccessibilityIssues();

diff --git a/src/button-group/__tests__/button-group.e2e.js b/src/button-group/__tests__/button-group.e2e.js
@@ -13,7 +13,7 @@ const {mount, analyzeAccessibility} = require('../../../e2e/helpers');
 describe('button-group', () => {
   it('radio mode passes basic a11y tests', async () => {
     await mount(page, 'button-group-radio');
-    await page.waitFor('div');
+    await page.waitForSelector('div');
     await page.click('button');
 
     const accessibilityReport = await analyzeAccessibility(page);
@@ -22,7 +22,7 @@ describe('button-group', () => {
 
   it('checkbox mode passes basic a11y tests', async () => {
     await mount(page, 'button-group-checkbox');
-    await page.waitFor('div');
+    await page.waitForSelector('div');
     await page.click('button');
 
     const accessibilityReport = await analyzeAccessibility(page);

diff --git a/src/button/__tests__/button.e2e.js b/src/button/__tests__/button.e2e.js
@@ -12,7 +12,7 @@ const {mount, analyzeAccessibility} = require('../../../e2e/helpers');
 describe('button', () => {
   it('passes basic a11y tests', async () => {
     await mount(page, 'button');
-    await page.waitFor('button');
+    await page.waitForSelector('button');
     const accessibilityReport = await analyzeAccessibility(page);
     expect(accessibilityReport).toHaveNoAccessibilityIssues();
   });

diff --git a/src/checkbox/__tests__/checkbox.e2e.js b/src/checkbox/__tests__/checkbox.e2e.js
@@ -27,7 +27,7 @@ describe('checkbox', () => {
 
   it('can switch states', async () => {
     await mount(page, 'checkbox-indeterminate');
-    await page.waitFor(childLabel2);
+    await page.waitForSelector(childLabel2);
     await page.click(childLabel2);
     const checked = await page.$eval(parentCheckbox, input => input.checked);
     expect(checked).toBe(true);

diff --git a/src/data-table/__tests__/data-table-columns-not-sortable.e2e.js b/src/data-table/__tests__/data-table-columns-not-sortable.e2e.js
@@ -22,7 +22,7 @@ describe('data table non-sortable columns', () => {
   it('clicks on column header does not sort', async () => {
     const index = 0;
     await mount(page, 'data-table-columns-not-sortable');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const before = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,

diff --git a/src/data-table/__tests__/data-table-columns.e2e.js b/src/data-table/__tests__/data-table-columns.e2e.js
@@ -7,7 +7,11 @@ LICENSE file in the root directory of this source tree.
 /* eslint-env node */
 /* eslint-disable flowtype/require-valid-file-annotation */
 
-const {mount, analyzeAccessibility} = require('../../../e2e/helpers');
+const {
+  mount,
+  analyzeAccessibility,
+  waitForTimeout,
+} = require('../../../e2e/helpers');
 
 const {
   TABLE_ROOT,
@@ -29,7 +33,7 @@ describe('data table columns', () => {
   it('sorts boolean column', async () => {
     const index = 0;
     await mount(page, 'data-table-columns');
-    await page.waitFor('div[data-baseweb="data-table"]');
+    await page.waitForSelector('div[data-baseweb="data-table"]');
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -57,7 +61,7 @@ describe('data table columns', () => {
   it('sorts categorical column', async () => {
     const index = 1;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -85,7 +89,7 @@ describe('data table columns', () => {
   it('sorts numerical column', async () => {
     const index = 2;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -113,7 +117,7 @@ describe('data table columns', () => {
   it('sorts string column', async () => {
     const index = 3;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -124,14 +128,14 @@ describe('data table columns', () => {
     );
 
     await sortColumnAtIndex(page, index);
-    await page.waitFor(150);
+    await waitForTimeout(150);
     const desc = await getCellContentsAtColumnIndex(page, COLUMN_COUNT, index);
     expect(matchArrayElements(desc, ['four', 'one', 'three', 'two'])).toBe(
       true,
     );
 
     await sortColumnAtIndex(page, index);
-    await page.waitFor(150);
+    await waitForTimeout(150);
     const asc = await getCellContentsAtColumnIndex(page, COLUMN_COUNT, index);
     expect(matchArrayElements(asc, ['two', 'three', 'one', 'four'])).toBe(true);
 
@@ -147,7 +151,7 @@ describe('data table columns', () => {
   it('sorts datetime column', async () => {
     const index = 4;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -163,7 +167,7 @@ describe('data table columns', () => {
     ).toBe(true);
 
     await sortColumnAtIndex(page, index);
-    await page.waitFor(150);
+    await waitForTimeout(150);
     const desc = await getCellContentsAtColumnIndex(page, COLUMN_COUNT, index);
     expect(
       matchArrayElements(desc, [
@@ -175,7 +179,7 @@ describe('data table columns', () => {
     ).toBe(true);
 
     await sortColumnAtIndex(page, index);
-    await page.waitFor(150);
+    await waitForTimeout(150);
     const asc = await getCellContentsAtColumnIndex(page, COLUMN_COUNT, index);
     expect(
       matchArrayElements(asc, [
@@ -198,7 +202,7 @@ describe('data table columns', () => {
   it('filters boolean column', async () => {
     const index = 0;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -236,7 +240,7 @@ describe('data table columns', () => {
   it('filters categorical column', async () => {
     const index = 1;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -274,7 +278,7 @@ describe('data table columns', () => {
   it('filters numerical column as single value', async () => {
     const index = 2;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -317,7 +321,7 @@ describe('data table columns', () => {
   it('filters numerical column between case', async () => {
     const index = 2;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -355,7 +359,7 @@ describe('data table columns', () => {
   it('filters numerical column excludes between case', async () => {
     const index = 2;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -396,7 +400,7 @@ describe('data table columns', () => {
   it('filters datetime column - datetime range', async () => {
     const index = 4;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -448,7 +452,7 @@ describe('data table columns', () => {
   it('filters datetime column - date range', async () => {
     const index = 4;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -494,7 +498,7 @@ describe('data table columns', () => {
   it('filters datetime column - date range - default', async () => {
     const index = 4;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -539,7 +543,7 @@ describe('data table columns', () => {
   it('filters datetime column - time range', async () => {
     const index = 4;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -590,7 +594,7 @@ describe('data table columns', () => {
   it('filters datetime column - weekday categorical', async () => {
     const index = 4;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -629,7 +633,7 @@ describe('data table columns', () => {
   it('filters datetime column - month categorical', async () => {
     const index = 4;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -675,7 +679,7 @@ describe('data table columns', () => {
   it('filters datetime column - quarter categorical', async () => {
     const index = 4;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -721,7 +725,7 @@ describe('data table columns', () => {
   it('filters datetime column - half categorical', async () => {
     const index = 4;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,
@@ -767,7 +771,7 @@ describe('data table columns', () => {
   it('filters datetime column - year categorical', async () => {
     const index = 4;
     await mount(page, 'data-table-columns');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const initial = await getCellContentsAtColumnIndex(
       page,
       COLUMN_COUNT,

diff --git a/src/data-table/__tests__/data-table-extracted-filters.e2e.js b/src/data-table/__tests__/data-table-extracted-filters.e2e.js
@@ -24,7 +24,7 @@ describe('data-table-extracted-filters', () => {
     await page.setViewport({width: 1366, height: 1000});
 
     await mount(page, 'data-table-extracted-filters');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const phylumFilter = await page.$('#Phylum-filter');
     const checkboxes = await phylumFilter.$$('label[data-baseweb="checkbox"');
     await checkboxes[1].click();

diff --git a/src/data-table/__tests__/data-table-included-rows-change.e2e.js b/src/data-table/__tests__/data-table-included-rows-change.e2e.js
@@ -15,7 +15,7 @@ describe('data table columns', () => {
   it('updates application state when rows change', async () => {
     const index = 0;
     await mount(page, 'data-table-included-rows-change');
-    await page.waitFor('div[data-baseweb="data-table"]');
+    await page.waitForSelector('div[data-baseweb="data-table"]');
 
     const initialLi = await page.$$('li');
     const initial = await Promise.all(

diff --git a/src/data-table/__tests__/data-table-initial-filters.e2e.js b/src/data-table/__tests__/data-table-initial-filters.e2e.js
@@ -21,14 +21,14 @@ const COLUMN_COUNT = 1;
 describe('data table initial filters', () => {
   it('mounts with initial filters applied', async () => {
     await mount(page, 'data-table-initial-filters');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const data = await getCellContentsAtColumnIndex(page, COLUMN_COUNT, 0);
     expect(matchArrayElements(data, ['a'])).toBe(true);
   });
 
   it('calls onFilterRemove when expected', async () => {
     await mount(page, 'data-table-initial-filters');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const before = await page.$$('li[data-log="remove"]');
     expect(before.length).toBe(0);
 
@@ -42,7 +42,7 @@ describe('data table initial filters', () => {
 
   it('calls onFilterAdd when expected', async () => {
     await mount(page, 'data-table-initial-filters');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
 
     const before = await page.$$('li[data-log="add"]');
     expect(before.length).toBe(0);

diff --git a/src/data-table/__tests__/data-table-initial-selected-rows.e2e.js b/src/data-table/__tests__/data-table-initial-selected-rows.e2e.js
@@ -14,7 +14,7 @@ const {TABLE_ROOT} = require('./utilities.js');
 describe('data table initial filters', () => {
   it('mounts with initial rows selected', async () => {
     await mount(page, 'data-table-initial-selected-rows');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     // cell 1x1 should have a label with checkbox checked
     const cell1x1 = await page.$(
       `${TABLE_ROOT} > div:nth-child(2) label > input`,

diff --git a/src/data-table/__tests__/data-table-initial-sort.e2e.js b/src/data-table/__tests__/data-table-initial-sort.e2e.js
@@ -20,7 +20,7 @@ const COLUMN_COUNT = 1;
 describe('data table initial filters', () => {
   it('mounts with initial sort applied', async () => {
     await mount(page, 'data-table-initial-sort');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     const data = await getCellContentsAtColumnIndex(page, COLUMN_COUNT, 0);
     expect(matchArrayElements(data, ['d', 'c', 'b', 'a'])).toBe(true);
   });

diff --git a/src/data-table/__tests__/data-table-text-search.e2e.js b/src/data-table/__tests__/data-table-text-search.e2e.js
@@ -25,7 +25,7 @@ describe('data table text search', () => {
   jest.setTimeout(10 * 1000);
   it('filters to expected number of rows', async () => {
     await mount(page, 'data-table-text-search');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     await page.type('input', 'arti');
     await wait(250); // input is debounced by 250ms
 
@@ -36,7 +36,7 @@ describe('data table text search', () => {
 
   it('filters custom columns', async () => {
     await mount(page, 'data-table-text-search');
-    await page.waitFor(TABLE_ROOT);
+    await page.waitForSelector(TABLE_ROOT);
     await page.type('input', 'moll');
     await wait(250); // input is debounced by 250ms