chore(cypress): upgrade cypress to v8 and turn on tests

cypress.json

@@ -7,5 +7,6 @@
     "runMode": 2,
     "openMode": 0
   },
-  "blockHosts": "*.google-analytics.com"
+  "blockHosts": "*.google-analytics.com",
+  "nodeVersion": "system"
 }

cypress/integration/e2e/components/alert.spec.ts

@@ -1,5 +1,6 @@
 describe('Alert component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('alert');
     cy.visit('/components/alert');
   });
 

cypress/integration/e2e/components/anchor.spec.ts

@@ -1,5 +1,6 @@
 describe('Anchor component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('anchor');
     cy.visit('/components/anchor');
   });
 

cypress/integration/e2e/components/avatar.spec.ts

@@ -1,5 +1,6 @@
 describe('Avatar component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('avatar');
     cy.visit('/components/avatar');
   });
 

cypress/integration/e2e/components/badge.spec.ts

@@ -1,5 +1,6 @@
 describe('Badge component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('badge');
     cy.visit('/components/badge');
   });
 

cypress/integration/e2e/components/breadcrumb.spec.ts

@@ -1,5 +1,6 @@
 describe('Breadcrumb component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('breadcrumb');
     cy.visit('/components/breadcrumb');
   });
 

cypress/integration/e2e/components/button.spec.ts

@@ -1,5 +1,6 @@
 describe('Button component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('button');
     cy.visit('/components/button');
   });
 

cypress/integration/e2e/components/card.spec.ts

@@ -1,5 +1,6 @@
 describe('Card component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('card');
     cy.visit('/components/card');
   });
 

cypress/integration/e2e/components/checkbox.spec.ts

@@ -1,5 +1,6 @@
 describe('Checkbox component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('checkbox');
     cy.visit('/components/checkbox');
   });
 

cypress/integration/e2e/components/combobox.spec.ts

@@ -1,5 +1,6 @@
 describe('Combobox component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('combobox');
     cy.visit('/components/combobox');
   });
 

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');
   });
 

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');
   });
 

cypress/integration/e2e/components/disclosure.spec.ts

@@ -1,5 +1,6 @@
 describe('Disclosure component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('disclosure');
     cy.visit('/components/disclosure');
   });
 

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');
   });
 

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');
   });
 

cypress/integration/e2e/components/heading.spec.ts

@@ -1,5 +1,6 @@
 describe('Heading component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('heading');
     cy.visit('/components/heading');
   });
 

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');
   });
 

cypress/integration/e2e/components/input.spec.ts

@@ -1,5 +1,6 @@
 describe('Input component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('input');
     cy.visit('/components/input');
   });
 

cypress/integration/e2e/components/label.spec.ts

@@ -1,5 +1,6 @@
 describe('Label component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('label');
     cy.visit('/components/label');
   });
 

cypress/integration/e2e/components/list.spec.ts

@@ -1,5 +1,6 @@
 describe('List component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('list');
     cy.visit('/components/list');
   });
 

cypress/integration/e2e/components/menu.spec.ts

@@ -1,5 +1,6 @@
 describe('Menu component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('menu');
     cy.visit('/components/menu');
   });
 

cypress/integration/e2e/components/modal.spec.ts

@@ -1,5 +1,6 @@
 describe('Modal component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('modal');
     cy.visit('/components/modal');
   });
 

cypress/integration/e2e/components/pagination.spec.ts

@@ -1,5 +1,6 @@
 describe('Pagination component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('pagination');
     cy.visit('/components/pagination');
   });
 

cypress/integration/e2e/components/paragraph.spec.ts

@@ -1,5 +1,6 @@
 describe('Paragraph component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('paragraph');
     cy.visit('/components/paragraph');
   });
 

cypress/integration/e2e/components/popover.spec.ts

@@ -1,5 +1,6 @@
 describe('Popover component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('popover');
     cy.visit('/components/popover');
   });
 

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');
   });
 

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');
   });
 

cypress/integration/e2e/components/select.spec.ts

@@ -1,5 +1,6 @@
 describe('Select component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('select');
     cy.visit('/components/select');
   });
 

cypress/integration/e2e/components/separator.spec.ts

@@ -1,5 +1,6 @@
 describe('Separator component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('separator');
     cy.visit('/components/separator');
   });
 

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');
   });
 

cypress/integration/e2e/components/spinner.spec.ts

@@ -1,5 +1,6 @@
 describe('Spinner component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('spinner');
     cy.visit('/components/spinner');
   });
 

cypress/integration/e2e/components/table.spec.ts

@@ -1,5 +1,6 @@
 describe('Table component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('table');
     cy.visit('/components/table');
   });
 

cypress/integration/e2e/components/tabs.spec.ts

@@ -1,5 +1,6 @@
 describe('Tabs component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('tabs');
     cy.visit('/components/tabs');
   });
 

cypress/integration/e2e/components/textarea.spec.ts

@@ -1,5 +1,6 @@
 describe('Textarea component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('textarea');
     cy.visit('/components/textarea');
   });
 

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');
   });
 

cypress/integration/e2e/components/toast.spec.ts

@@ -1,5 +1,6 @@
 describe('Toast component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('toast');
     cy.visit('/components/toast');
   });
 

cypress/integration/e2e/components/tooltip.spec.ts

@@ -1,5 +1,6 @@
 describe('Tooltip component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('tooltip');
     cy.visit('/components/tooltip');
   });
 

cypress/integration/e2e/components/truncate.spec.ts

@@ -1,5 +1,6 @@
 describe('Truncate component documentation page', () => {
   beforeEach(() => {
+    cy.abortPrefetchRequests('truncate');
     cy.visit('/components/truncate');
   });
 

cypress/integration/e2e/patterns/create.spec.ts

@@ -8,6 +8,5 @@ describe('Create patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });

cypress/integration/e2e/patterns/data-export.spec.ts

@@ -8,6 +8,5 @@ describe('Data-export patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });

cypress/integration/e2e/patterns/delete.spec.ts

@@ -8,6 +8,5 @@ describe('Delete patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });

cypress/integration/e2e/patterns/empty-states.spec.ts

@@ -8,6 +8,5 @@ describe('Empty-states patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });

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();
   });
 });

cypress/integration/e2e/patterns/object-details.spec.ts

@@ -8,6 +8,5 @@ describe('Object-details patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });

cypress/integration/e2e/patterns/status.spec.ts

@@ -8,6 +8,5 @@ describe('Status patterns documentation page', () => {
 
     cy.checkInPageNavigationLinks();
     cy.checkPageAside();
-    cy.checkLivePreviews();
   });
 });

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();
   });
 });

cypress/integration/sidebar-navigation/index.spec.ts

@@ -1,30 +1,35 @@
 describe('Sidebar navigation', () => {
-  it('opens the sidebar disclosures', () => {
+  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('/');
-    cy.wait(2500);
+    // waiting for the data to load ensures that our tests only run when the page is ready to be interacted with.
+    cy.wait('@indexPageData');
+  });
 
-    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.get('[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.get('[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.get('[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.get('[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.get('[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.get('[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.get('[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.get('[data-cy="patterns-button"]').click().shouldHaveAttribute('aria-expanded', 'true');
+    cy.getInFixedContainer('[data-cy="patterns-list"]').should('be.visible');
   });
 });