test: [M3-7982] - Fix hanging account switching test

packages/manager/.changeset/pr-10396-tests-1713821841742.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Fix hanging account switching test ([#10396](https://github.com/linode/manager/pull/10396))

packages/manager/cypress/e2e/core/parentChild/account-switching.spec.ts

@@ -179,6 +179,7 @@ describe('Parent/Child account switching', () => {
       interceptGetInvoices().as('getInvoices');
 
       cy.visitWithLogin('/account/billing');
+      cy.trackPageVisit().as('pageVisit');
       cy.wait(['@getPayments', '@getInvoices', '@getPaymentMethods']);
 
       // Confirm that "Switch Account" button is present, then click it.
@@ -220,6 +221,7 @@ describe('Parent/Child account switching', () => {
         });
 
       cy.wait('@switchAccount');
+      cy.expectNewPageVisit('@pageVisit');
 
       // Confirm that Cloud Manager updates local storage authentication values.
       // Satisfy TypeScript using non-null assertions since we know what the mock data contains.
@@ -253,6 +255,7 @@ describe('Parent/Child account switching', () => {
       mockGetUser(mockParentUser);
 
       cy.visitWithLogin('/');
+      cy.trackPageVisit().as('pageVisit');
 
       // Confirm that Parent account username and company name are shown in user
       // menu button, then click the button.
@@ -301,6 +304,7 @@ describe('Parent/Child account switching', () => {
         });
 
       cy.wait('@switchAccount');
+      cy.expectNewPageVisit('@pageVisit');
 
       // Confirm that Cloud Manager updates local storage authentication values.
       // Satisfy TypeScript using non-null assertions since we know what the mock data contains.
@@ -334,7 +338,7 @@ describe('Parent/Child account switching', () => {
      * - Confirms that Parent account information is displayed in user menu button after switch.
      * - Confirms that Cloud updates local storage auth values upon account switch.
      */
-    it.skip('can switch from Proxy user back to Parent account user from Billing page', () => {
+    it('can switch from Proxy user back to Parent account user from Billing page', () => {
       const mockParentToken = randomString(32);
       const mockParentExpiration = DateTime.now().plus({ minutes: 15 }).toISO();
 
@@ -357,6 +361,10 @@ describe('Parent/Child account switching', () => {
         },
       });
 
+      // Track the initial page visit so that we can later assert that Cloud has
+      // reloaded upon switching accounts.
+      cy.trackPageVisit().as('pageVisit');
+
       // Wait for page to finish loading before proceeding with account switch.
       cy.wait(['@getPayments', '@getPaymentMethods', '@getInvoices']);
 
@@ -398,15 +406,15 @@ describe('Parent/Child account switching', () => {
             .click();
         });
 
-      // Allow page to load before asserting user menu, ensuring no app crash, etc.
+      cy.expectNewPageVisit('@pageVisit');
       cy.wait(['@getInvoices', '@getPayments', '@getPaymentMethods']);
 
+      assertAuthLocalStorage(mockParentToken, mockParentExpiration, '*');
+
       assertUserMenuButton(
         mockParentProfile.username,
         mockParentAccount.company
       );
-
-      assertAuthLocalStorage(mockParentToken, mockParentExpiration, '*');
     });
   });
 
@@ -442,6 +450,8 @@ describe('Parent/Child account switching', () => {
         },
       });
 
+      cy.trackPageVisit().as('pageVisit');
+
       // Wait for page to finish loading before proceeding with account switch.
       cy.wait(['@getPayments', '@getPaymentMethods', '@getInvoices']);
 
@@ -489,6 +499,7 @@ describe('Parent/Child account switching', () => {
 
       // Allow page to load before asserting user menu, ensuring no app crash, etc.
       cy.wait('@switchAccount');
+      cy.expectNewPageVisit('@pageVisit');
       cy.wait(['@getInvoices', '@getPayments', '@getPaymentMethods']);
 
       assertUserMenuButton(

packages/manager/cypress/support/e2e.ts

@@ -21,6 +21,7 @@ import 'cypress-real-events/support';
 
 import './setup/defer-command';
 import './setup/login-command';
+import './setup/page-visit-tracking-commands';
 chai.use(chaiString);
 
 chai.use(function (chai, utils) {

packages/manager/cypress/support/index.d.ts

@@ -33,6 +33,36 @@ declare global {
         cypressOptions?: Partial<Cypress.VisitOptions>
       ): Chainable<any>;
 
+      /**
+       * Assigns a random page visit ID to the current page.
+       *
+       * Used to determine whether navigation has occurred later.
+       *
+       * @example
+       * // After initial call to `cy.visit()` or `cy.visitWithLogin()`:
+       * cy.trackPageVisit().as('pageVisit');
+       * // Later in the tests, to assert that navigation has occurred:
+       * cy.expectNewPageVisit('@pageVisit');
+       *
+       * @returns Cypress chainable that yields the random page visit ID.
+       */
+      trackPageVisit(): Chainable<number>;
+
+      /**
+       * Asserts that a browser page visit (e.g. navigation or reload) has occurred.
+       *
+       * @example
+       * // After initial call to `cy.visit()` or `cy.visitWithLogin()`:
+       * cy.trackPageVisit().as('pageVisit');
+       * // Later in the tests, to assert that navigation has occurred:
+       * cy.expectNewPageVisit('@pageVisit');
+       *
+       * @param alias - Alias to the current page load ID.
+       *
+       * @returns Cypress chainable.
+       */
+      expectNewPageVisit(alias: string): Chainable<>;
+
       /**
        * Internal Cypress command to retrieve test state.
        *

packages/manager/cypress/support/setup/page-visit-tracking-commands.ts

@@ -0,0 +1,51 @@
+import { randomNumber } from 'support/util/random';
+
+/**
+ * Assigns a random page visit ID to the current page.
+ *
+ * Used to determine whether navigation has occurred later.
+ *
+ * @returns Cypress chainable that yields the random page visit ID.
+ */
+Cypress.Commands.add('trackPageVisit', { prevSubject: false }, () => {
+  const pageLoadId = randomNumber(100000, 999999);
+
+  cy.window({ log: false }).then((window) => {
+    window['cypress-visit-id'] = pageLoadId;
+  });
+
+  cy.log(`Tracking page visit with ID ${pageLoadId}`);
+
+  return cy.wrap(pageLoadId, { log: false });
+});
+
+/**
+ * Asserts that a browser page visit (e.g. via navigation or reload) has occurred.
+ *
+ * @param alias - Alias to the current page load ID.
+ *
+ * @returns Cypress chainable.
+ */
+Cypress.Commands.add(
+  'expectNewPageVisit',
+  { prevSubject: false },
+  (alias: string) => {
+    return cy
+      .get<any>(alias, { log: false })
+      .then((pageLoadId) => {
+        const log = Cypress.log({
+          autoEnd: false,
+          end: false,
+          message: `Expecting window not to have page visit ID ${pageLoadId}`,
+          name: 'expectNewPageVisit',
+        });
+
+        cy.window({ log: false }).should(
+          'not.have.prop',
+          'cypress-visit-id',
+          pageLoadId
+        );
+        log.end();
+      });
+  }
+);