[DURACOM-195] auth nav menu test WIP

4Science · Dec 5, 2023 · 2fa1f14 · 2fa1f14
1 parent e7d4b21
commit 2fa1f14
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -1,4 +1,4 @@
-<div class="navbar-nav mr-auto" *ngIf="!(isMobile$ | async); else mobileButtons">
+<div class="navbar-nav mr-auto" *ngIf="!(isMobile$ | async); else mobileButtons" data-test="auth-nav">
   <div *ngIf="!(isAuthenticated | async) && (showAuth | async)"
       class="nav-item"
       (click)="$event.stopPropagation();">
@@ -38,15 +38,17 @@
 
 
 <ng-template #mobileButtons>
-  <div *ngIf="!(isAuthenticated | async)">
+  <div *ngIf="!(isAuthenticated | async)" data-test="auth-nav">
     <a routerLink="/login" routerLinkActive="active" class="loginLink px-0.5" role="button">
       {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
     </a>
   </div>
-  <div *ngIf="(isAuthenticated | async)">
+  <div *ngIf="(isAuthenticated | async)" data-test="auth-nav">
     <a role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="logoutLink px-1">
       <i class="fas fa-sign-out-alt fa-lg fa-fw"></i>
       <span class="sr-only">(current)</span>
     </a>
   </div>
 </ng-template>
+
+<!-- Do not use ul/li in this menu as it breaks e2e accessibility tests -->
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts b/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
@@ -16,8 +16,9 @@ import { AuthTokenInfo } from '../../core/auth/models/auth-token-info.model';
 import { AuthService } from '../../core/auth/auth.service';
 import { of } from 'rxjs';
 import { BrowserOnlyMockPipe } from '../testing/browser-only-mock.pipe';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 
-describe('AuthNavMenuComponent', () => {
+fdescribe('AuthNavMenuComponent', () => {
 
   let component: AuthNavMenuComponent;
   let deNavMenu: DebugElement;
@@ -75,6 +76,7 @@ describe('AuthNavMenuComponent', () => {
               strictActionImmutability: false
             }
           }),
+          NgbDropdown,
           TranslateModule.forRoot()
         ],
         declarations: [
@@ -120,7 +122,7 @@ describe('AuthNavMenuComponent', () => {
         const navMenuSelector = '.navbar-nav';
         deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-        const navMenuItemSelector = 'li';
+        const navMenuItemSelector = '.nav-item';
         deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
       }));
       afterEach(() => {
@@ -158,7 +160,7 @@ describe('AuthNavMenuComponent', () => {
         const navMenuSelector = '.navbar-nav';
         deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-        const navMenuItemSelector = 'li';
+        const navMenuItemSelector = '.nav-item';
         deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
       }));
 
@@ -200,7 +202,7 @@ describe('AuthNavMenuComponent', () => {
           const navMenuSelector = '.navbar-nav';
           deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-          const navMenuItemSelector = 'li';
+          const navMenuItemSelector = '.nav-item';
           deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
         }));
 
@@ -210,7 +212,7 @@ describe('AuthNavMenuComponent', () => {
         });
 
         it('should render login dropdown menu', () => {
-          const loginDropdownMenu = deNavMenuItem.query(By.css('div.loginDropdownMenu'));
+          const loginDropdownMenu = deNavMenuItem.query(By.css('div#loginDropdownMenu'));
           expect(loginDropdownMenu.nativeElement).toBeDefined();
         });
       });
@@ -239,7 +241,7 @@ describe('AuthNavMenuComponent', () => {
           const navMenuSelector = '.navbar-nav';
           deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-          const navMenuItemSelector = 'li';
+          const navMenuItemSelector = '.nav-item';
           deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
         }));
 
@@ -309,10 +311,10 @@ describe('AuthNavMenuComponent', () => {
 
         fixture.detectChanges();
 
-        const navMenuSelector = '.navbar-nav';
+        const navMenuSelector = '[data-test="auth-nav"]';
         deNavMenu = fixture.debugElement.query(By.css(navMenuSelector));
 
-        const navMenuItemSelector = 'li';
+        const navMenuItemSelector = '.nav-item';
         deNavMenuItem = deNavMenu.query(By.css(navMenuItemSelector));
       }));