feat: add e2e tests for user profile avatar (#5381)

Author: wdoconnell

cypress/e2e/cloud/globalHeader.ts

@@ -0,0 +1,60 @@
+describe('multi-account multi-org global header', () => {
+  const globalHeaderFeatureFlags = {
+    quartzIdentity: true,
+    multiOrg: true,
+  }
+
+  beforeEach(() => {
+    // Maintain the same session for all tests so that further logins aren't required.
+    Cypress.Cookies.preserveOnce('sid')
+  })
+
+  before(() => {
+    cy.flush().then(() =>
+      cy.signin().then(() => {
+        cy.get('@org').then(() => {
+          cy.getByTestID('home-page--header').should('be.visible')
+          cy.setFeatureFlags(globalHeaderFeatureFlags).then(() => {
+            // cy.wait is necessary to ensure sufficient time for the feature flag override.
+            // We cannot cy.wait an intercepted route because this isn't a network request.
+            cy.wait(400).then(() => {
+              cy.visit('/')
+            })
+          })
+        })
+      })
+    )
+  })
+
+  describe('user profile avatar', () => {
+    it('navigates to the `user profile` page', () => {
+      cy.getByTestID('global-header--user-avatar')
+        .should('be.visible')
+        .click({scrollBehavior: false})
+
+      cy.getByTestID('global-header--user-popover-profile-button')
+        .should('be.visible')
+        .click({scrollBehavior: false})
+
+      cy.getByTestID('user-profile--page').should('be.visible')
+
+      cy.getByTestID('global-header--user-avatar')
+        .should('be.visible')
+        .click({scrollBehavior: false})
+    })
+
+    it('allows the user to log out', () => {
+      cy.getByTestID('global-header--user-avatar')
+        .should('be.visible')
+        .click({scrollBehavior: false})
+
+      cy.getByTestID('global-header--user-popover-logout-button')
+        .should('be.visible')
+        .click({
+          scrollBehavior: false,
+        })
+      // Logout in remocal looks like a 404 because there is no quartz. This tests the logout URL.
+      cy.location('pathname').should('eq', '/logout')
+    })
+  })
+})

src/identity/components/GlobalHeader/IdentityUserAvatar.tsx

@@ -68,13 +68,15 @@ class IdentityUserAvatar extends React.Component<Props, State> {
             <Icon
               glyph={IconFont.User}
               className="user-popover-footer--button-icon"
+              testID="global-header--user-popover-profile-button"
             />
             Profile
           </Link>
           <Link className="user-popover-footer--button" to="/logout">
             <Icon
               glyph={IconFont.Logout}
               className="user-popover-footer--button-icon"
+              testID="global-header--user-popover-logout-button"
             />
             Log Out
           </Link>
@@ -98,18 +100,22 @@ class IdentityUserAvatar extends React.Component<Props, State> {
         <div>
           {/* Button shape is ButtonShape.Square to make the height and width the same
             so we can use the border radius to make it a circle  */}
-          <Button
-            text={this.getInitials()}
-            shape={ButtonShape.Square}
-            color={
-              isPopoverOpen ? ComponentColor.Default : ComponentColor.Tertiary
-            }
-            onClick={this.togglePopoverState}
-            className={userAvatarButtonClassName}
-          />
+          {this.getInitials() && (
+            <Button
+              text={this.getInitials()}
+              shape={ButtonShape.Square}
+              color={
+                isPopoverOpen ? ComponentColor.Default : ComponentColor.Tertiary
+              }
+              onClick={this.togglePopoverState}
+              className={userAvatarButtonClassName}
+              testID="global-header--user-avatar"
+            />
+          )}
           <FlexBox
             className={userPopoverClassName}
             direction={FlexDirection.Column}
+            testID="global-header--user-popover"
           >
             {this.getUserPopoverContents()}
           </FlexBox>

src/identity/components/userprofile/UserProfilePage.tsx

@@ -17,7 +17,7 @@ export const UserProfilePage: FC = () => {
   return (
     <Page titleTag={pageTitleSuffixer(['User Profile'])}>
       <Page.Header fullWidth={true}>
-        <Page.Title title="User Profile" />
+        <Page.Title title="User Profile" testID="user-profile--page" />
       </Page.Header>
       <Page.Contents fullWidth={true}>
         <UserDetails />