Update e2e tests

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
rancher · Jan 23, 2025 · c5dff2b · c5dff2b
1 parent f1ee54a
commit c5dff2b
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 88 deletions.
diff --git a/cypress/e2e/po/side-bars/page-actions.po.ts b/cypress/e2e/po/side-bars/page-actions.po.ts
@@ -32,7 +32,7 @@ export default class PageActionsPo extends ComponentPo {
    * @returns {Cypress.Chainable}
    */
   private static pageActionsMenu(): Cypress.Chainable {
-    return cy.get('body').getId('page-actions-dropdown');
+    return cy.get('body').find('[dropdown-menu-collection]');
   }
 
   /**
@@ -41,7 +41,7 @@ export default class PageActionsPo extends ComponentPo {
    */
   links(): Cypress.Chainable {
     return PageActionsPo.open().then(() => {
-      PageActionsPo.pageActionsMenu().find('.user-menu-item');
+      PageActionsPo.pageActionsMenu().find('[dropdown-menu-item]');
     });
   }
 

diff --git a/cypress/e2e/po/side-bars/user-menu.po.ts b/cypress/e2e/po/side-bars/user-menu.po.ts
@@ -17,27 +17,14 @@ export default class UserMenuPo extends ComponentPo {
    *
    */
   private userMenuContainer() {
-    return this.self().get('.user-menu');
-  }
-
-  /**
-   * Our section within the transient userMenuContainer
-   */
-  userMenu(): Cypress.Chainable {
-    return this.self().getId(`user-menu-dropdown`);
+    return cy.get('body').find('[dropdown-menu-collection]');
   }
 
   /**
    * Open the user menu
-   *
-   * Multiple clicks because sometimes just one ... isn't enough
-   *
    */
   open(): Cypress.Chainable {
-    this.self().click();
-    this.self().click();
-    this.self().click();
-    this.self().click();
+    return cy.getId('nav_header_showUserMenu').should('be.visible').click();
   }
 
   /**
@@ -46,18 +33,13 @@ export default class UserMenuPo extends ComponentPo {
   isOpen() {
     // These should fail if `visibility: hidden` - https://docs.cypress.io/guides/core-concepts/interacting-with-elements#Visibility
     this.userMenuContainer().should('be.visible');
-    this.userMenu().should('be.visible');
   }
 
   ensureOpen() {
     // Check the user avatar icon is there
     this.checkVisible();
 
-    // Yep, these are _horrible_, but flakey user avatar tests have plagued us for months and no-one has yet fixed them
-    // This is a temporary step until that brave, tenacious champion of e2e resolves the underlying issue.
-    cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
     this.open();
-    cy.wait(1000); // eslint-disable-line cypress/no-unnecessary-waiting
 
     // Check the v-popper drop down is open, if not open it
     // This isn't a pattern we want to use often, but this area has caused us lots of issues
@@ -84,15 +66,15 @@ export default class UserMenuPo extends ComponentPo {
    * Check if menu is closed
    */
   isClosed() {
-    this.userMenu().should('not.exist');
+    this.userMenuContainer().should('not.exist');
   }
 
   /**
    * Get menu items
    * @returns
    */
   getMenuItems(): Cypress.Chainable {
-    return this.userMenu().find('li').should('be.visible').and('have.length', 4);
+    return this.userMenuContainer().find('[dropdown-menu-item]').should('be.visible').and('have.length', 3);
   }
 
   /**

diff --git a/pkg/rancher-components/src/components/RcDropdown/RcDropdown.vue b/pkg/rancher-components/src/components/RcDropdown/RcDropdown.vue
@@ -115,6 +115,7 @@ const applyShow = () => {
         ref="dropdownTarget"
         role="menu"
         aria-orientation="vertical"
+        dropdown-menu-collection
         :aria-label="ariaLabel || 'Dropdown Menu'"
       >
         <slot name="dropdownCollection">

diff --git a/shell/components/nav/Header.vue b/shell/components/nav/Header.vue
@@ -651,65 +651,66 @@ export default {
         </button>
       </div>
 
-      <header-page-action-menu v-if="showPageActions" />
-
-      <rc-dropdown :aria-label="t('nav.userMenu.label')">
-        <rc-dropdown-trigger
-          v-if="showUserMenu"
-          link
-          small
-          data-testid="nav_header_showUserMenu"
-        >
-          <img
-            v-if="principal && principal.avatarSrc"
-            :src="principal.avatarSrc"
-            :class="{'avatar-round': principal.roundAvatar}"
-            width="36"
-            height="36"
+      <div class="center-self">
+        <header-page-action-menu v-if="showPageActions" />
+        <rc-dropdown :aria-label="t('nav.userMenu.label')">
+          <rc-dropdown-trigger
+            v-if="showUserMenu"
+            link
+            small
+            data-testid="nav_header_showUserMenu"
           >
-          <i
-            v-else
-            class="icon icon-user icon-3x avatar"
-          />
-        </rc-dropdown-trigger>
-        <template #dropdownCollection>
-          <div class="user-info">
-            <div class="user-name">
-              <i class="icon icon-lg icon-user" /> {{ principal.loginName }}
-            </div>
-            <div class="text-small pt-5 pb-5">
-              <template v-if="principal.loginName !== principal.name">
-                {{ principal.name }}
-              </template>
+            <img
+              v-if="principal && principal.avatarSrc"
+              :src="principal.avatarSrc"
+              :class="{'avatar-round': principal.roundAvatar}"
+              width="36"
+              height="36"
+            >
+            <i
+              v-else
+              class="icon icon-user icon-3x avatar"
+            />
+          </rc-dropdown-trigger>
+          <template #dropdownCollection>
+            <div class="user-info">
+              <div class="user-name">
+                <i class="icon icon-lg icon-user" /> {{ principal.loginName }}
+              </div>
+              <div class="text-small pt-5 pb-5">
+                <template v-if="principal.loginName !== principal.name">
+                  {{ principal.name }}
+                </template>
+              </div>
             </div>
-          </div>
-          <rc-dropdown-separator />
-          <rc-dropdown-item
-            v-if="showPreferencesLink"
-            @click="$router.push({ name: 'prefs'})"
-          >
-            {{ t('nav.userMenu.preferences') }}
-          </rc-dropdown-item>
-          <rc-dropdown-item
-            v-if="showAccountAndApiKeyLink"
-            @click="$router.push({ name: 'account'})"
-          >
-            {{ t('nav.userMenu.accountAndKeys', {}, true) }}
-          </rc-dropdown-item>
-          <rc-dropdown-item
-            v-if="authEnabled && shouldShowSloLogoutModal"
-            @click="showSloModal"
-          >
-            {{ t('nav.userMenu.logOut') }}
-          </rc-dropdown-item>
-          <rc-dropdown-item
-            v-else-if="authEnabled"
-            @click="$router.push(generateLogoutRoute)"
-          >
-            {{ t('nav.userMenu.logOut') }}
-          </rc-dropdown-item>
-        </template>
-      </rc-dropdown>
+            <rc-dropdown-separator />
+            <rc-dropdown-item
+              v-if="showPreferencesLink"
+              @click="$router.push({ name: 'prefs'})"
+            >
+              {{ t('nav.userMenu.preferences') }}
+            </rc-dropdown-item>
+            <rc-dropdown-item
+              v-if="showAccountAndApiKeyLink"
+              @click="$router.push({ name: 'account'})"
+            >
+              {{ t('nav.userMenu.accountAndKeys', {}, true) }}
+            </rc-dropdown-item>
+            <rc-dropdown-item
+              v-if="authEnabled && shouldShowSloLogoutModal"
+              @click="showSloModal"
+            >
+              {{ t('nav.userMenu.logOut') }}
+            </rc-dropdown-item>
+            <rc-dropdown-item
+              v-else-if="authEnabled"
+              @click="$router.push(generateLogoutRoute)"
+            >
+              {{ t('nav.userMenu.logOut') }}
+            </rc-dropdown-item>
+          </template>
+        </rc-dropdown>
+      </div>
     </div>
   </header>
 </template>
@@ -843,7 +844,6 @@ export default {
 
     .rd-header-right {
       display: flex;
-      align-items: center;
       flex-direction: row;
       padding: 0;
 
@@ -912,7 +912,7 @@ export default {
         width: 40px;
       }
 
-      :deep() > div > .btn.role-tertiary {
+      :deep() div .btn.role-tertiary {
         border: 1px solid var(--header-btn-bg);
         border: none;
         background: var(--header-btn-bg);
@@ -1105,4 +1105,8 @@ export default {
       }
     }
   }
+
+  .center-self {
+    align-self: center;
+  }
 </style>
diff --git a/shell/components/nav/HeaderPageActionMenu.vue b/shell/components/nav/HeaderPageActionMenu.vue
@@ -24,11 +24,11 @@ const pageAction = (action: string) => {
 
 <template>
   <rc-dropdown :aria-label="t('nav.actionMenu.label')">
-    <rc-dropdown-trigger tertiary>
-      <i
-        data-testid="page-actions-menu"
-        class="icon icon-actions"
-      />
+    <rc-dropdown-trigger
+      tertiary
+      data-testid="page-actions-menu"
+    >
+      <i class="icon icon-actions" />
     </rc-dropdown-trigger>
     <template #dropdownCollection>
       <template