From 7c5b00997a8b030d20194c97e8e85db2e6db8dfe Mon Sep 17 00:00:00 2001
From: Andi Oneto <aoneto@twilio.com>
Date: Wed, 17 Nov 2021 13:09:59 -0800
Subject: [PATCH 1/9] chore(cypress): turn on new cypress tests in ci

---
 cypress/integration/e2e/patterns/create.spec.ts                | 1 -
 cypress/integration/e2e/patterns/data-export.spec.ts           | 1 -
 cypress/integration/e2e/patterns/delete.spec.ts                | 1 -
 cypress/integration/e2e/patterns/empty-states.spec.ts          | 1 -
 .../e2e/patterns/notifications-and-feedback.spec.ts            | 3 +--
 cypress/integration/e2e/patterns/object-details.spec.ts        | 1 -
 cypress/integration/e2e/patterns/status.spec.ts                | 1 -
 .../integration/e2e/primitives/modal-dialog-primitive.spec.ts  | 1 -
 cypress/support/parent-commands.ts                             | 2 +-
 package.json                                                   | 2 +-
 10 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/cypress/integration/e2e/patterns/create.spec.ts b/cypress/integration/e2e/patterns/create.spec.ts
index c473b34c28..216be20692 100644
--- a/cypress/integration/e2e/patterns/create.spec.ts
+++ b/cypress/integration/e2e/patterns/create.spec.ts
@@ -8,6 +8,5 @@ describe('Create patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });
diff --git a/cypress/integration/e2e/patterns/data-export.spec.ts b/cypress/integration/e2e/patterns/data-export.spec.ts
index 4595b3ba13..9d4bf9ce5b 100644
--- a/cypress/integration/e2e/patterns/data-export.spec.ts
+++ b/cypress/integration/e2e/patterns/data-export.spec.ts
@@ -8,6 +8,5 @@ describe('Data-export patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });
diff --git a/cypress/integration/e2e/patterns/delete.spec.ts b/cypress/integration/e2e/patterns/delete.spec.ts
index 3226aaf31d..0fdfca3890 100644
--- a/cypress/integration/e2e/patterns/delete.spec.ts
+++ b/cypress/integration/e2e/patterns/delete.spec.ts
@@ -8,6 +8,5 @@ describe('Delete patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });
diff --git a/cypress/integration/e2e/patterns/empty-states.spec.ts b/cypress/integration/e2e/patterns/empty-states.spec.ts
index 1ad16a3dd4..2c115bf399 100644
--- a/cypress/integration/e2e/patterns/empty-states.spec.ts
+++ b/cypress/integration/e2e/patterns/empty-states.spec.ts
@@ -8,6 +8,5 @@ describe('Empty-states patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });
diff --git a/cypress/integration/e2e/patterns/notifications-and-feedback.spec.ts b/cypress/integration/e2e/patterns/notifications-and-feedback.spec.ts
index 4418cb3f2c..fa26745423 100644
--- a/cypress/integration/e2e/patterns/notifications-and-feedback.spec.ts
+++ b/cypress/integration/e2e/patterns/notifications-and-feedback.spec.ts
@@ -4,10 +4,9 @@ describe('Notifications-and-feedback patterns documentation page', () => {
   });
 
   it('should render the notifications-and-feedback patterns page correctly', () => {
-    cy.pageHeaderShouldBeVisible('Notifications And Feedback');
+    cy.pageHeaderShouldBeVisible('Notification and feedback patterns');
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });
diff --git a/cypress/integration/e2e/patterns/object-details.spec.ts b/cypress/integration/e2e/patterns/object-details.spec.ts
index e0b9cdd9e1..9a9f03fabe 100644
--- a/cypress/integration/e2e/patterns/object-details.spec.ts
+++ b/cypress/integration/e2e/patterns/object-details.spec.ts
@@ -8,6 +8,5 @@ describe('Object-details patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });
diff --git a/cypress/integration/e2e/patterns/status.spec.ts b/cypress/integration/e2e/patterns/status.spec.ts
index 64a6fc754c..6d9cf4e591 100644
--- a/cypress/integration/e2e/patterns/status.spec.ts
+++ b/cypress/integration/e2e/patterns/status.spec.ts
@@ -8,6 +8,5 @@ describe('Status patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });
diff --git a/cypress/integration/e2e/primitives/modal-dialog-primitive.spec.ts b/cypress/integration/e2e/primitives/modal-dialog-primitive.spec.ts
index 9f4f97726a..8d42aca2a6 100644
--- a/cypress/integration/e2e/primitives/modal-dialog-primitive.spec.ts
+++ b/cypress/integration/e2e/primitives/modal-dialog-primitive.spec.ts
@@ -8,7 +8,6 @@ describe('Modal-dialog-primitive primitives documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
     cy.checkChangelogRevealer();
   });
 });
diff --git a/cypress/support/parent-commands.ts b/cypress/support/parent-commands.ts
index 47518082ca..ec5617a9e0 100644
--- a/cypress/support/parent-commands.ts
+++ b/cypress/support/parent-commands.ts
@@ -85,7 +85,7 @@ declare namespace Cypress {
 Cypress.Commands.add('getDocsPageContentArea', () => cy.get('#paste-docs-content-area'));
 
 Cypress.Commands.add('pageHeaderShouldBeVisible', (headerText) => {
-  cy.contains('h1', headerText).shouldBeVisible();
+  cy.contains('h1', headerText, {matchCase: false}).shouldBeVisible();
 });
 
 Cypress.Commands.add('overviewTableRendersCorrectly', () => {
diff --git a/package.json b/package.json
index 779bb61310..1aab0add73 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "test:tools": "jest ./tools/ -c ./tools/jest.config.js",
     "test:tools-16": "USE_REACT_16=true jest ./tools/ -c ./tools/jest.config.js",
     "test:coverage": "yarn pre-test && jest --coverage",
-    "test:website": "start-server-and-test 'yarn serve:website' http://localhost:9000 'yarn cypress run --record --spec ./cypress/integration/**/*.spec.ts'",
+    "test:website": "start-server-and-test 'yarn serve:website' http://localhost:9000 'yarn cypress run --record --spec ./cypress/integration/**/**/*.spec.ts'",
     "test:website-gui": "start-server-and-test 'yarn serve:website' http://localhost:9000  'yarn cypress open'",
     "serve:website": "yarn workspace @twilio-paste/website serve",
     "package-size-action-build": "yarn build",

From 9a39f837ed3763655d9a17ea2d4e59d43eae8d61 Mon Sep 17 00:00:00 2001
From: Andi Oneto <aoneto@twilio.com>
Date: Thu, 18 Nov 2021 14:56:39 -0800
Subject: [PATCH 2/9] chore(cypress): abort unneeded prefetches

---
 .../integration/e2e/components/alert.spec.ts  |  1 +
 .../integration/e2e/components/anchor.spec.ts |  1 +
 .../integration/e2e/components/avatar.spec.ts |  1 +
 .../integration/e2e/components/badge.spec.ts  |  1 +
 .../e2e/components/breadcrumb.spec.ts         |  1 +
 .../integration/e2e/components/button.spec.ts |  1 +
 .../integration/e2e/components/card.spec.ts   |  1 +
 .../e2e/components/checkbox.spec.ts           |  1 +
 .../e2e/components/combobox.spec.ts           |  1 +
 .../e2e/components/data-grid.spec.ts          |  1 +
 .../e2e/components/date-picker.spec.ts        |  1 +
 .../e2e/components/disclosure.spec.ts         |  1 +
 .../e2e/components/display-pill-group.spec.ts |  1 +
 .../e2e/components/form-pill-group.spec.ts    |  1 +
 .../e2e/components/heading.spec.ts            |  1 +
 .../e2e/components/help-text.spec.ts          |  1 +
 .../integration/e2e/components/input.spec.ts  |  1 +
 .../integration/e2e/components/label.spec.ts  |  1 +
 .../integration/e2e/components/list.spec.ts   |  1 +
 .../integration/e2e/components/menu.spec.ts   |  1 +
 .../integration/e2e/components/modal.spec.ts  |  1 +
 .../e2e/components/pagination.spec.ts         |  1 +
 .../e2e/components/paragraph.spec.ts          |  1 +
 .../e2e/components/popover.spec.ts            |  1 +
 .../e2e/components/radio-group.spec.ts        |  1 +
 .../e2e/components/screen-reader-only.spec.ts |  1 +
 .../integration/e2e/components/select.spec.ts |  1 +
 .../e2e/components/separator.spec.ts          |  1 +
 .../e2e/components/skeleton-loader.spec.ts    |  1 +
 .../e2e/components/spinner.spec.ts            |  1 +
 .../integration/e2e/components/table.spec.ts  |  1 +
 .../integration/e2e/components/tabs.spec.ts   |  1 +
 .../e2e/components/textarea.spec.ts           |  1 +
 .../e2e/components/time-picker.spec.ts        |  1 +
 .../integration/e2e/components/toast.spec.ts  |  1 +
 .../e2e/components/tooltip.spec.ts            |  1 +
 .../e2e/components/truncate.spec.ts           |  1 +
 cypress/support/parent-commands.ts            | 32 +++++++++++++++----
 .../utils/cypress-test-generators/TEMPLATE.js |  1 +
 39 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/cypress/integration/e2e/components/alert.spec.ts b/cypress/integration/e2e/components/alert.spec.ts
index 8ffe603046..0cbcbfe95c 100644
--- a/cypress/integration/e2e/components/alert.spec.ts
+++ b/cypress/integration/e2e/components/alert.spec.ts
@@ -1,5 +1,6 @@
 describe('Alert component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('alert');
     cy.visit('/components/alert');
   });
 
diff --git a/cypress/integration/e2e/components/anchor.spec.ts b/cypress/integration/e2e/components/anchor.spec.ts
index 2ab61b1cc8..e76bbef4c0 100644
--- a/cypress/integration/e2e/components/anchor.spec.ts
+++ b/cypress/integration/e2e/components/anchor.spec.ts
@@ -1,5 +1,6 @@
 describe('Anchor component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('anchor');
     cy.visit('/components/anchor');
   });
 
diff --git a/cypress/integration/e2e/components/avatar.spec.ts b/cypress/integration/e2e/components/avatar.spec.ts
index 99f3018594..bd2a88cf43 100644
--- a/cypress/integration/e2e/components/avatar.spec.ts
+++ b/cypress/integration/e2e/components/avatar.spec.ts
@@ -1,5 +1,6 @@
 describe('Avatar component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('avatar');
     cy.visit('/components/avatar');
   });
 
diff --git a/cypress/integration/e2e/components/badge.spec.ts b/cypress/integration/e2e/components/badge.spec.ts
index 9752ad028f..e8b24ba2a6 100644
--- a/cypress/integration/e2e/components/badge.spec.ts
+++ b/cypress/integration/e2e/components/badge.spec.ts
@@ -1,5 +1,6 @@
 describe('Badge component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('badge');
     cy.visit('/components/badge');
   });
 
diff --git a/cypress/integration/e2e/components/breadcrumb.spec.ts b/cypress/integration/e2e/components/breadcrumb.spec.ts
index 14f25c5cab..520b9dcadd 100644
--- a/cypress/integration/e2e/components/breadcrumb.spec.ts
+++ b/cypress/integration/e2e/components/breadcrumb.spec.ts
@@ -1,5 +1,6 @@
 describe('Breadcrumb component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('breadcrumb');
     cy.visit('/components/breadcrumb');
   });
 
diff --git a/cypress/integration/e2e/components/button.spec.ts b/cypress/integration/e2e/components/button.spec.ts
index 012035983d..b0bbf6b459 100644
--- a/cypress/integration/e2e/components/button.spec.ts
+++ b/cypress/integration/e2e/components/button.spec.ts
@@ -1,5 +1,6 @@
 describe('Button component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('button');
     cy.visit('/components/button');
   });
 
diff --git a/cypress/integration/e2e/components/card.spec.ts b/cypress/integration/e2e/components/card.spec.ts
index 69e25cc188..b1d2e39183 100644
--- a/cypress/integration/e2e/components/card.spec.ts
+++ b/cypress/integration/e2e/components/card.spec.ts
@@ -1,5 +1,6 @@
 describe('Card component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('card');
     cy.visit('/components/card');
   });
 
diff --git a/cypress/integration/e2e/components/checkbox.spec.ts b/cypress/integration/e2e/components/checkbox.spec.ts
index 5b11b28f71..75e0725fb0 100644
--- a/cypress/integration/e2e/components/checkbox.spec.ts
+++ b/cypress/integration/e2e/components/checkbox.spec.ts
@@ -1,5 +1,6 @@
 describe('Checkbox component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('checkbox');
     cy.visit('/components/checkbox');
   });
 
diff --git a/cypress/integration/e2e/components/combobox.spec.ts b/cypress/integration/e2e/components/combobox.spec.ts
index 94af861e91..c2cc1df954 100644
--- a/cypress/integration/e2e/components/combobox.spec.ts
+++ b/cypress/integration/e2e/components/combobox.spec.ts
@@ -1,5 +1,6 @@
 describe('Combobox component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('combobox');
     cy.visit('/components/combobox');
   });
 
diff --git a/cypress/integration/e2e/components/data-grid.spec.ts b/cypress/integration/e2e/components/data-grid.spec.ts
index 55e8ae2fe1..7afed83b8d 100644
--- a/cypress/integration/e2e/components/data-grid.spec.ts
+++ b/cypress/integration/e2e/components/data-grid.spec.ts
@@ -1,5 +1,6 @@
 describe('Data-grid component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('data-grid');
     cy.visit('/components/data-grid');
   });
 
diff --git a/cypress/integration/e2e/components/date-picker.spec.ts b/cypress/integration/e2e/components/date-picker.spec.ts
index 0e1a5529ee..035d2e1b09 100644
--- a/cypress/integration/e2e/components/date-picker.spec.ts
+++ b/cypress/integration/e2e/components/date-picker.spec.ts
@@ -1,5 +1,6 @@
 describe('Date-picker component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('date-picker');
     cy.visit('/components/date-picker');
   });
 
diff --git a/cypress/integration/e2e/components/disclosure.spec.ts b/cypress/integration/e2e/components/disclosure.spec.ts
index 13e6a94586..259d2a5176 100644
--- a/cypress/integration/e2e/components/disclosure.spec.ts
+++ b/cypress/integration/e2e/components/disclosure.spec.ts
@@ -1,5 +1,6 @@
 describe('Disclosure component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('disclosure');
     cy.visit('/components/disclosure');
   });
 
diff --git a/cypress/integration/e2e/components/display-pill-group.spec.ts b/cypress/integration/e2e/components/display-pill-group.spec.ts
index 897e304bbc..2d7f31e94c 100644
--- a/cypress/integration/e2e/components/display-pill-group.spec.ts
+++ b/cypress/integration/e2e/components/display-pill-group.spec.ts
@@ -1,5 +1,6 @@
 describe('Display-pill-group component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('display-pill-group');
     cy.visit('/components/display-pill-group');
   });
 
diff --git a/cypress/integration/e2e/components/form-pill-group.spec.ts b/cypress/integration/e2e/components/form-pill-group.spec.ts
index e103a4fcf6..8c138debb1 100644
--- a/cypress/integration/e2e/components/form-pill-group.spec.ts
+++ b/cypress/integration/e2e/components/form-pill-group.spec.ts
@@ -1,5 +1,6 @@
 describe('Form-pill-group component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('form-pill-group');
     cy.visit('/components/form-pill-group');
   });
 
diff --git a/cypress/integration/e2e/components/heading.spec.ts b/cypress/integration/e2e/components/heading.spec.ts
index aafb46d165..80b5dd83db 100644
--- a/cypress/integration/e2e/components/heading.spec.ts
+++ b/cypress/integration/e2e/components/heading.spec.ts
@@ -1,5 +1,6 @@
 describe('Heading component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('heading');
     cy.visit('/components/heading');
   });
 
diff --git a/cypress/integration/e2e/components/help-text.spec.ts b/cypress/integration/e2e/components/help-text.spec.ts
index 045227e6a0..6592cfe269 100644
--- a/cypress/integration/e2e/components/help-text.spec.ts
+++ b/cypress/integration/e2e/components/help-text.spec.ts
@@ -1,5 +1,6 @@
 describe('Help-text component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('help-text');
     cy.visit('/components/help-text');
   });
 
diff --git a/cypress/integration/e2e/components/input.spec.ts b/cypress/integration/e2e/components/input.spec.ts
index aca910cd88..92ffee6d47 100644
--- a/cypress/integration/e2e/components/input.spec.ts
+++ b/cypress/integration/e2e/components/input.spec.ts
@@ -1,5 +1,6 @@
 describe('Input component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('input');
     cy.visit('/components/input');
   });
 
diff --git a/cypress/integration/e2e/components/label.spec.ts b/cypress/integration/e2e/components/label.spec.ts
index d29523b7fb..9ff2c2f57f 100644
--- a/cypress/integration/e2e/components/label.spec.ts
+++ b/cypress/integration/e2e/components/label.spec.ts
@@ -1,5 +1,6 @@
 describe('Label component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('label');
     cy.visit('/components/label');
   });
 
diff --git a/cypress/integration/e2e/components/list.spec.ts b/cypress/integration/e2e/components/list.spec.ts
index 90dc0ea682..8b7e9249e6 100644
--- a/cypress/integration/e2e/components/list.spec.ts
+++ b/cypress/integration/e2e/components/list.spec.ts
@@ -1,5 +1,6 @@
 describe('List component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('list');
     cy.visit('/components/list');
   });
 
diff --git a/cypress/integration/e2e/components/menu.spec.ts b/cypress/integration/e2e/components/menu.spec.ts
index 50bc24e224..19fb87a300 100644
--- a/cypress/integration/e2e/components/menu.spec.ts
+++ b/cypress/integration/e2e/components/menu.spec.ts
@@ -1,5 +1,6 @@
 describe('Menu component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('menu');
     cy.visit('/components/menu');
   });
 
diff --git a/cypress/integration/e2e/components/modal.spec.ts b/cypress/integration/e2e/components/modal.spec.ts
index d049a906a7..9f6eb167d9 100644
--- a/cypress/integration/e2e/components/modal.spec.ts
+++ b/cypress/integration/e2e/components/modal.spec.ts
@@ -1,5 +1,6 @@
 describe('Modal component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('modal');
     cy.visit('/components/modal');
   });
 
diff --git a/cypress/integration/e2e/components/pagination.spec.ts b/cypress/integration/e2e/components/pagination.spec.ts
index 1400c9e5e1..7be37a8da2 100644
--- a/cypress/integration/e2e/components/pagination.spec.ts
+++ b/cypress/integration/e2e/components/pagination.spec.ts
@@ -1,5 +1,6 @@
 describe('Pagination component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('pagination');
     cy.visit('/components/pagination');
   });
 
diff --git a/cypress/integration/e2e/components/paragraph.spec.ts b/cypress/integration/e2e/components/paragraph.spec.ts
index a759c90e32..9cca50f4dd 100644
--- a/cypress/integration/e2e/components/paragraph.spec.ts
+++ b/cypress/integration/e2e/components/paragraph.spec.ts
@@ -1,5 +1,6 @@
 describe('Paragraph component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('paragraph');
     cy.visit('/components/paragraph');
   });
 
diff --git a/cypress/integration/e2e/components/popover.spec.ts b/cypress/integration/e2e/components/popover.spec.ts
index dfeb7271ab..84be50a7dd 100644
--- a/cypress/integration/e2e/components/popover.spec.ts
+++ b/cypress/integration/e2e/components/popover.spec.ts
@@ -1,5 +1,6 @@
 describe('Popover component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('popover');
     cy.visit('/components/popover');
   });
 
diff --git a/cypress/integration/e2e/components/radio-group.spec.ts b/cypress/integration/e2e/components/radio-group.spec.ts
index b904db8a59..4b30aecaf3 100644
--- a/cypress/integration/e2e/components/radio-group.spec.ts
+++ b/cypress/integration/e2e/components/radio-group.spec.ts
@@ -1,5 +1,6 @@
 describe('Radio-group component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('radio-group');
     cy.visit('/components/radio-group');
   });
 
diff --git a/cypress/integration/e2e/components/screen-reader-only.spec.ts b/cypress/integration/e2e/components/screen-reader-only.spec.ts
index 7b5a9f7b58..565e94600e 100644
--- a/cypress/integration/e2e/components/screen-reader-only.spec.ts
+++ b/cypress/integration/e2e/components/screen-reader-only.spec.ts
@@ -1,5 +1,6 @@
 describe('Screen-reader-only component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('screen-reader-only');
     cy.visit('/components/screen-reader-only');
   });
 
diff --git a/cypress/integration/e2e/components/select.spec.ts b/cypress/integration/e2e/components/select.spec.ts
index 5ea6f6b0f1..6eae3f9d87 100644
--- a/cypress/integration/e2e/components/select.spec.ts
+++ b/cypress/integration/e2e/components/select.spec.ts
@@ -1,5 +1,6 @@
 describe('Select component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('select');
     cy.visit('/components/select');
   });
 
diff --git a/cypress/integration/e2e/components/separator.spec.ts b/cypress/integration/e2e/components/separator.spec.ts
index 0461352b39..e9186149b7 100644
--- a/cypress/integration/e2e/components/separator.spec.ts
+++ b/cypress/integration/e2e/components/separator.spec.ts
@@ -1,5 +1,6 @@
 describe('Separator component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('separator');
     cy.visit('/components/separator');
   });
 
diff --git a/cypress/integration/e2e/components/skeleton-loader.spec.ts b/cypress/integration/e2e/components/skeleton-loader.spec.ts
index 265a2aa365..f73d9efc18 100644
--- a/cypress/integration/e2e/components/skeleton-loader.spec.ts
+++ b/cypress/integration/e2e/components/skeleton-loader.spec.ts
@@ -1,5 +1,6 @@
 describe('Skeleton-loader component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('skeleton-loader');
     cy.visit('/components/skeleton-loader');
   });
 
diff --git a/cypress/integration/e2e/components/spinner.spec.ts b/cypress/integration/e2e/components/spinner.spec.ts
index c053bd15e5..03856105f2 100644
--- a/cypress/integration/e2e/components/spinner.spec.ts
+++ b/cypress/integration/e2e/components/spinner.spec.ts
@@ -1,5 +1,6 @@
 describe('Spinner component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('spinner');
     cy.visit('/components/spinner');
   });
 
diff --git a/cypress/integration/e2e/components/table.spec.ts b/cypress/integration/e2e/components/table.spec.ts
index 9739a54983..00f448e7bb 100644
--- a/cypress/integration/e2e/components/table.spec.ts
+++ b/cypress/integration/e2e/components/table.spec.ts
@@ -1,5 +1,6 @@
 describe('Table component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('table');
     cy.visit('/components/table');
   });
 
diff --git a/cypress/integration/e2e/components/tabs.spec.ts b/cypress/integration/e2e/components/tabs.spec.ts
index dd78d417bc..ec2f0916c1 100644
--- a/cypress/integration/e2e/components/tabs.spec.ts
+++ b/cypress/integration/e2e/components/tabs.spec.ts
@@ -1,5 +1,6 @@
 describe('Tabs component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('tabs');
     cy.visit('/components/tabs');
   });
 
diff --git a/cypress/integration/e2e/components/textarea.spec.ts b/cypress/integration/e2e/components/textarea.spec.ts
index 7a0967e565..8a22a2c7c2 100644
--- a/cypress/integration/e2e/components/textarea.spec.ts
+++ b/cypress/integration/e2e/components/textarea.spec.ts
@@ -1,5 +1,6 @@
 describe('Textarea component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('textarea');
     cy.visit('/components/textarea');
   });
 
diff --git a/cypress/integration/e2e/components/time-picker.spec.ts b/cypress/integration/e2e/components/time-picker.spec.ts
index d43b1944c4..f2c0895f56 100644
--- a/cypress/integration/e2e/components/time-picker.spec.ts
+++ b/cypress/integration/e2e/components/time-picker.spec.ts
@@ -1,5 +1,6 @@
 describe('Time-picker component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('time-picker');
     cy.visit('/components/time-picker');
   });
 
diff --git a/cypress/integration/e2e/components/toast.spec.ts b/cypress/integration/e2e/components/toast.spec.ts
index 962ff4bd74..7f9170926f 100644
--- a/cypress/integration/e2e/components/toast.spec.ts
+++ b/cypress/integration/e2e/components/toast.spec.ts
@@ -1,5 +1,6 @@
 describe('Toast component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('toast');
     cy.visit('/components/toast');
   });
 
diff --git a/cypress/integration/e2e/components/tooltip.spec.ts b/cypress/integration/e2e/components/tooltip.spec.ts
index a4dc5db574..5f3fae0930 100644
--- a/cypress/integration/e2e/components/tooltip.spec.ts
+++ b/cypress/integration/e2e/components/tooltip.spec.ts
@@ -1,5 +1,6 @@
 describe('Tooltip component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('tooltip');
     cy.visit('/components/tooltip');
   });
 
diff --git a/cypress/integration/e2e/components/truncate.spec.ts b/cypress/integration/e2e/components/truncate.spec.ts
index 3a92d294ec..c23781b4ab 100644
--- a/cypress/integration/e2e/components/truncate.spec.ts
+++ b/cypress/integration/e2e/components/truncate.spec.ts
@@ -1,5 +1,6 @@
 describe('Truncate component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('truncate');
     cy.visit('/components/truncate');
   });
 
diff --git a/cypress/support/parent-commands.ts b/cypress/support/parent-commands.ts
index ec5617a9e0..6bd67ffb6b 100644
--- a/cypress/support/parent-commands.ts
+++ b/cypress/support/parent-commands.ts
@@ -79,6 +79,8 @@ declare namespace Cypress {
      * - on click of header, the changelog content is visible.
      */
     checkChangelogRevealer(): void;
+
+    abortPrefetchRequests(target: string): void;
   }
 }
 
@@ -129,6 +131,28 @@ Cypress.Commands.add('checkInPageNavigationLinks', () => {
 // @TODO Check ComponentHeader <--- waiting for changes to this component to be merged.
 // Cypress.Commands.add('checkComponentHeader', () => {});
 
+Cypress.Commands.add('abortPrefetchRequests', (target) => {
+  cy.server();
+  cy.route({
+    method: 'GET',
+    url: '/**/**/page-data.json',
+    onRequest: (xhr) => {
+      if (!xhr.url.includes(target.toLowerCase())) {
+        cy.log(`[Abort XHR]: ${xhr.url}`);
+        xhr.xhr.abort();
+      }
+    },
+  }).as('pageData');
+  cy.route({
+    method: 'GET',
+    url: '/**/**/app-data.json',
+    onRequest: (xhr) => {
+      xhr.xhr.abort();
+    },
+  }).as('appData');
+  cy.route('http://api.github.com/repos/twilio-labs/paste', {}).as('githubData');
+});
+
 Cypress.Commands.add('checkPageAside', () => {
   cy.getDocsPageContentArea().getInFixedContainer('[data-cy="page-aside"]').as('pageAside');
   cy.get('@pageAside').find('[data-cy="table-of-contents"]').shouldBeVisible();
@@ -147,13 +171,9 @@ Cypress.Commands.add('checkDoDonts', () => {
 });
 
 Cypress.Commands.add('checkChangelogRevealer', () => {
-  cy.getInFixedContainer('#component-changelog')
-    .as('changelogContainer')
-    .contains('h2', 'Changelog')
-    .shouldBeVisible()
-    .click();
+  cy.getInFixedContainer('#component-changelog').contains('h2', 'Changelog').shouldBeVisible().click();
 
-  cy.get('@changelogContainer').find('[data-cy="changelog-revealer-content"]').shouldBeVisible();
+  cy.getInFixedContainer('[data-cy="changelog-revealer-content"]').shouldBeVisible();
 });
 
 Cypress.Commands.add('getInFixedContainer', (selector) => {
diff --git a/tools/utils/cypress-test-generators/TEMPLATE.js b/tools/utils/cypress-test-generators/TEMPLATE.js
index 1bd7449875..9562ec1214 100644
--- a/tools/utils/cypress-test-generators/TEMPLATE.js
+++ b/tools/utils/cypress-test-generators/TEMPLATE.js
@@ -3,6 +3,7 @@ const {upperFirst, startCase} = require('lodash');
 module.exports = function (targetName, targetType = 'component') {
   return `describe('${upperFirst(targetName)} ${targetType} documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('${targetName.toLowerCase()}');
     cy.visit('/${targetType}/${targetName.toLowerCase()}');
   });
 

From 69289227d3b84c2005632e7e765781aa68a32624 Mon Sep 17 00:00:00 2001
From: Andi Oneto <aoneto@twilio.com>
Date: Fri, 19 Nov 2021 09:55:38 -0800
Subject: [PATCH 3/9] chore(cypress): update version to latest

---
 cypress/support/child-commands.ts             |  17 +-
 cypress/support/parent-commands.ts            |  15 +-
 package.json                                  |   4 +-
 .../components/combobox/package.json          |   2 +-
 tools/build/esbuild.js                        |   6 +-
 yarn.lock                                     | 308 ++++++++++--------
 6 files changed, 182 insertions(+), 170 deletions(-)

diff --git a/cypress/support/child-commands.ts b/cypress/support/child-commands.ts
index 95f67059a8..b554ae86f7 100644
--- a/cypress/support/child-commands.ts
+++ b/cypress/support/child-commands.ts
@@ -9,15 +9,6 @@
 // eslint-disable-next-line @typescript-eslint/no-namespace
 declare namespace Cypress {
   interface Chainable<Subject> {
-    /**
-     * Asserts that element should be visible.
-     *
-     * @returns `Chainable<Subject>`
-     * @alias `should('be.visible')`
-     * @example cy.get('[data-cy="my-selector"]').shouldBeVisible();
-     */
-    shouldBeVisible(): Chainable<Subject>;
-
     /**
      * Asserts that element has correct attribute with expected value.
      *
@@ -26,14 +17,10 @@ declare namespace Cypress {
      * @alias `should('have.attr')`
      * @example cy.get('[data-cy="my-selector"]').shouldHaveAttribute('href', '#overview');
      */
-    shouldHaveAttribute(key: string, value: any): void;
+    shouldHaveAttribute(subject: Chainable<Subject>, key: string, value: any): void;
   }
 }
 
-Cypress.Commands.add('shouldBeVisible', {prevSubject: 'element'}, (subject) => {
-  cy.wrap(subject).should('be.visible');
-});
-
 Cypress.Commands.add('shouldHaveAttribute', {prevSubject: 'element'}, (subject, attribute, value) => {
-  cy.wrap(subject).should('have.attr', attribute, value);
+  return cy.wrap(subject).should('have.attr', attribute, value);
 });
diff --git a/cypress/support/parent-commands.ts b/cypress/support/parent-commands.ts
index 6bd67ffb6b..0faf50893a 100644
--- a/cypress/support/parent-commands.ts
+++ b/cypress/support/parent-commands.ts
@@ -87,7 +87,7 @@ declare namespace Cypress {
 Cypress.Commands.add('getDocsPageContentArea', () => cy.get('#paste-docs-content-area'));
 
 Cypress.Commands.add('pageHeaderShouldBeVisible', (headerText) => {
-  cy.contains('h1', headerText, {matchCase: false}).shouldBeVisible();
+  return cy.contains('h1', headerText, {matchCase: false}).should('be.visible');
 });
 
 Cypress.Commands.add('overviewTableRendersCorrectly', () => {
@@ -138,7 +138,6 @@ Cypress.Commands.add('abortPrefetchRequests', (target) => {
     url: '/**/**/page-data.json',
     onRequest: (xhr) => {
       if (!xhr.url.includes(target.toLowerCase())) {
-        cy.log(`[Abort XHR]: ${xhr.url}`);
         xhr.xhr.abort();
       }
     },
@@ -155,9 +154,9 @@ Cypress.Commands.add('abortPrefetchRequests', (target) => {
 
 Cypress.Commands.add('checkPageAside', () => {
   cy.getDocsPageContentArea().getInFixedContainer('[data-cy="page-aside"]').as('pageAside');
-  cy.get('@pageAside').find('[data-cy="table-of-contents"]').shouldBeVisible();
-  cy.get('@pageAside').contains('button', 'Rate this page').shouldBeVisible();
-  cy.get('@pageAside').find('[data-cy="page-aside-anchor"]').shouldBeVisible();
+  cy.get('@pageAside').find('[data-cy="table-of-contents"]').should('be.visible');
+  cy.get('@pageAside').contains('button', 'Rate this page').should('be.visible');
+  cy.get('@pageAside').find('[data-cy="page-aside-anchor"]').should('be.visible');
 });
 
 Cypress.Commands.add('checkLivePreviews', () => {
@@ -171,9 +170,9 @@ Cypress.Commands.add('checkDoDonts', () => {
 });
 
 Cypress.Commands.add('checkChangelogRevealer', () => {
-  cy.getInFixedContainer('#component-changelog').contains('h2', 'Changelog').shouldBeVisible().click();
+  cy.getInFixedContainer('#component-changelog').contains('h2', 'Changelog').should('be.visible').click();
 
-  cy.getInFixedContainer('[data-cy="changelog-revealer-content"]').shouldBeVisible();
+  cy.getInFixedContainer('[data-cy="changelog-revealer-content"]').should('be.visible');
 });
 
 Cypress.Commands.add('getInFixedContainer', (selector) => {
@@ -183,6 +182,6 @@ Cypress.Commands.add('getInFixedContainer', (selector) => {
     .get('@target')
     .invoke('innerHeight')
     .then((height) => {
-      return cy.get('@target').scrollIntoView({offset: {top: (height as number) / 2, left: 0}});
+      cy.get('@target').scrollIntoView({offset: {top: (height as number) / 2, left: 0}});
     });
 });
diff --git a/package.json b/package.json
index 1aab0add73..ec1530ac62 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "test:tools": "jest ./tools/ -c ./tools/jest.config.js",
     "test:tools-16": "USE_REACT_16=true jest ./tools/ -c ./tools/jest.config.js",
     "test:coverage": "yarn pre-test && jest --coverage",
-    "test:website": "start-server-and-test 'yarn serve:website' http://localhost:9000 'yarn cypress run --record --spec ./cypress/integration/**/**/*.spec.ts'",
+    "test:website": "start-server-and-test 'yarn serve:website' http://localhost:9000 'yarn cypress run --record --parallel --spec \"./cypress/integration/**/**/*.spec.ts\"'",
     "test:website-gui": "start-server-and-test 'yarn serve:website' http://localhost:9000  'yarn cypress open'",
     "serve:website": "yarn workspace @twilio-paste/website serve",
     "package-size-action-build": "yarn build",
@@ -155,7 +155,7 @@
     "concurrently": "^4.1.1",
     "cross-env": "^5.2.0",
     "csstype": "^2.6.10",
-    "cypress": "^5.3.0",
+    "cypress": "^9.0.0",
     "danger": "^10.6.6",
     "del": "^5.1.0",
     "directory-named-webpack-plugin": "^4.0.1",
diff --git a/packages/paste-core/components/combobox/package.json b/packages/paste-core/components/combobox/package.json
index ef8421b3ca..c22fb518b5 100644
--- a/packages/paste-core/components/combobox/package.json
+++ b/packages/paste-core/components/combobox/package.json
@@ -22,7 +22,7 @@
     "build:js": "NODE_ENV=development node build.js",
     "build:props": "typedoc --tsconfig ./tsconfig.json --json ./dist/prop-types.json",
     "clean": "rm -rf ./dist",
-    "tsc": "tsc"
+    "check": "tsc"
   },
   "dependencies": {
     "lodash.groupby": "^4.6.0",
diff --git a/tools/build/esbuild.js b/tools/build/esbuild.js
index 81afd670b2..da3960cb4c 100644
--- a/tools/build/esbuild.js
+++ b/tools/build/esbuild.js
@@ -81,10 +81,14 @@ function build(packageJson) {
       minify: true,
       format: 'cjs',
       outfile: outFileCJS,
+      // outdir: 'dist',
       // Needed to fix ES6 module import paths for CJS builds
       plugins: [PasteCJSResolverPlugin],
     })
-    .catch(() => process.exit(1));
+    .catch((error) => {
+      console.log(error);
+      process.exit(1);
+    });
 
   esbuild
     .build({
diff --git a/yarn.lock b/yarn.lock
index 8a49c7424c..7a997fcf4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5772,21 +5772,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cypress/listr-verbose-renderer@npm:^0.4.1":
-  version: 0.4.1
-  resolution: "@cypress/listr-verbose-renderer@npm:0.4.1"
-  dependencies:
-    chalk: ^1.1.3
-    cli-cursor: ^1.0.2
-    date-fns: ^1.27.2
-    figures: ^1.7.0
-  checksum: 0169c2b30fd4623a7b2ff8354fe72583fbecc774f36321cd45bb84fb30859426093cb298f95ab71cae707792dc04fe2fa77cd57e66cfbdba9c8006b6b888c4a3
-  languageName: node
-  linkType: hard
-
-"@cypress/request@npm:^2.88.5":
-  version: 2.88.5
-  resolution: "@cypress/request@npm:2.88.5"
+"@cypress/request@npm:^2.88.7":
+  version: 2.88.7
+  resolution: "@cypress/request@npm:2.88.7"
   dependencies:
     aws-sign2: ~0.7.0
     aws4: ^1.8.0
@@ -5801,14 +5789,13 @@ __metadata:
     isstream: ~0.1.2
     json-stringify-safe: ~5.0.1
     mime-types: ~2.1.19
-    oauth-sign: ~0.9.0
     performance-now: ^2.1.0
     qs: ~6.5.2
     safe-buffer: ^5.1.2
     tough-cookie: ~2.5.0
     tunnel-agent: ^0.6.0
-    uuid: ^3.3.2
-  checksum: a605f8a623f4665402768f4d7730315a420967d41c44194eeb2a946ce0b74ce3eb8205a73b0cab879fcf65870dbb1189ac60ea67d163c7acd64228e39e65611a
+    uuid: ^8.3.2
+  checksum: 21544e555afd0841a8a189d4a4af7695c918bc782db3c636f56cadfed9ea1620c2ef43d94a709de984660c4fe9407dd8446f9f65fbe56f4eafa26a0c05792a64
   languageName: node
   linkType: hard
 
@@ -14133,6 +14120,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^14.14.31":
+  version: 14.17.34
+  resolution: "@types/node@npm:14.17.34"
+  checksum: 803a7532b6998aca6aa1b3e6239f280e82612d4f641d38fbf08962c905ea9d1b278b2f09d396beac5120a4e68f33d7467298b197f2f00150ec1dcd546de02a89
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^8.5.7":
   version: 8.10.60
   resolution: "@types/node@npm:8.10.60"
@@ -14454,10 +14448,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/sinonjs__fake-timers@npm:^6.0.1":
-  version: 6.0.2
-  resolution: "@types/sinonjs__fake-timers@npm:6.0.2"
-  checksum: fe62eec9cffa05aa159a036f671c8ba4117c6abe186d574c92e573117075825a756c56a4fe955bd874b77f6054fa25c1420eb22619312c43412f75f3d95f885f
+"@types/sinonjs__fake-timers@npm:^6.0.2":
+  version: 6.0.4
+  resolution: "@types/sinonjs__fake-timers@npm:6.0.4"
+  checksum: 200cb24235409964269465e8a94ad735ec8bab98f3b2405cd6351fa6f6399be268cbbd4e824c9d361d9431ae11070cff4c3b6400b18aff03cb7933985853c0c9
   languageName: node
   linkType: hard
 
@@ -16454,10 +16448,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arch@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "arch@npm:2.1.2"
-  checksum: cf750b4720970a704c8328ff013164bbcb00d06bf18239caeaebccc9ad36a82dcde287d9274e958d21276441272c50ec12f232b58f1dd216669b60279d08a44b
+"arch@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "arch@npm:2.2.0"
+  checksum: e21b7635029fe8e9cdd5a026f9a6c659103e63fff423834323cdf836a1bb240a72d0c39ca8c470f84643385cf581bd8eda2cad8bf493e27e54bd9783abe9101f
   languageName: node
   linkType: hard
 
@@ -18130,7 +18124,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"blob-util@npm:2.0.2":
+"blob-util@npm:^2.0.2":
   version: 2.0.2
   resolution: "blob-util@npm:2.0.2"
   checksum: d543e6b92e4ca715ca33c78e89a07a2290d43e5b2bc897d7ec588c5c7bbf59df93e45225ac0c9258aa6ce4320358990f99c9288f1c48280f8ec5d7a2e088d19b
@@ -19616,7 +19610,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ci-info@npm:^3.0.0":
+"ci-info@npm:^3.0.0, ci-info@npm:^3.2.0":
   version: 3.2.0
   resolution: "ci-info@npm:3.2.0"
   checksum: c68995a94e95ce3f233ff845e62dfc56f2e8ff1e3f5c1361bcdd520cbbc9726d8a54cbc1a685cb9ee19c3c5e71a1dade6dda23eb364b59b8e6c32508a9b761bc
@@ -19725,15 +19719,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cli-cursor@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "cli-cursor@npm:1.0.2"
-  dependencies:
-    restore-cursor: ^1.0.1
-  checksum: e3b4400d5e925ed11c7596f82e80e170693f69ac6f0f21da2a400043c37548dd780f985a1a5ef1ffb038e36fc6711d1d4f066b104eed851ae76e34bd883cf2bf
-  languageName: node
-  linkType: hard
-
 "cli-cursor@npm:^2.0.0, cli-cursor@npm:^2.1.0":
   version: 2.1.0
   resolution: "cli-cursor@npm:2.1.0"
@@ -20039,7 +20024,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clone@npm:^2.1.1":
+"clone@npm:^2.1.1, clone@npm:^2.1.2":
   version: 2.1.2
   resolution: "clone@npm:2.1.2"
   checksum: aaf106e9bc025b21333e2f4c12da539b568db4925c0501a1bf4070836c9e848c892fa22c35548ce0d1132b08bbbfa17a00144fe58fccdab6fa900fec4250f67d
@@ -20241,6 +20226,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"colorette@npm:^2.0.16":
+  version: 2.0.16
+  resolution: "colorette@npm:2.0.16"
+  checksum: cd55596a3a2d1071c1a28eee7fd8a5387593ff1bd10a3e8d0a6221499311fe34a9f2b9272d77c391e0e003dcdc8934fb2f8d106e7ef1f7516f8060c901d41a27
+  languageName: node
+  linkType: hard
+
 "colors@npm:^1.1.2, colors@npm:^1.2.1, colors@npm:^1.4.0":
   version: 1.4.0
   resolution: "colors@npm:1.4.0"
@@ -20488,7 +20480,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"concat-stream@npm:^1.5.0, concat-stream@npm:^1.6.0, concat-stream@npm:^1.6.2":
+"concat-stream@npm:^1.5.0, concat-stream@npm:^1.6.0":
   version: 1.6.2
   resolution: "concat-stream@npm:1.6.2"
   dependencies:
@@ -21896,51 +21888,54 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cypress@npm:^5.3.0":
-  version: 5.3.0
-  resolution: "cypress@npm:5.3.0"
+"cypress@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "cypress@npm:9.0.0"
   dependencies:
-    "@cypress/listr-verbose-renderer": ^0.4.1
-    "@cypress/request": ^2.88.5
+    "@cypress/request": ^2.88.7
     "@cypress/xvfb": ^1.2.4
-    "@types/sinonjs__fake-timers": ^6.0.1
+    "@types/node": ^14.14.31
+    "@types/sinonjs__fake-timers": ^6.0.2
     "@types/sizzle": ^2.3.2
-    arch: ^2.1.2
-    blob-util: 2.0.2
+    arch: ^2.2.0
+    blob-util: ^2.0.2
     bluebird: ^3.7.2
     cachedir: ^2.3.0
     chalk: ^4.1.0
     check-more-types: ^2.24.0
+    cli-cursor: ^3.1.0
     cli-table3: ~0.6.0
-    commander: ^4.1.1
+    commander: ^5.1.0
     common-tags: ^1.8.0
-    debug: ^4.1.1
-    eventemitter2: ^6.4.2
-    execa: ^4.0.2
+    dayjs: ^1.10.4
+    debug: ^4.3.2
+    enquirer: ^2.3.6
+    eventemitter2: ^6.4.3
+    execa: 4.1.0
     executable: ^4.1.1
-    extract-zip: ^1.7.0
-    fs-extra: ^9.0.1
+    extract-zip: 2.0.1
+    figures: ^3.2.0
+    fs-extra: ^9.1.0
     getos: ^3.2.1
-    is-ci: ^2.0.0
-    is-installed-globally: ^0.3.2
+    is-ci: ^3.0.0
+    is-installed-globally: ~0.4.0
     lazy-ass: ^1.6.0
-    listr: ^0.14.3
-    lodash: ^4.17.19
+    listr2: ^3.8.3
+    lodash: ^4.17.21
     log-symbols: ^4.0.0
     minimist: ^1.2.5
-    moment: ^2.27.0
     ospath: ^1.2.2
-    pretty-bytes: ^5.3.0
-    ramda: ~0.26.1
+    pretty-bytes: ^5.6.0
+    proxy-from-env: 1.0.0
     request-progress: ^3.0.0
-    supports-color: ^7.1.0
+    supports-color: ^8.1.1
     tmp: ~0.2.1
     untildify: ^4.0.0
     url: ^0.11.0
     yauzl: ^2.10.0
   bin:
     cypress: bin/cypress
-  checksum: 1f51ed2959e11254684a6d6830088d4cfba193d6f68536a3a666e2c8e79a0b5b38d0aae1c607fae1c0832a5710c3a03e55d7714eb93ca900dfb232068aeea3d2
+  checksum: ae481f26f6a51370bad6571b7edd525559c0b4e36fb9c33ac26c822610bd2f0b419614f12c1d87aff59c46afb3c2f06f7e167f924023da65fe2a3987927255c8
   languageName: node
   linkType: hard
 
@@ -22134,6 +22129,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dayjs@npm:^1.10.4":
+  version: 1.10.7
+  resolution: "dayjs@npm:1.10.7"
+  checksum: a0a4ca95abaa03d0702161dc2c35d16121188e342f5052b9c61cdf784dab68af766f477c04f87f71c6af666fd4d13db9b9853b87265850d6093b7b04e1bb1cd7
+  languageName: node
+  linkType: hard
+
 "debug@npm:2, debug@npm:2.6.9, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.6.0, debug@npm:^2.6.6, debug@npm:^2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -22185,7 +22187,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:^4.0.0":
+"debug@npm:^4.0.0, debug@npm:^4.3.2":
   version: 4.3.2
   resolution: "debug@npm:4.3.2"
   dependencies:
@@ -23884,7 +23886,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enquirer@npm:^2.3.0, enquirer@npm:^2.3.5":
+"enquirer@npm:^2.3.0, enquirer@npm:^2.3.5, enquirer@npm:^2.3.6":
   version: 2.3.6
   resolution: "enquirer@npm:2.3.6"
   dependencies:
@@ -25181,10 +25183,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eventemitter2@npm:^6.4.2":
-  version: 6.4.3
-  resolution: "eventemitter2@npm:6.4.3"
-  checksum: e6926b3e2929cff7c877aba1f651cdc68b0fcc9c93a21d884132d9c0d3138a0bfaea379a897b4a3627e9100bf60e42d242144fa3f43f304ef6a14edf2f6ff00e
+"eventemitter2@npm:^6.4.3":
+  version: 6.4.5
+  resolution: "eventemitter2@npm:6.4.5"
+  checksum: 84504f9cf0cc30205cdd46783fe9df3733435e5097f13070b678023110b5ef07847651808ae280cd94c42cd5976880211c7a40321a8ff8fa56f7c5f9c5c11960
   languageName: node
   linkType: hard
 
@@ -25290,6 +25292,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"execa@npm:4.1.0":
+  version: 4.1.0
+  resolution: "execa@npm:4.1.0"
+  dependencies:
+    cross-spawn: ^7.0.0
+    get-stream: ^5.0.0
+    human-signals: ^1.1.1
+    is-stream: ^2.0.0
+    merge-stream: ^2.0.0
+    npm-run-path: ^4.0.0
+    onetime: ^5.1.0
+    signal-exit: ^3.0.2
+    strip-final-newline: ^2.0.0
+  checksum: e30d298934d9c52f90f3847704fd8224e849a081ab2b517bbc02f5f7732c24e56a21f14cb96a08256deffeb2d12b2b7cb7e2b014a12fb36f8d3357e06417ed55
+  languageName: node
+  linkType: hard
+
 "execa@npm:^0.10.0":
   version: 0.10.0
   resolution: "execa@npm:0.10.0"
@@ -25448,13 +25467,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"exit-hook@npm:^1.0.0":
-  version: 1.1.1
-  resolution: "exit-hook@npm:1.1.1"
-  checksum: 1b4f16da7c202cd336ca07acb052922639182b4e2f1ad4007ed481bb774ce93469f505dec1371d9cd580ac54146a9fd260f053b0e4a48fa87c49fa3dc4a3f144
-  languageName: node
-  linkType: hard
-
 "exit-on-epipe@npm:~1.0.1":
   version: 1.0.1
   resolution: "exit-on-epipe@npm:1.0.1"
@@ -25705,20 +25717,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extract-zip@npm:^1.7.0":
-  version: 1.7.0
-  resolution: "extract-zip@npm:1.7.0"
-  dependencies:
-    concat-stream: ^1.6.2
-    debug: ^2.6.9
-    mkdirp: ^0.5.4
-    yauzl: ^2.10.0
-  bin:
-    extract-zip: cli.js
-  checksum: 011bab660d738614555773d381a6ba4815d98c1cfcdcdf027e154ebcc9fc8c9ef637b3ea5c9b2144013100071ee41722ed041fc9aacc60f6198ef747cac0c073
-  languageName: node
-  linkType: hard
-
 "extsprintf@npm:1.3.0":
   version: 1.3.0
   resolution: "extsprintf@npm:1.3.0"
@@ -28253,15 +28251,6 @@ fsevents@~2.3.1:
   languageName: node
   linkType: hard
 
-"global-dirs@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "global-dirs@npm:2.0.1"
-  dependencies:
-    ini: ^1.3.5
-  checksum: 1a5d17fee3f95482bd2aae444ac7ce2fb58cafc3c8e5b2ab7f07c0e67f7acef4b1a974da3e26b54f238ce6b64e68a2e0a1ce8c09693fd48a4f70e4057089a374
-  languageName: node
-  linkType: hard
-
 "global-dirs@npm:^3.0.0":
   version: 3.0.0
   resolution: "global-dirs@npm:3.0.0"
@@ -31077,6 +31066,17 @@ fsevents@~2.3.1:
   languageName: node
   linkType: hard
 
+"is-ci@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "is-ci@npm:3.0.1"
+  dependencies:
+    ci-info: ^3.2.0
+  bin:
+    is-ci: bin.js
+  checksum: 192c66dc7826d58f803ecae624860dccf1899fc1f3ac5505284c0a5cf5f889046ffeb958fa651e5725d5705c5bcb14f055b79150ea5fcad7456a9569de60260e
+  languageName: node
+  linkType: hard
+
 "is-color-stop@npm:^1.0.0":
   version: 1.1.0
   resolution: "is-color-stop@npm:1.1.0"
@@ -31350,17 +31350,7 @@ is-empty@latest:
   languageName: node
   linkType: hard
 
-"is-installed-globally@npm:^0.3.2":
-  version: 0.3.2
-  resolution: "is-installed-globally@npm:0.3.2"
-  dependencies:
-    global-dirs: ^2.0.1
-    is-path-inside: ^3.0.1
-  checksum: 7f7489ae3026cc3b9f61426108d5911c864ac545bc90ef46e2eda4461c34a1f287a64f765895893398f0769235c59e63f25283c939c661bfe9be5250b1ed99cb
-  languageName: node
-  linkType: hard
-
-"is-installed-globally@npm:^0.4.0":
+"is-installed-globally@npm:^0.4.0, is-installed-globally@npm:~0.4.0":
   version: 0.4.0
   resolution: "is-installed-globally@npm:0.4.0"
   dependencies:
@@ -33746,6 +33736,27 @@ is-whitespace@latest:
   languageName: node
   linkType: hard
 
+"listr2@npm:^3.8.3":
+  version: 3.13.4
+  resolution: "listr2@npm:3.13.4"
+  dependencies:
+    cli-truncate: ^2.1.0
+    clone: ^2.1.2
+    colorette: ^2.0.16
+    log-update: ^4.0.0
+    p-map: ^4.0.0
+    rxjs: ^7.4.0
+    through: ^2.3.8
+    wrap-ansi: ^7.0.0
+  peerDependencies:
+    enquirer: ">= 2.3.0 < 3"
+  peerDependenciesMeta:
+    enquirer:
+      optional: true
+  checksum: 67801b3373fba1e225c6003a4cdf487646a9ef936b08774028264b02092c4eab7ecebc8438a93b63776b81f7a7e642216da50c92cfd8e0c5bb5ea4c4e6559132
+  languageName: node
+  linkType: hard
+
 "listr@npm:0.14.3, listr@npm:^0.14.3":
   version: 0.14.3
   resolution: "listr@npm:0.14.3"
@@ -34492,6 +34503,18 @@ is-whitespace@latest:
   languageName: node
   linkType: hard
 
+"log-update@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "log-update@npm:4.0.0"
+  dependencies:
+    ansi-escapes: ^4.3.0
+    cli-cursor: ^3.1.0
+    slice-ansi: ^4.0.0
+    wrap-ansi: ^6.2.0
+  checksum: ae2f85bbabc1906034154fb7d4c4477c79b3e703d22d78adee8b3862fa913942772e7fa11713e3d96fb46de4e3cabefbf5d0a544344f03b58d3c4bff52aa9eb2
+  languageName: node
+  linkType: hard
+
 "log-utils@npm:^0.2.1":
   version: 0.2.1
   resolution: "log-utils@npm:0.2.1"
@@ -35840,7 +35863,7 @@ is-whitespace@latest:
   languageName: node
   linkType: hard
 
-"mkdirp@npm:^0.5.0, mkdirp@npm:^0.5.1, mkdirp@npm:^0.5.3, mkdirp@npm:^0.5.4, mkdirp@npm:^0.5.5, mkdirp@npm:~0.5.1":
+"mkdirp@npm:^0.5.0, mkdirp@npm:^0.5.1, mkdirp@npm:^0.5.3, mkdirp@npm:^0.5.5, mkdirp@npm:~0.5.1":
   version: 0.5.5
   resolution: "mkdirp@npm:0.5.5"
   dependencies:
@@ -35896,13 +35919,6 @@ is-whitespace@latest:
   languageName: node
   linkType: hard
 
-"moment@npm:^2.27.0":
-  version: 2.29.1
-  resolution: "moment@npm:2.29.1"
-  checksum: 1e14d5f422a2687996be11dd2d50c8de3bd577c4a4ca79ba5d02c397242a933e5b941655de6c8cb90ac18f01cc4127e55b4a12ae3c527a6c0a274e455979345e
-  languageName: node
-  linkType: hard
-
 "moo@npm:^0.5.0":
   version: 0.5.1
   resolution: "moo@npm:0.5.1"
@@ -37605,13 +37621,6 @@ is-whitespace@latest:
   languageName: node
   linkType: hard
 
-"onetime@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "onetime@npm:1.1.0"
-  checksum: 4e9ab082cad172bd69c5f86630f55132c78e89e62b6e7abc5b4df922c3a5a397eeb88ad4810c8493a40a6ea5e54c146810ea8553db609903db3643985b301f67
-  languageName: node
-  linkType: hard
-
 "onetime@npm:^2.0.0":
   version: 2.0.1
   resolution: "onetime@npm:2.0.1"
@@ -38784,7 +38793,7 @@ is-whitespace@latest:
     concurrently: ^4.1.1
     cross-env: ^5.2.0
     csstype: ^2.6.10
-    cypress: ^5.3.0
+    cypress: ^9.0.0
     danger: ^10.6.6
     del: ^5.1.0
     directory-named-webpack-plugin: ^4.0.1
@@ -40480,6 +40489,13 @@ is-whitespace@latest:
   languageName: node
   linkType: hard
 
+"pretty-bytes@npm:^5.6.0":
+  version: 5.6.0
+  resolution: "pretty-bytes@npm:5.6.0"
+  checksum: 9c082500d1e93434b5b291bd651662936b8bd6204ec9fa17d563116a192d6d86b98f6d328526b4e8d783c07d5499e2614a807520249692da9ec81564b2f439cd
+  languageName: node
+  linkType: hard
+
 "pretty-error@npm:^2.1.1":
   version: 2.1.1
   resolution: "pretty-error@npm:2.1.1"
@@ -40840,6 +40856,13 @@ is-whitespace@latest:
   languageName: node
   linkType: hard
 
+"proxy-from-env@npm:1.0.0":
+  version: 1.0.0
+  resolution: "proxy-from-env@npm:1.0.0"
+  checksum: 292e28d1de0c315958d71d8315eb546dd3cd8c8cbc2dab7c54eeb9f5c17f421771964ad0b5e1f77011bab2305bdae42e1757ce33bdb1ccc3e87732322a8efcf1
+  languageName: node
+  linkType: hard
+
 "proxy-from-env@npm:1.1.0":
   version: 1.1.0
   resolution: "proxy-from-env@npm:1.1.0"
@@ -41143,13 +41166,6 @@ is-whitespace@latest:
   languageName: node
   linkType: hard
 
-"ramda@npm:~0.26.1":
-  version: 0.26.1
-  resolution: "ramda@npm:0.26.1"
-  checksum: 19c2730e44c129538151ae034c89be9b2c6a4ccc7c65cff57497418bc532ce09282f98cd927c39b0b03c6bc3f1d1a12d822b7b07f96a1634f4958a6c05b7b384
-  languageName: node
-  linkType: hard
-
 "randexp@npm:0.4.6":
   version: 0.4.6
   resolution: "randexp@npm:0.4.6"
@@ -43418,16 +43434,6 @@ resolve@^1.17.0:
   languageName: node
   linkType: hard
 
-"restore-cursor@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "restore-cursor@npm:1.0.1"
-  dependencies:
-    exit-hook: ^1.0.0
-    onetime: ^1.0.0
-  checksum: e40bd1a540d69970341fc734dfada908815a44f91903211f34d32c47da33f6e7824bbc97f6e76aff387137d6b2a1ada3d3d2dc1b654b8accdc8ed5721c46cbfa
-  languageName: node
-  linkType: hard
-
 "restore-cursor@npm:^2.0.0":
   version: 2.0.0
   resolution: "restore-cursor@npm:2.0.0"
@@ -43775,6 +43781,15 @@ resolve@^1.17.0:
   languageName: node
   linkType: hard
 
+"rxjs@npm:^7.4.0":
+  version: 7.4.0
+  resolution: "rxjs@npm:7.4.0"
+  dependencies:
+    tslib: ~2.1.0
+  checksum: 6b33172a760dcad6882fdc836ee8cf1ebe160dd7eaad95c45a12338ffdaa96eb41e48e6c25bbd3d1fdf45075949ff447954bc17a9d01c688558a67967d09c114
+  languageName: node
+  linkType: hard
+
 "safe-buffer@npm:5.1.1":
   version: 5.1.1
   resolution: "safe-buffer@npm:5.1.1"
@@ -46388,7 +46403,7 @@ resolve@^1.17.0:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^8.0.0, supports-color@npm:^8.1.0":
+"supports-color@npm:^8.0.0, supports-color@npm:^8.1.0, supports-color@npm:^8.1.1":
   version: 8.1.1
   resolution: "supports-color@npm:8.1.1"
   dependencies:
@@ -47687,6 +47702,13 @@ resolve@^1.17.0:
   languageName: node
   linkType: hard
 
+"tslib@npm:~2.1.0":
+  version: 2.1.0
+  resolution: "tslib@npm:2.1.0"
+  checksum: aa189c8179de0427b0906da30926fd53c59d96ec239dff87d6e6bc831f608df0cbd6f77c61dabc074408bd0aa0b9ae4ec35cb2c15f729e32f37274db5730cb78
+  languageName: node
+  linkType: hard
+
 "tsutils@npm:^3.17.1":
   version: 3.17.1
   resolution: "tsutils@npm:3.17.1"

From 7ce6f13c63c80703a038483f89a0c17506ef26b1 Mon Sep 17 00:00:00 2001
From: Andi Oneto <aoneto@twilio.com>
Date: Mon, 22 Nov 2021 08:27:38 -0800
Subject: [PATCH 4/9] chore(cypress): pin cypress at 8.4.0

---
 .../sidebar-navigation/index.spec.ts          | 37 ++++++++++---------
 cypress/support/child-commands.ts             |  2 +-
 package.json                                  |  2 +-
 .../components/combobox/package.json          |  2 +-
 tools/build/esbuild.js                        |  7 +---
 yarn.lock                                     | 30 +++++++--------
 6 files changed, 39 insertions(+), 41 deletions(-)

diff --git a/cypress/integration/sidebar-navigation/index.spec.ts b/cypress/integration/sidebar-navigation/index.spec.ts
index 85cd32fbad..e0a9c57a65 100644
--- a/cypress/integration/sidebar-navigation/index.spec.ts
+++ b/cypress/integration/sidebar-navigation/index.spec.ts
@@ -1,30 +1,31 @@
 describe('Sidebar navigation', () => {
-  it('opens the sidebar disclosures', () => {
+  beforeEach(() => {
     cy.visit('/');
-    cy.wait(2500);
+  });
 
-    cy.get('[data-cy=getting-started-button]').click({force: true}).should('have.attr', 'aria-expanded', 'true');
-    cy.get('[data-cy=getting-started-list]').should('be.visible');
+  it('opens the sidebar disclosures', () => {
+    cy.getInFixedContainer('[data-cy="getting-started-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.getInFixedContainer('[data-cy="getting-started-list"]').should('be.visible');
 
-    cy.get('[data-cy=design-tokens-button]').click({force: true}).should('have.attr', 'aria-expanded', 'true');
-    cy.get('[data-cy=design-tokens-list]').should('be.visible');
+    cy.getInFixedContainer('[data-cy="design-tokens-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.getInFixedContainer('[data-cy="design-tokens-list"]').should('be.visible');
 
-    cy.get('[data-cy=components-button]').click({force: true}).should('have.attr', 'aria-expanded', 'true');
-    cy.get('[data-cy=components-list]').should('be.visible');
+    cy.getInFixedContainer('[data-cy="components-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.getInFixedContainer('[data-cy="components-list"]').should('be.visible');
 
-    cy.get('[data-cy=primitives-button]').click({force: true}).should('have.attr', 'aria-expanded', 'true');
-    cy.get('[data-cy=primitives-list]').should('be.visible');
+    cy.getInFixedContainer('[data-cy="primitives-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.getInFixedContainer('[data-cy="primitives-list"]').should('be.visible');
 
-    cy.get('[data-cy=layout-button]').click({force: true}).should('have.attr', 'aria-expanded', 'true');
-    cy.get('[data-cy=layout-list]').should('be.visible');
+    cy.getInFixedContainer('[data-cy="layout-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.getInFixedContainer('[data-cy="layout-list"]').should('be.visible');
 
-    cy.get('[data-cy=icons-button]').click({force: true}).should('have.attr', 'aria-expanded', 'true');
-    cy.get('[data-cy=icons-list]').should('be.visible');
+    cy.getInFixedContainer('[data-cy="icons-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.getInFixedContainer('[data-cy="icons-list"]').should('be.visible');
 
-    cy.get('[data-cy=content-button]').click({force: true}).should('have.attr', 'aria-expanded', 'true');
-    cy.get('[data-cy=content-list]').should('be.visible');
+    cy.getInFixedContainer('[data-cy="content-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.getInFixedContainer('[data-cy="content-list"]').should('be.visible');
 
-    cy.get('[data-cy=patterns-button]').click({force: true}).should('have.attr', 'aria-expanded', 'true');
-    cy.get('[data-cy=patterns-list]').should('be.visible');
+    cy.getInFixedContainer('[data-cy="patterns-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.getInFixedContainer('[data-cy="patterns-list"]').should('be.visible');
   });
 });
diff --git a/cypress/support/child-commands.ts b/cypress/support/child-commands.ts
index b554ae86f7..0c9be0bad5 100644
--- a/cypress/support/child-commands.ts
+++ b/cypress/support/child-commands.ts
@@ -17,7 +17,7 @@ declare namespace Cypress {
      * @alias `should('have.attr')`
      * @example cy.get('[data-cy="my-selector"]').shouldHaveAttribute('href', '#overview');
      */
-    shouldHaveAttribute(subject: Chainable<Subject>, key: string, value: any): void;
+    shouldHaveAttribute(key: string, value: any): void;
   }
 }
 
diff --git a/package.json b/package.json
index ec1530ac62..fe26ecdb65 100644
--- a/package.json
+++ b/package.json
@@ -155,7 +155,7 @@
     "concurrently": "^4.1.1",
     "cross-env": "^5.2.0",
     "csstype": "^2.6.10",
-    "cypress": "^9.0.0",
+    "cypress": "8.4.0",
     "danger": "^10.6.6",
     "del": "^5.1.0",
     "directory-named-webpack-plugin": "^4.0.1",
diff --git a/packages/paste-core/components/combobox/package.json b/packages/paste-core/components/combobox/package.json
index c22fb518b5..ef8421b3ca 100644
--- a/packages/paste-core/components/combobox/package.json
+++ b/packages/paste-core/components/combobox/package.json
@@ -22,7 +22,7 @@
     "build:js": "NODE_ENV=development node build.js",
     "build:props": "typedoc --tsconfig ./tsconfig.json --json ./dist/prop-types.json",
     "clean": "rm -rf ./dist",
-    "check": "tsc"
+    "tsc": "tsc"
   },
   "dependencies": {
     "lodash.groupby": "^4.6.0",
diff --git a/tools/build/esbuild.js b/tools/build/esbuild.js
index da3960cb4c..27858b0e10 100644
--- a/tools/build/esbuild.js
+++ b/tools/build/esbuild.js
@@ -81,14 +81,11 @@ function build(packageJson) {
       minify: true,
       format: 'cjs',
       outfile: outFileCJS,
-      // outdir: 'dist',
+
       // Needed to fix ES6 module import paths for CJS builds
       plugins: [PasteCJSResolverPlugin],
     })
-    .catch((error) => {
-      console.log(error);
-      process.exit(1);
-    });
+    .catch(() => process.exit(1));
 
   esbuild
     .build({
diff --git a/yarn.lock b/yarn.lock
index 7a997fcf4a..d5c5d2400c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5772,7 +5772,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cypress/request@npm:^2.88.7":
+"@cypress/request@npm:^2.88.6":
   version: 2.88.7
   resolution: "@cypress/request@npm:2.88.7"
   dependencies:
@@ -21888,11 +21888,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cypress@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "cypress@npm:9.0.0"
+"cypress@npm:8.4.0":
+  version: 8.4.0
+  resolution: "cypress@npm:8.4.0"
   dependencies:
-    "@cypress/request": ^2.88.7
+    "@cypress/request": ^2.88.6
     "@cypress/xvfb": ^1.2.4
     "@types/node": ^14.14.31
     "@types/sinonjs__fake-timers": ^6.0.2
@@ -21926,7 +21926,7 @@ __metadata:
     minimist: ^1.2.5
     ospath: ^1.2.2
     pretty-bytes: ^5.6.0
-    proxy-from-env: 1.0.0
+    ramda: ~0.27.1
     request-progress: ^3.0.0
     supports-color: ^8.1.1
     tmp: ~0.2.1
@@ -21935,7 +21935,7 @@ __metadata:
     yauzl: ^2.10.0
   bin:
     cypress: bin/cypress
-  checksum: ae481f26f6a51370bad6571b7edd525559c0b4e36fb9c33ac26c822610bd2f0b419614f12c1d87aff59c46afb3c2f06f7e167f924023da65fe2a3987927255c8
+  checksum: 744913389efde81d5c336952069acadf215b48eb628d380bdd9d3bc1c2a1c1804e3fc710e094911d4ba6f700dde0469b5d4ccbd0fe13bd525f4a1507836d4a48
   languageName: node
   linkType: hard
 
@@ -38793,7 +38793,7 @@ is-whitespace@latest:
     concurrently: ^4.1.1
     cross-env: ^5.2.0
     csstype: ^2.6.10
-    cypress: ^9.0.0
+    cypress: 8.4.0
     danger: ^10.6.6
     del: ^5.1.0
     directory-named-webpack-plugin: ^4.0.1
@@ -40856,13 +40856,6 @@ is-whitespace@latest:
   languageName: node
   linkType: hard
 
-"proxy-from-env@npm:1.0.0":
-  version: 1.0.0
-  resolution: "proxy-from-env@npm:1.0.0"
-  checksum: 292e28d1de0c315958d71d8315eb546dd3cd8c8cbc2dab7c54eeb9f5c17f421771964ad0b5e1f77011bab2305bdae42e1757ce33bdb1ccc3e87732322a8efcf1
-  languageName: node
-  linkType: hard
-
 "proxy-from-env@npm:1.1.0":
   version: 1.1.0
   resolution: "proxy-from-env@npm:1.1.0"
@@ -41166,6 +41159,13 @@ is-whitespace@latest:
   languageName: node
   linkType: hard
 
+"ramda@npm:~0.27.1":
+  version: 0.27.1
+  resolution: "ramda@npm:0.27.1"
+  checksum: 31a0c0ef739b2525d7615f84cbb5d3cb89ee0c795469b711f729ea1d8df0dccc3cd75d3717a1e9742d42315ce86435680b7c87743eb7618111c60c144a5b8059
+  languageName: node
+  linkType: hard
+
 "randexp@npm:0.4.6":
   version: 0.4.6
   resolution: "randexp@npm:0.4.6"

From f9b957833d1e8fc0747eab1926f48b705f94c00c Mon Sep 17 00:00:00 2001
From: Andi Oneto <aoneto@twilio.com>
Date: Mon, 22 Nov 2021 11:13:57 -0800
Subject: [PATCH 5/9] chore(cypress): update navigationt test flakiness

---
 .../integration/sidebar-navigation/index.spec.ts | 16 ++++++++--------
 cypress/support/child-commands.ts                |  2 +-
 cypress/support/parent-commands.ts               |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/cypress/integration/sidebar-navigation/index.spec.ts b/cypress/integration/sidebar-navigation/index.spec.ts
index e0a9c57a65..307f344c8a 100644
--- a/cypress/integration/sidebar-navigation/index.spec.ts
+++ b/cypress/integration/sidebar-navigation/index.spec.ts
@@ -4,28 +4,28 @@ describe('Sidebar navigation', () => {
   });
 
   it('opens the sidebar disclosures', () => {
-    cy.getInFixedContainer('[data-cy="getting-started-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.get('[data-cy="getting-started-button"]').click().shouldHaveAttribute('aria-expanded', 'true');
     cy.getInFixedContainer('[data-cy="getting-started-list"]').should('be.visible');
 
-    cy.getInFixedContainer('[data-cy="design-tokens-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.get('[data-cy="design-tokens-button"]').click().shouldHaveAttribute('aria-expanded', 'true');
     cy.getInFixedContainer('[data-cy="design-tokens-list"]').should('be.visible');
 
-    cy.getInFixedContainer('[data-cy="components-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.get('[data-cy="components-button"]').click().shouldHaveAttribute('aria-expanded', 'true');
     cy.getInFixedContainer('[data-cy="components-list"]').should('be.visible');
 
-    cy.getInFixedContainer('[data-cy="primitives-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.get('[data-cy="primitives-button"]').click().shouldHaveAttribute('aria-expanded', 'true');
     cy.getInFixedContainer('[data-cy="primitives-list"]').should('be.visible');
 
-    cy.getInFixedContainer('[data-cy="layout-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.get('[data-cy="layout-button"]').click().shouldHaveAttribute('aria-expanded', 'true');
     cy.getInFixedContainer('[data-cy="layout-list"]').should('be.visible');
 
-    cy.getInFixedContainer('[data-cy="icons-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.get('[data-cy="icons-button"]').click().shouldHaveAttribute('aria-expanded', 'true');
     cy.getInFixedContainer('[data-cy="icons-list"]').should('be.visible');
 
-    cy.getInFixedContainer('[data-cy="content-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.get('[data-cy="content-button"]').click().shouldHaveAttribute('aria-expanded', 'true');
     cy.getInFixedContainer('[data-cy="content-list"]').should('be.visible');
 
-    cy.getInFixedContainer('[data-cy="patterns-button"]').click().shouldHaveAttribute('aria-expanded', true);
+    cy.get('[data-cy="patterns-button"]').click().shouldHaveAttribute('aria-expanded', 'true');
     cy.getInFixedContainer('[data-cy="patterns-list"]').should('be.visible');
   });
 });
diff --git a/cypress/support/child-commands.ts b/cypress/support/child-commands.ts
index 0c9be0bad5..fff90f8533 100644
--- a/cypress/support/child-commands.ts
+++ b/cypress/support/child-commands.ts
@@ -22,5 +22,5 @@ declare namespace Cypress {
 }
 
 Cypress.Commands.add('shouldHaveAttribute', {prevSubject: 'element'}, (subject, attribute, value) => {
-  return cy.wrap(subject).should('have.attr', attribute, value);
+  cy.wrap(subject).should('have.attr', attribute, value);
 });
diff --git a/cypress/support/parent-commands.ts b/cypress/support/parent-commands.ts
index 0faf50893a..80c2a51ae1 100644
--- a/cypress/support/parent-commands.ts
+++ b/cypress/support/parent-commands.ts
@@ -87,7 +87,7 @@ declare namespace Cypress {
 Cypress.Commands.add('getDocsPageContentArea', () => cy.get('#paste-docs-content-area'));
 
 Cypress.Commands.add('pageHeaderShouldBeVisible', (headerText) => {
-  return cy.contains('h1', headerText, {matchCase: false}).should('be.visible');
+  cy.contains('h1', headerText, {matchCase: false}).should('be.visible');
 });
 
 Cypress.Commands.add('overviewTableRendersCorrectly', () => {

From 180783a9d3e5295d042b2b533d2487a080c0fdc5 Mon Sep 17 00:00:00 2001
From: Andi Oneto <aoneto@twilio.com>
Date: Mon, 22 Nov 2021 11:20:29 -0800
Subject: [PATCH 6/9] chore(cypress): update workflow to use parallel

---
 .github/workflows/on_pull_request.yml | 9 +++++++++
 package.json                          | 2 +-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/on_pull_request.yml b/.github/workflows/on_pull_request.yml
index b9196c39b3..8fe7a10019 100644
--- a/.github/workflows/on_pull_request.yml
+++ b/.github/workflows/on_pull_request.yml
@@ -362,6 +362,15 @@ jobs:
     name: Website tests
     needs: build
     runs-on: ubuntu-latest
+    strategy:
+      # when one test fails, DO NOT cancel the other
+      # containers, because this will kill Cypress processes
+      # leaving the Dashboard hanging ...
+      # https://github.com/cypress-io/github-action/issues/48
+      fail-fast: false
+      matrix:
+        # run 3 copies of the current job in parallel, all load-balanced
+        machines: [1, 2, 3]
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v2
diff --git a/package.json b/package.json
index fe26ecdb65..c9572135e7 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "test:tools": "jest ./tools/ -c ./tools/jest.config.js",
     "test:tools-16": "USE_REACT_16=true jest ./tools/ -c ./tools/jest.config.js",
     "test:coverage": "yarn pre-test && jest --coverage",
-    "test:website": "start-server-and-test 'yarn serve:website' http://localhost:9000 'yarn cypress run --record --parallel --spec \"./cypress/integration/**/**/*.spec.ts\"'",
+    "test:website": "start-server-and-test 'yarn serve:website' http://localhost:9000 'yarn cypress run --record --parallel --group cypress-tests --spec \"./cypress/integration/**/**/*.spec.ts\"'",
     "test:website-gui": "start-server-and-test 'yarn serve:website' http://localhost:9000  'yarn cypress open'",
     "serve:website": "yarn workspace @twilio-paste/website serve",
     "package-size-action-build": "yarn build",

From 4e29088de61b973d8f98ba57f2fea0f73759157b Mon Sep 17 00:00:00 2001
From: Andi Oneto <aoneto@twilio.com>
Date: Tue, 23 Nov 2021 08:14:45 -0800
Subject: [PATCH 7/9] chore(cypress): add wait for required fetch for sidebar

---
 cypress/integration/sidebar-navigation/index.spec.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/cypress/integration/sidebar-navigation/index.spec.ts b/cypress/integration/sidebar-navigation/index.spec.ts
index 307f344c8a..096e86b1ea 100644
--- a/cypress/integration/sidebar-navigation/index.spec.ts
+++ b/cypress/integration/sidebar-navigation/index.spec.ts
@@ -1,6 +1,10 @@
 describe('Sidebar navigation', () => {
   beforeEach(() => {
+    // The sidebar navigation requires this endpoint's data to load in order for the expected behavior to be functional.
+    cy.intercept('/page-data/index/page-data.json').as('indexPageData');
     cy.visit('/');
+    // waiting for the data to load ensures that our tests only run when the page is ready to be interacted with.
+    cy.wait('@indexPageData');
   });
 
   it('opens the sidebar disclosures', () => {

From 5854b5e97d53abbf709be5e89155c28035d89ac0 Mon Sep 17 00:00:00 2001
From: Andi Oneto <aoneto@twilio.com>
Date: Tue, 23 Nov 2021 09:02:27 -0800
Subject: [PATCH 8/9] chore(cypress): fix scroll to top for changelog

---
 .github/workflows/on_pull_request.yml | 308 +++++++++++++-------------
 cypress/support/parent-commands.ts    |   9 +-
 package.json                          |   1 +
 3 files changed, 162 insertions(+), 156 deletions(-)

diff --git a/.github/workflows/on_pull_request.yml b/.github/workflows/on_pull_request.yml
index 8fe7a10019..deeaf091f6 100644
--- a/.github/workflows/on_pull_request.yml
+++ b/.github/workflows/on_pull_request.yml
@@ -203,160 +203,160 @@ jobs:
       - name: Run tests
         run: yarn test
 
-  react16_tests:
-    name: Test repository using React 16
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v2
-
-      - name: Setup Node.js 12.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 12.x
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-
-      - name: Load Yarn cache
-        uses: actions/cache@v2
-        id: yarn_cache_id
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn
-
-      - name: Node modules cache
-        uses: actions/cache@v2
-        id: node_modules_cache_id
-        with:
-          path: |
-            node_modules
-            */*/node_modules
-          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-
-      - name: Install Dependencies
-        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: yarn install --immutable
-
-      - name: Download build artifacts
-        uses: actions/download-artifact@v2
-        with:
-          name: compiled-js-and-types
-          path: packages/
-
-      - name: Run tests
-        run: yarn test:react-16
-
-  prettier:
-    name: Prettier checks
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v2
-
-      - name: Setup Node.js 12.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 12.x
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-
-      - name: Load Yarn cache
-        uses: actions/cache@v2
-        id: yarn_cache_id
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn
-
-      - name: Node modules cache
-        uses: actions/cache@v2
-        id: node_modules_cache_id
-        with:
-          path: |
-            node_modules
-            */*/node_modules
-          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-
-      - name: Install Dependencies
-        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: yarn install --immutable
-
-      - name: Download build artifacts
-        uses: actions/download-artifact@v2
-        with:
-          name: compiled-js-and-types
-          path: packages/
-
-      - name: Run prettier
-        run: yarn prettier
-
-  chromatic:
-    name: Component Visual regression tests
-    needs: build
-    runs-on: ubuntu-latest
-    if: github.event.pull_request.draft == false
-
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v2
-        with:
-          # Chromatic needs the full git history to work
-          fetch-depth: 0
-
-      - name: Setup Node.js 12.x
-        uses: actions/setup-node@v2
-        with:
-          node-version: 12.x
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-
-      - name: Load Yarn cache
-        uses: actions/cache@v2
-        id: yarn_cache_id
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn
-
-      - name: Node modules cache
-        uses: actions/cache@v2
-        id: node_modules_cache_id
-        with:
-          path: |
-            node_modules
-            */*/node_modules
-          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
-
-      - name: Install Dependencies
-        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: yarn install --immutable
-
-      - name: Download build artifacts
-        uses: actions/download-artifact@v2
-        with:
-          name: compiled-js-and-types
-          path: packages/
-
-      - name: Run Chromatic
-        uses: chromaui/action@v1
-        with:
-          projectToken: ${{ secrets.CHROMA_APP_CODE }}
-          token: ${{ secrets.GITHUB_TOKEN }}
-          buildScriptName: "build:storybook"
-          autoAcceptChanges: "main"
-          exitOnceUploaded: true
+  # react16_tests:
+  #   name: Test repository using React 16
+  #   needs: build
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout Repo
+  #       uses: actions/checkout@v2
+
+  #     - name: Setup Node.js 12.x
+  #       uses: actions/setup-node@v2
+  #       with:
+  #         node-version: 12.x
+
+  #     - name: Get yarn cache directory path
+  #       id: yarn-cache-dir-path
+  #       run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+  #     - name: Load Yarn cache
+  #       uses: actions/cache@v2
+  #       id: yarn_cache_id
+  #       with:
+  #         path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+  #         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+  #         restore-keys: |
+  #           ${{ runner.os }}-yarn
+
+  #     - name: Node modules cache
+  #       uses: actions/cache@v2
+  #       id: node_modules_cache_id
+  #       with:
+  #         path: |
+  #           node_modules
+  #           */*/node_modules
+  #         key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+
+  #     - name: Install Dependencies
+  #       if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
+  #       run: yarn install --immutable
+
+  #     - name: Download build artifacts
+  #       uses: actions/download-artifact@v2
+  #       with:
+  #         name: compiled-js-and-types
+  #         path: packages/
+
+  #     - name: Run tests
+  #       run: yarn test:react-16
+
+  # prettier:
+  #   name: Prettier checks
+  #   needs: build
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - name: Checkout Repo
+  #       uses: actions/checkout@v2
+
+  #     - name: Setup Node.js 12.x
+  #       uses: actions/setup-node@v2
+  #       with:
+  #         node-version: 12.x
+
+  #     - name: Get yarn cache directory path
+  #       id: yarn-cache-dir-path
+  #       run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+  #     - name: Load Yarn cache
+  #       uses: actions/cache@v2
+  #       id: yarn_cache_id
+  #       with:
+  #         path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+  #         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+  #         restore-keys: |
+  #           ${{ runner.os }}-yarn
+
+  #     - name: Node modules cache
+  #       uses: actions/cache@v2
+  #       id: node_modules_cache_id
+  #       with:
+  #         path: |
+  #           node_modules
+  #           */*/node_modules
+  #         key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+
+  #     - name: Install Dependencies
+  #       if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
+  #       run: yarn install --immutable
+
+  #     - name: Download build artifacts
+  #       uses: actions/download-artifact@v2
+  #       with:
+  #         name: compiled-js-and-types
+  #         path: packages/
+
+  #     - name: Run prettier
+  #       run: yarn prettier
+
+  # chromatic:
+  #   name: Component Visual regression tests
+  #   needs: build
+  #   runs-on: ubuntu-latest
+  #   if: github.event.pull_request.draft == false
+
+  #   steps:
+  #     - name: Checkout Repo
+  #       uses: actions/checkout@v2
+  #       with:
+  #         # Chromatic needs the full git history to work
+  #         fetch-depth: 0
+
+  #     - name: Setup Node.js 12.x
+  #       uses: actions/setup-node@v2
+  #       with:
+  #         node-version: 12.x
+
+  #     - name: Get yarn cache directory path
+  #       id: yarn-cache-dir-path
+  #       run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+  #     - name: Load Yarn cache
+  #       uses: actions/cache@v2
+  #       id: yarn_cache_id
+  #       with:
+  #         path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+  #         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+  #         restore-keys: |
+  #           ${{ runner.os }}-yarn
+
+  #     - name: Node modules cache
+  #       uses: actions/cache@v2
+  #       id: node_modules_cache_id
+  #       with:
+  #         path: |
+  #           node_modules
+  #           */*/node_modules
+  #         key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+
+  #     - name: Install Dependencies
+  #       if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
+  #       run: yarn install --immutable
+
+  #     - name: Download build artifacts
+  #       uses: actions/download-artifact@v2
+  #       with:
+  #         name: compiled-js-and-types
+  #         path: packages/
+
+  #     - name: Run Chromatic
+  #       uses: chromaui/action@v1
+  #       with:
+  #         projectToken: ${{ secrets.CHROMA_APP_CODE }}
+  #         token: ${{ secrets.GITHUB_TOKEN }}
+  #         buildScriptName: "build:storybook"
+  #         autoAcceptChanges: "main"
+  #         exitOnceUploaded: true
 
   cypress:
     name: Website tests
diff --git a/cypress/support/parent-commands.ts b/cypress/support/parent-commands.ts
index 80c2a51ae1..bfd738bc89 100644
--- a/cypress/support/parent-commands.ts
+++ b/cypress/support/parent-commands.ts
@@ -170,7 +170,10 @@ Cypress.Commands.add('checkDoDonts', () => {
 });
 
 Cypress.Commands.add('checkChangelogRevealer', () => {
-  cy.getInFixedContainer('#component-changelog').contains('h2', 'Changelog').should('be.visible').click();
+  cy.getInFixedContainer('#component-changelog')
+    .contains('h2', 'Changelog')
+    .should('be.visible')
+    .click({scrollBehavior: 'center'});
 
   cy.getInFixedContainer('[data-cy="changelog-revealer-content"]').should('be.visible');
 });
@@ -180,8 +183,10 @@ Cypress.Commands.add('getInFixedContainer', (selector) => {
 
   return cy
     .get('@target')
+    .scrollIntoView()
     .invoke('innerHeight')
+    .should('be.a', 'number')
     .then((height) => {
-      cy.get('@target').scrollIntoView({offset: {top: (height as number) / 2, left: 0}});
+      cy.get('@target').scrollIntoView({offset: {top: (height as number) / 2, left: 0}, ensureScrollable: true});
     });
 });
diff --git a/package.json b/package.json
index c9572135e7..4d7a9153cc 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "test:tools-16": "USE_REACT_16=true jest ./tools/ -c ./tools/jest.config.js",
     "test:coverage": "yarn pre-test && jest --coverage",
     "test:website": "start-server-and-test 'yarn serve:website' http://localhost:9000 'yarn cypress run --record --parallel --group cypress-tests --spec \"./cypress/integration/**/**/*.spec.ts\"'",
+    "test:website-dev": "start-server-and-test 'yarn serve:website' http://localhost:9000 'yarn cypress run --spec \"./cypress/integration/**/**/*.spec.ts\"'",
     "test:website-gui": "start-server-and-test 'yarn serve:website' http://localhost:9000  'yarn cypress open'",
     "serve:website": "yarn workspace @twilio-paste/website serve",
     "package-size-action-build": "yarn build",

From 9f68dce1f5f039ba01ef54a65ea2ce504996046d Mon Sep 17 00:00:00 2001
From: Andi Oneto <aoneto@twilio.com>
Date: Tue, 23 Nov 2021 10:37:03 -0800
Subject: [PATCH 9/9] chore(cypress): add job to pre-build website and set node
 v

---
 .github/workflows/on_pull_request.yml | 87 ++++++++++++++++++++++++---
 cypress.json                          |  3 +-
 2 files changed, 80 insertions(+), 10 deletions(-)

diff --git a/.github/workflows/on_pull_request.yml b/.github/workflows/on_pull_request.yml
index deeaf091f6..aee7c867fc 100644
--- a/.github/workflows/on_pull_request.yml
+++ b/.github/workflows/on_pull_request.yml
@@ -59,6 +59,67 @@ jobs:
             packages/paste-design-tokens/types/**/*
             packages/paste-codemods/tools/.cache/mappings.json
 
+  build_website:
+    name: Build website
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js 12.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 12.x
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+
+      - name: Load Yarn cache
+        uses: actions/cache@v2
+        id: yarn_cache_id
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn
+      - name: Node modules cache
+        uses: actions/cache@v2
+        id: node_modules_cache_id
+        with:
+          path: |
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install Dependencies
+        if: steps.yarn_cache_id.outputs.cache-hit != 'true' || steps.node_modules_cache_id.outputs.cache-hit != 'true'
+        run: yarn install --immutable
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v2
+        with:
+          name: compiled-js-and-types
+          path: packages/
+          if-no-files-found: error
+
+      - name: Build website
+        run: yarn build:website
+        env:
+          AIRTABLE_APIKEY: ${{ secrets.AIRTABLE_APIKEY }}
+          AIRTABLE_BASEID: ${{ secrets.AIRTABLE_BASEID }}
+          GATSBY_DOCSEARCH_APIKEY: ${{ secrets.GATSBY_DOCSEARCH_APIKEY }}
+
+      - name: Store build artifacts
+        uses: actions/upload-artifact@v2
+        with:
+          name: compiled-website
+          path: |
+            packages/paste-website/.cache/mappings.json
+            packages/paste-website/public/**/*
+
   type_check:
     name: Type check
     needs: build
@@ -360,7 +421,7 @@ jobs:
 
   cypress:
     name: Website tests
-    needs: build
+    needs: [build, build_website]
     runs-on: ubuntu-latest
     strategy:
       # when one test fails, DO NOT cancel the other
@@ -410,18 +471,26 @@ jobs:
       - name: Install Dependencies
         run: yarn install --immutable
 
-      - name: Download build artifacts
+      - name: Download website build artifact
         uses: actions/download-artifact@v2
         with:
-          name: compiled-js-and-types
-          path: packages/
+          name: compiled-website
+          path: packages/paste-website/
+          if-no-files-found: error
 
-      - name: Build website
-        run: yarn build:website
+      - name: Verify Cypress
         env:
-          AIRTABLE_APIKEY: ${{ secrets.AIRTABLE_APIKEY }}
-          AIRTABLE_BASEID: ${{ secrets.AIRTABLE_BASEID }}
-          GATSBY_DOCSEARCH_APIKEY: ${{ secrets.GATSBY_DOCSEARCH_APIKEY }}
+          # make sure every Cypress install prints minimal information
+          CI: 1
+        # print Cypress and OS info
+        run: |
+          yarn cypress verify
+          yarn cypress info
+          yarn cypress version
+          yarn cypress version --component package
+          yarn cypress version --component binary
+          yarn cypress version --component electron
+          yarn cypress version --component node
 
       - name: Run cypress
         run: yarn test:website
diff --git a/cypress.json b/cypress.json
index 1a021e408a..1f4cc80952 100644
--- a/cypress.json
+++ b/cypress.json
@@ -7,5 +7,6 @@
     "runMode": 2,
     "openMode": 0
   },
-  "blockHosts": "*.google-analytics.com"
+  "blockHosts": "*.google-analytics.com",
+  "nodeVersion": "system"
 }