bug/UIDS-521 wait for accessibility tests (and navigation) before Percy snapshots (#523)

brianCollinsUI · web-flow · commit 14357eecf79d · 2022-01-20T10:09:28.000-08:00
diff --git a/cypress/integration/alert_spec.js b/cypress/integration/alert_spec.js
@@ -44,7 +44,7 @@ describe('Alert', () => {
       cy.visit(test.path);
       const match = test.match ? test.match : test.name;
       cy.get('#storybook-preview-iframe').iframe().find(test.class).should('contain', match);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/avatar_spec.js b/cypress/integration/avatar_spec.js
@@ -24,8 +24,7 @@ describe('Avatar', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find(test.class).should('contain', test.match);
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 
@@ -34,6 +33,6 @@ describe('Avatar', () => {
     cy.get('#storybook-preview-iframe').iframe().find('.Avatar__circle')
       .find('img')
       .should('be.visible');
-    cy.percySnapshot('design-system-alert--with-image');
+    cy.takePercySnapshot('design-system-alert--with-image');
   });
 });
diff --git a/cypress/integration/button_spec.js b/cypress/integration/button_spec.js
@@ -24,8 +24,7 @@ describe('Button', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find(test.class).should('contain', test.match);
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/card_spec.js b/cypress/integration/card_spec.js
@@ -3,6 +3,6 @@ describe('Card', () => {
     cy.visit('design-system-card--default');
     cy.get('#storybook-preview-iframe').iframe().find('.Card__title')
       .should('contain', 'Large card with title');
-    cy.percySnapshot('design-system-card--default');
+    cy.takePercySnapshot('design-system-card--default');
   });
 });
diff --git a/cypress/integration/checkbox_button_spec.js b/cypress/integration/checkbox_button_spec.js
@@ -2,22 +2,19 @@ describe('CheckboxButton', () => {
   it('Default', () => {
     cy.visit('design-system-checkboxbutton--default');
     cy.get('#storybook-preview-iframe').iframe().find('.checkbox').should('exist');
-    cy.wait(1000);
-    cy.percySnapshot('design-system-checkboxbutton--default');
+    cy.takePercySnapshot('design-system-checkboxbutton--default');
   });
 
   it('Indeterminate', () => {
     cy.visit('design-system-checkboxbutton--indeterminate');
     cy.get('#storybook-preview-iframe').iframe().find('#select-all').should('exist');
-    cy.wait(1000);
-    cy.percySnapshot('design-system-checkboxbutton--indeterminate');
+    cy.takePercySnapshot('design-system-checkboxbutton--indeterminate');
   });
 
   it('With Description', () => {
     cy.visit('design-system-checkboxbutton--with-description');
     cy.get('#storybook-preview-iframe').iframe().find('.FormControlLabel__label')
       .should('contain', 'Label 2');
-    cy.wait(1000);
-    cy.percySnapshot('design-system-checkboxbutton--with-description');
+    cy.takePercySnapshot('design-system-checkboxbutton--with-description');
   });
 });
diff --git a/cypress/integration/copy_to_clipboard_button_spec.js b/cypress/integration/copy_to_clipboard_button_spec.js
@@ -2,12 +2,12 @@ describe('Copy to Clipboard Button', () => {
   it('Default', () => {
     cy.visit('design-system-copy-to-clipboard-button--default');
     cy.get('#storybook-preview-iframe').iframe().find('.CopyToClipboardButton').should('exist');
-    cy.percySnapshot('design-system-copy-to-clipboard-button--default');
+    cy.takePercySnapshot('design-system-copy-to-clipboard-button--default');
   });
 
   it('Secondary', () => {
     cy.visit('design-system-copy-to-clipboard-button--secondary');
     cy.get('#storybook-preview-iframe').iframe().find('.CopyToClipboardButton').should('exist');
-    cy.percySnapshot('design-system-copy-to-clipboard-button--secondary');
+    cy.takePercySnapshot('design-system-copy-to-clipboard-button--secondary');
   });
 });
diff --git a/cypress/integration/copy_to_clipboard_spec.js b/cypress/integration/copy_to_clipboard_spec.js
@@ -2,6 +2,6 @@ describe('Copy to Clipboard', () => {
   it('Default', () => {
     cy.visit('design-system-copy-to-clipboard--default');
     cy.get('#storybook-preview-iframe').iframe().find('.CopyToClipboard').should('exist');
-    cy.percySnapshot('design-system-copy-to-clipboard--default');
+    cy.takePercySnapshot('design-system-copy-to-clipboard--default');
   });
 });
diff --git a/cypress/integration/dropdown_spec.js b/cypress/integration/dropdown_spec.js
@@ -21,8 +21,7 @@ describe('Dropdown', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find(test.class).should('exist');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/form_elements/checkbox_button_group_spec.js b/cypress/integration/form_elements/checkbox_button_group_spec.js
@@ -31,8 +31,7 @@ describe('Form Elements -> CheckboxButtonGroup', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find(test.class).should('contain', 'Label');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/form_elements/form_control_label_spec.js b/cypress/integration/form_elements/form_control_label_spec.js
@@ -26,8 +26,7 @@ describe('Form Elements -> Form Control Label', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find(test.class).should('contain', 'Label');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/form_elements/form_group_spec.js b/cypress/integration/form_elements/form_group_spec.js
@@ -61,8 +61,7 @@ describe('Form Elements -> Form Group', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find(test.class).should('exist');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/form_elements/radio_button_group_spec.js b/cypress/integration/form_elements/radio_button_group_spec.js
@@ -31,8 +31,7 @@ describe('Form Elements -> RadioButtonGroup', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find(test.class).should('exist');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/form_spec.js b/cypress/integration/form_spec.js
@@ -2,6 +2,6 @@ describe('Form', () => {
   it('Default', () => {
     cy.visit('design-system-form--default');
     cy.get('#storybook-preview-iframe').iframe().find('.Input').should('exist');
-    cy.percySnapshot('design-system-form--default');
+    cy.takePercySnapshot('design-system-form--default');
   });
 });
diff --git a/cypress/integration/icon_cell_spec.js b/cypress/integration/icon_cell_spec.js
@@ -2,6 +2,6 @@ describe('Icon Cell', () => {
   it('Default', () => {
     cy.visit('design-system-iconcell--default');
     cy.get('#storybook-preview-iframe').iframe().find('.IconCell').should('exist');
-    cy.percySnapshot('design-system-iconcell--default');
+    cy.takePercySnapshot('design-system-iconcell--default');
   });
 });
diff --git a/cypress/integration/loading_overlay_spec.js b/cypress/integration/loading_overlay_spec.js
@@ -2,6 +2,6 @@ describe('Loading Overlay', () => {
   it('Default', () => {
     cy.visit('design-system-loadingoverlay--default');
     cy.get('#storybook-preview-iframe').iframe().find('.overlay').should('exist');
-    cy.percySnapshot('design-system-loadingoverlay--default');
+    cy.takePercySnapshot('design-system-loadingoverlay--default');
   });
 });
diff --git a/cypress/integration/modal_spec.js b/cypress/integration/modal_spec.js
@@ -34,8 +34,7 @@ describe('Modal', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find('.ModalHeader').should('contain', 'modal');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/pill_spec.js b/cypress/integration/pill_spec.js
@@ -22,8 +22,7 @@ describe('Pill', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find('.Pill').should('exist');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/popper_spec.js b/cypress/integration/popper_spec.js
@@ -14,8 +14,7 @@ describe('Popper', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find('.Popper').should('exist');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/profile_cell_spec.js b/cypress/integration/profile_cell_spec.js
@@ -18,8 +18,7 @@ describe('Profile Cell', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find('.ProfileCell').should('exist');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/radio_button_spec.js b/cypress/integration/radio_button_spec.js
@@ -14,8 +14,7 @@ describe('Radio Button', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find('#root').should('exist');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/selects/async_spec.js b/cypress/integration/selects/async_spec.js
@@ -14,8 +14,7 @@ describe('Selects -> Async', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find('.AsyncSelect').should('exist');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/selects/creatable_spec.js b/cypress/integration/selects/creatable_spec.js
@@ -10,8 +10,7 @@ describe('Selects -> Creatable', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find('.CreatableSelect').should('exist');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/selects/single_spec.js b/cypress/integration/selects/single_spec.js
@@ -34,8 +34,7 @@ describe('Selects -> Single', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find('.SingleSelect').should('exist');
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/table_spec.js b/cypress/integration/table_spec.js
@@ -71,8 +71,7 @@ describe('Table', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find(test.class).should('exist');
-      cy.wait(2000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/toast_spec.js b/cypress/integration/toast_spec.js
@@ -19,8 +19,7 @@ describe('Toast', () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find('.btn').should('exist')
         .click();
-      cy.wait(1000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/integration/tooltip_spec.js b/cypress/integration/tooltip_spec.js
@@ -34,8 +34,7 @@ describe('Tooltip', () => {
     it(test.name, () => {
       cy.visit(test.path);
       cy.get('#storybook-preview-iframe').iframe().find('.Tooltip__icon').click();
-      cy.wait(2000);
-      cy.percySnapshot(test.path);
+      cy.takePercySnapshot(test.path);
     });
   });
 });
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -17,3 +17,13 @@ Cypress.Commands.add('iframe', { prevSubject: 'element' }, ($iframe) => {
     });
   });
 });
+
+Cypress.Commands.add('takePercySnapshot', (name) => {
+  // Check for accessibility tests to finish first
+  cy.get('body').should('contain', 'Tests completed');
+
+  // Also wait for the nav to load
+  cy.get('body').should('contain', 'Design System');
+
+  cy.percySnapshot(name);
+});
