test: [M3-7516] - Cypress tests for Parent → Child account switching flows

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

@@ -0,0 +1,289 @@
+import {
+  accountFactory,
+  appTokenFactory,
+  profileFactory,
+} from '@src/factories';
+import { accountUserFactory } from '@src/factories/accountUsers';
+import { DateTime } from 'luxon';
+import {
+  mockCreateChildAccountToken,
+  mockCreateChildAccountTokenError,
+  mockGetAccount,
+  mockGetChildAccounts,
+  mockGetChildAccountsError,
+  mockGetUser,
+} from 'support/intercepts/account';
+import {
+  mockAppendFeatureFlags,
+  mockGetFeatureFlagClientstream,
+} from 'support/intercepts/feature-flags';
+import { mockAllApiRequests } from 'support/intercepts/general';
+import { mockGetProfile } from 'support/intercepts/profile';
+import { ui } from 'support/ui';
+import { makeFeatureFlagData } from 'support/util/feature-flags';
+import { assertLocalStorageValue } from 'support/util/local-storage';
+import { randomLabel, randomNumber, randomString } from 'support/util/random';
+
+/**
+ * Confirms expected username and company name are shown in user menu button and yields the button.
+ *
+ * @param username - Username to expect in user menu button.
+ * @param companyName - Company name to expect in user menu button.
+ *
+ * @returns Cypress chainable that yields the user menu button.
+ */
+const assertUserMenuButton = (username: string, companyName: string) => {
+  return ui.userMenuButton
+    .find()
+    .should('be.visible')
+    .within(() => {
+      cy.findByText(username).should('be.visible');
+      cy.findByText(companyName).should('be.visible');
+    });
+};
+
+/**
+ * Confirms that expected authentication values are set in Local Storage.
+ *
+ * @param token - Authentication token value to assert.
+ * @param expiry - Authentication expiry value to assert.
+ * @param scopes - Authentication scope value to assert.
+ */
+const assertAuthLocalStorage = (
+  token: string,
+  expiry: string,
+  scopes: string
+) => {
+  assertLocalStorageValue('authentication/token', token);
+  assertLocalStorageValue('authentication/expire', expiry);
+  assertLocalStorageValue('authentication/scopes', scopes);
+};
+
+const mockParentAccount = accountFactory.build({
+  company: 'Parent Company',
+});
+
+const mockParentProfile = profileFactory.build({
+  username: randomLabel(),
+  user_type: 'parent',
+});
+
+const mockParentUser = accountUserFactory.build({
+  username: mockParentProfile.username,
+  user_type: 'parent',
+});
+
+const mockChildAccount = accountFactory.build({
+  company: 'Child Company',
+});
+
+const mockChildAccountToken = appTokenFactory.build({
+  id: randomNumber(),
+  created: DateTime.now().toISO(),
+  expiry: DateTime.now().plus({ hours: 1 }).toISO(),
+  label: `${mockChildAccount.company}_proxy`,
+  scopes: '*',
+  token: randomString(32),
+  website: undefined,
+  thumbnail_url: undefined,
+});
+
+const mockErrorMessage = 'An unknown error has occurred.';
+
+describe('Parent/Child account switching', () => {
+  /*
+   * Tests to confirm that Parent account users can switch to Child accounts as expected.
+   */
+  describe('From Parent to Child', () => {
+    beforeEach(() => {
+      // @TODO M3-7554, M3-7559: Remove feature flag mocks after feature launch and clean-up.
+      mockAppendFeatureFlags({
+        parentChildAccountAccess: makeFeatureFlagData(true),
+      });
+      mockGetFeatureFlagClientstream();
+    });
+
+    /*
+     * - Confirms that Parent account user can switch to Child account from Account Billing page.
+     * - Confirms that Child account information is displayed in user menu button after switch.
+     * - Confirms that Cloud updates local storage auth values upon account switch.
+     */
+    it('can switch from Parent account to Child account from Billing page', () => {
+      mockGetProfile(mockParentProfile);
+      mockGetAccount(mockParentAccount);
+      mockGetChildAccounts([mockChildAccount]);
+      mockGetUser(mockParentUser);
+
+      cy.visitWithLogin('/account/billing');
+
+      // Confirm that "Switch Account" button is present, then click it.
+      ui.button
+        .findByTitle('Switch Account')
+        .should('be.visible')
+        .should('be.enabled')
+        .click();
+
+      mockCreateChildAccountToken(mockChildAccount, mockChildAccountToken).as(
+        'switchAccount'
+      );
+
+      ui.drawer
+        .findByTitle('Switch Account')
+        .should('be.visible')
+        .within(() => {
+          cy.findByText(mockChildAccount.company).should('be.visible').click();
+        });
+
+      cy.wait('@switchAccount');
+
+      // Confirm that Cloud Manager updates local storage authentication values.
+      assertAuthLocalStorage(
+        mockChildAccountToken.token,
+        mockChildAccountToken.expiry,
+        mockChildAccountToken.scopes
+      );
+
+      // From this point forward, we will not have a valid test account token stored in local storage,
+      // so all non-intercepted API requests will respond with a 401 status code and we will get booted to login.
+      // We'll mitigate this by broadly mocking ALL API-v4 requests, then applying more specific mocks to the
+      // individual requests as needed.
+      mockAllApiRequests();
+      mockGetAccount(mockChildAccount);
+      mockGetProfile(mockParentProfile);
+      mockGetUser(mockParentUser);
+
+      // TODO Remove the call to `cy.reload()` once Cloud Manager automatically updates itself upon account switching.
+      // TODO Add assertions for toast upon account switch.
+      cy.reload();
+
+      // Confirm expected username and company are shown in user menu button.
+      assertUserMenuButton(
+        mockParentProfile.username,
+        mockChildAccount.company
+      );
+    });
+
+    /*
+     * - Confirms that Parent account user can switch to Child account using the user menu.
+     * - Confirms that Parent account information is initially displayed in user menu button.
+     * - Confirms that Child account information is displayed in user menu button after switch.
+     * - Confirms that Cloud updates local storage auth values upon account switch.
+     */
+    it('can switch from Parent account to Child account using user menu', () => {
+      mockGetProfile(mockParentProfile);
+      mockGetAccount(mockParentAccount);
+      mockGetChildAccounts([mockChildAccount]);
+      mockGetUser(mockParentUser);
+
+      cy.visitWithLogin('/');
+
+      // Confirm that Parent account username and company name are shown in user
+      // menu button, then click the button.
+      assertUserMenuButton(
+        mockParentProfile.username,
+        mockParentAccount.company
+      ).click();
+
+      // Click "Switch Account" button in user menu.
+      ui.userMenu
+        .find()
+        .should('be.visible')
+        .within(() => {
+          ui.button
+            .findByTitle('Switch Account')
+            .should('be.visible')
+            .should('be.enabled')
+            .click();
+        });
+
+      // Click mock company name in "Switch Account" drawer.
+      mockCreateChildAccountToken(mockChildAccount, mockChildAccountToken).as(
+        'switchAccount'
+      );
+
+      ui.drawer
+        .findByTitle('Switch Account')
+        .should('be.visible')
+        .within(() => {
+          cy.findByText(mockChildAccount.company).should('be.visible').click();
+        });
+
+      cy.wait('@switchAccount');
+
+      // Confirm that Cloud Manager updates local storage authentication values.
+      assertAuthLocalStorage(
+        mockChildAccountToken.token,
+        mockChildAccountToken.expiry,
+        mockChildAccountToken.scopes
+      );
+
+      // From this point forward, we will not have a valid test account token stored in local storage,
+      // so all non-intercepted API requests will respond with a 401 status code and we will get booted to login.
+      // We'll mitigate this by broadly mocking ALL API-v4 requests, then applying more specific mocks to the
+      // individual requests as needed.
+      mockAllApiRequests();
+      mockGetAccount(mockChildAccount);
+      mockGetProfile(mockParentProfile);
+      mockGetUser(mockParentUser);
+
+      // TODO Remove the call to `cy.reload()` once Cloud Manager automatically updates itself upon account switching.
+      // TODO Add assertions for toast upon account switch.
+      cy.reload();
+
+      // Confirm expected username and company are shown in user menu button.
+      assertUserMenuButton(
+        mockParentProfile.username,
+        mockChildAccount.company
+      );
+    });
+  });
+
+  /*
+   * Tests to confirm that Cloud handles account switching errors gracefully.
+   */
+  describe('Error flows', () => {
+    /*
+     * - Confirms error handling upon failure to fetch child accounts.
+     * - Confirms "Try Again" button can be used to re-fetch child accounts successfully.
+     * - Confirms error handling upon failure to create child account token.
+     */
+    it('handles account switching API errors', () => {
+      mockGetProfile(mockParentProfile);
+      mockGetAccount(mockParentAccount);
+      mockGetChildAccountsError('An unknown error has occurred', 500);
+      mockGetUser(mockParentUser);
+
+      cy.visitWithLogin('/account/billing');
+      ui.button
+        .findByTitle('Switch Account')
+        .should('be.visible')
+        .should('be.enabled')
+        .click();
+
+      ui.drawer
+        .findByTitle('Switch Account')
+        .should('be.visible')
+        .within(() => {
+          // Confirm error message upon failure to fetch child accounts.
+          cy.findByText('Unable to load data.').should('be.visible');
+          cy.findByText(
+            'Try again or contact support if the issue persists.'
+          ).should('be.visible');
+
+          // Click "Try Again" button and mock a successful response.
+          mockGetChildAccounts([mockChildAccount]);
+          ui.button
+            .findByTitle('Try again')
+            .should('be.visible')
+            .should('be.enabled')
+            .click();
+
+          // Click child company and mock an error.
+          // Confirm that Cloud Manager displays the error message in the drawer.
+          mockCreateChildAccountTokenError(mockChildAccount, mockErrorMessage);
+          cy.findByText(mockChildAccount.company).click();
+          cy.findByText(mockErrorMessage).should('be.visible');
+        });
+    });
+  });
+});

packages/manager/cypress/support/intercepts/account.ts

@@ -19,6 +19,7 @@ import type {
   InvoiceItem,
   Payment,
   PaymentMethod,
+  Token,
   User,
 } from '@linode/api-v4';
 
@@ -467,6 +468,7 @@ export const mockCancelAccountError = (
 /**
  * Intercepts GET request to fetch the account agreements and mocks the response.
  *
+ * @param agreements - Agreements with which to mock response.
  *
  * @returns Cypress chainable.
  */
@@ -479,3 +481,79 @@ export const mockGetAccountAgreements = (
     makeResponse(agreements)
   );
 };
+
+/**
+ * Intercepts GET request to fetch child accounts and mocks the response.
+ *
+ * @param childAccounts - Child account objects with which to mock response.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockGetChildAccounts = (
+  childAccounts: Account[]
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'GET',
+    apiMatcher('account/child-accounts*'),
+    paginateResponse(childAccounts)
+  );
+};
+
+/**
+ * Intercepts GET request to fetch child accounts and mocks an error response.
+ *
+ * @param errorMessage - API error message with which to mock response.
+ * @param statusCode - HTTP status code with which to mock response.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockGetChildAccountsError = (
+  errorMessage: string = 'An unknown error has occurred',
+  statusCode: number = 500
+) => {
+  return cy.intercept(
+    'GET',
+    apiMatcher('account/child-accounts*'),
+    makeErrorResponse(errorMessage, statusCode)
+  );
+};
+
+/**
+ * Intercepts POST request to create a child account token and mocks the response.
+ *
+ * @param childAccount - Child account for which to create a token.
+ * @param childAccountToken - Token object with which to mock response.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockCreateChildAccountToken = (
+  childAccount: Account,
+  childAccountToken: Token
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'POST',
+    apiMatcher(`account/child-accounts/${childAccount.euuid}/token`),
+    makeResponse(childAccountToken)
+  );
+};
+
+/**
+ * Intercepts POST request to create a child account token and mocks error response.
+ *
+ * @param childAccount - Child account for which to mock error response.
+ * @param errorMessage - API error message with which to mock response.
+ * @param statusCode - HTTP status code with which to mock response.
+ *
+ * @returns Cypress chainable.
+ */
+export const mockCreateChildAccountTokenError = (
+  childAccount: Account,
+  errorMessage: string = 'An unknown error has occurred',
+  statusCode: number = 500
+): Cypress.Chainable<null> => {
+  return cy.intercept(
+    'POST',
+    apiMatcher(`account/child-accounts/${childAccount.euuid}/token`),
+    makeErrorResponse(errorMessage, statusCode)
+  );
+};