feat: create e2e tests for user profile (#5386)

wdoconnell · web-flow · commit 71cab51eeebb · 2022-08-15T11:41:36.000-04:00
diff --git a/cypress/e2e/cloud/userProfile.ts b/cypress/e2e/cloud/userProfile.ts
diff --git a/src/identity/components/GlobalHeader/GlobalHeaderDropdown/GlobalHeaderTypeAheadMenu.tsx b/src/identity/components/GlobalHeader/GlobalHeaderDropdown/GlobalHeaderTypeAheadMenu.tsx
@@ -10,6 +10,7 @@ type Props = {
   typeAheadPlaceHolder: string
   typeAheadMenuOptions: TypeAheadMenuItem[]
   onSelectOption: (item: TypeAheadMenuItem) => void
+  testID: string
 }
 
 type State = {
@@ -96,7 +97,7 @@ export class GlobalHeaderTypeAheadMenu extends React.Component<Props, State> {
         placeholder={typeAheadPlaceHolder}
         onChange={this.handleInputChange}
         value={searchTerm}
-        testID="dropdown-input-typeAhead"
+        testID={this.props.testID}
         onClear={this.clearFilter}
         onFocus={this.selectAllTextInInput}
         className="global-header--typeahead-input"
diff --git a/src/identity/components/GlobalHeader/GlobalHeaderDropdown/index.tsx b/src/identity/components/GlobalHeader/GlobalHeaderDropdown/index.tsx
@@ -33,18 +33,22 @@ export interface TypeAheadMenuItem {
 
 export interface Props extends StandardFunctionProps {
   defaultButtonText?: string
+  defaultTestID?: string
   dropdownButtonSize?: ComponentSize
   dropdownButtonIcon?: IconFont
   dropdownMenuStyle?: React.CSSProperties
   dropdownMenuTheme?: DropdownMenuTheme
   mainMenuHeaderText?: string
   mainMenuHeaderIcon?: IconFont
   mainMenuOptions: MainMenuItem[]
+  mainMenuTestID?: string
   onlyRenderSubmenu?: boolean
+  testID?: string
   typeAheadSelectedOption?: TypeAheadMenuItem
   typeAheadMenuOptions: TypeAheadMenuItem[]
   typeAheadInputPlaceholder?: string
   typeAheadOnSelectOption?: (item: TypeAheadMenuItem | null) => void
+  typeAheadTestID?: string
 }
 
 type State = {
@@ -75,6 +79,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
   ) => {
     const {
       defaultButtonText,
+      defaultTestID,
       dropdownButtonSize,
       dropdownButtonIcon,
     } = this.props
@@ -86,6 +91,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
         size={dropdownButtonSize}
         trailingIcon={dropdownButtonIcon || IconFont.DoubleCaretVertical}
         className="global-header--dropdown-button"
+        testID={defaultTestID}
       >
         {selectedItem?.name || defaultButtonText}
       </Dropdown.Button>
@@ -110,6 +116,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
               key={value.name}
               href={value.href}
               className="global-header--align-center"
+              testID={`${this.props.mainMenuTestID}-${value.name}`}
             >
               {iconEl}
               {textEl}
@@ -135,6 +142,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
         onSelectOption={typeAheadOnSelectOption}
         style={dropdownMenuStyle}
         defaultSelectedItem={selectedItem}
+        testID={this.props.typeAheadTestID}
       />
     )
   }
@@ -157,7 +165,11 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
       />
     )
     return (
-      <Dropdown.Menu theme={dropdownMenuTheme} style={dropdownMenuStyle}>
+      <Dropdown.Menu
+        style={dropdownMenuStyle}
+        theme={dropdownMenuTheme}
+        testID={this.props.mainMenuTestID}
+      >
         {/* Multi-org UI tickets #4051 and #4047, when user only has 1 account or 1 org, switch button is disabled */}
         {!onlyRenderSubmenu && typeAheadMenuOptions.length > 1 && (
           <Dropdown.Item onClick={this.toggleShowTypeAheadMenu}>
@@ -196,6 +208,7 @@ export class GlobalHeaderDropdown extends React.Component<Props, State> {
         disableAutoFocus
         button={this.dropdownButton}
         menu={this.renderMenu}
+        testID={this.props.testID}
       />
     )
   }
diff --git a/src/identity/components/userprofile/DefaultAccountForm.tsx b/src/identity/components/userprofile/DefaultAccountForm.tsx
@@ -40,6 +40,7 @@ export const DefaultAccountForm: FC<Props> = ({
         weight={FontWeight.Bold}
         element={HeadingElement.H4}
         className="change-default-account-org--header"
+        testID="user-profile--change-account-header"
       >
         Default Account
       </Heading>
@@ -50,8 +51,10 @@ export const DefaultAccountForm: FC<Props> = ({
         <DefaultDropdown
           entityLabel={EntityLabel.DefaultAccount}
           defaultEntity={selectedAccount}
+          defaultTestID="user-profile--change-account-dropdown"
           entityList={accounts}
           changeSelectedEntity={setSelectedAccount}
+          headerTestID="user-profile--change-account-dropdown-header"
         />
       )}
     </FlexBox>
diff --git a/src/identity/components/userprofile/DefaultDropdown.tsx b/src/identity/components/userprofile/DefaultDropdown.tsx
@@ -26,17 +26,21 @@ import 'src/identity/components/userprofile/UserProfile.scss'
 const globalHeaderStyle = {width: '368px', backgroundColor: '#232533'}
 
 interface Props {
-  entityLabel: string
+  changeSelectedEntity: (action: SetStateAction<any>) => void
   defaultEntity: Entity
+  defaultTestID: string
   entityList: Entity[]
-  changeSelectedEntity: (action: SetStateAction<any>) => void
+  entityLabel: string
+  headerTestID: string
 }
 
 export const DefaultDropdown: FC<Props> = ({
-  entityLabel,
-  entityList,
   changeSelectedEntity,
   defaultEntity,
+  defaultTestID,
+  entityList,
+  entityLabel,
+  headerTestID,
 }) => {
   return (
     <FlexBox
@@ -48,15 +52,17 @@ export const DefaultDropdown: FC<Props> = ({
       <Form.Element
         label={`Default ${entityLabel}`}
         className="user-profile-page--form-element"
+        testID={headerTestID}
       >
         <GlobalHeaderDropdown
+          defaultTestID={defaultTestID}
           mainMenuOptions={[]}
           onlyRenderSubmenu={true}
+          style={globalHeaderStyle}
           typeAheadMenuOptions={entityList}
           typeAheadInputPlaceholder={`Search ${entityLabel}s ...`}
           typeAheadSelectedOption={defaultEntity}
           typeAheadOnSelectOption={changeSelectedEntity}
-          style={globalHeaderStyle}
         />
       </Form.Element>
     </FlexBox>
diff --git a/src/identity/components/userprofile/DefaultOrgForm.tsx b/src/identity/components/userprofile/DefaultOrgForm.tsx
@@ -48,6 +48,7 @@ export const DefaultOrgForm: FC<Props> = ({
           weight={FontWeight.Bold}
           element={HeadingElement.H4}
           className="change-default-account-org--header"
+          testID="user-defaults-change-org--header"
         >
           Default Organization
         </Heading>
@@ -64,17 +65,21 @@ export const DefaultOrgForm: FC<Props> = ({
       >
         {accounts && (
           <UserProfileInput
-            status={ComponentStatus.Disabled}
             header="Account"
+            inputTestID="user-profile--current-account-input"
+            status={ComponentStatus.Disabled}
             text={loggedInAccount.name}
+            testID="user-profile--current-account-header"
           />
         )}
         {orgs && (
           <DefaultDropdown
-            entityLabel={EntityLabel.DefaultOrg}
             defaultEntity={selectedOrg}
+            defaultTestID="user-profile--default-org-dropdown"
+            entityLabel={EntityLabel.DefaultOrg}
             entityList={orgs}
             changeSelectedEntity={setSelectedOrg}
+            headerTestID="user-profile--default-org-header"
           />
         )}
       </FlexBox>
diff --git a/src/identity/components/userprofile/UserDefaults.tsx b/src/identity/components/userprofile/UserDefaults.tsx
@@ -141,6 +141,7 @@ export const UserDefaults: FC = () => {
           size={ComponentSize.Small}
           type={ButtonType.Submit}
           className="user-profile-page--save-button"
+          testID="user-profile--save-button"
         />
       </Form>
     )
diff --git a/src/identity/components/userprofile/UserDetails.tsx b/src/identity/components/userprofile/UserDetails.tsx
@@ -31,6 +31,7 @@ export const UserDetails: FC = () => {
         weight={FontWeight.Bold}
         element={HeadingElement.H4}
         className="user-details-container--header"
+        testID="user-profile--user-details-header"
       >
         User Details
       </Heading>
@@ -39,6 +40,8 @@ export const UserDetails: FC = () => {
         <UserProfileInput
           status={ComponentStatus.Disabled}
           header="Email"
+          inputTestID="user-profile--email-input"
+          testID="user-profile--email"
           text={user.email}
         />
         <FlexBox
@@ -49,11 +52,15 @@ export const UserDetails: FC = () => {
           <UserProfileInput
             status={ComponentStatus.Disabled}
             header="First name"
+            inputTestID="user-profile--firstname-input"
+            testID="user-profile--firstname"
             text={user.firstName}
           />
           <UserProfileInput
             status={ComponentStatus.Disabled}
             header="Last name"
+            inputTestID="user-profile--lastname-input"
+            testID="user-profile--lastname"
             text={user.lastName}
           />
         </FlexBox>
diff --git a/src/identity/components/userprofile/UserProfileInput.tsx b/src/identity/components/userprofile/UserProfileInput.tsx
@@ -8,8 +8,10 @@ import {ComponentStatus, InfluxColors, Input, Form} from '@influxdata/clockface'
 import 'src/identity/components/userprofile/UserProfile.scss'
 
 interface Props {
-  status: ComponentStatus
   header: string
+  inputTestID: string
+  status: ComponentStatus
+  testID: string
   text: string
 }
 
@@ -19,8 +21,23 @@ const inputStyle = {
   color: InfluxColors.White,
 }
 
-export const UserProfileInput: FC<Props> = ({status, header, text}) => (
-  <Form.Element label={header} className="user-profile-page--form-element">
-    <Input status={status} value={text} inputStyle={inputStyle} />
+export const UserProfileInput: FC<Props> = ({
+  header,
+  inputTestID,
+  status,
+  testID,
+  text,
+}) => (
+  <Form.Element
+    label={header}
+    className="user-profile-page--form-element"
+    testID={testID}
+  >
+    <Input
+      status={status}
+      value={text}
+      inputStyle={inputStyle}
+      testID={inputTestID}
+    />
   </Form.Element>
 )

Original file line number	Diff line number	Diff line change
`@@ -141,6 +141,7 @@ export const UserDefaults: FC = () => {`
`141`	`141`	`size={ComponentSize.Small}`
`142`	`142`	`type={ButtonType.Submit}`
`143`	`143`	`className="user-profile-page--save-button"`
	`144`	`+ testID="user-profile--save-button"`
`144`	`145`	`/>`
`145`	`146`	`</Form>`
`146`	`147`	`)`