Refactor to use "data-e2e" attributes in code to make selecting fields/buttons easier in e2e tests

cypress/integration/homepage.spec.ts

@@ -16,8 +16,8 @@ describe('Homepage', () => {
 
   it('should have a working search box', () => {
     const queryString = 'test';
-    cy.get('ds-search-form input[name="query"]').type(queryString);
+    cy.get('[data-e2e="search-box"]').type(queryString);
-    cy.get('ds-search-form button.search-button').click();
+    cy.get('[data-e2e="search-button"]').click();
     cy.url().should('include', '/search');
     cy.url().should('include', 'query=' + encodeURI(queryString));
   });

cypress/integration/login-modal.spec.ts

@@ -2,14 +2,18 @@ import { TEST_ADMIN_PASSWORD, TEST_ADMIN_USER, TEST_ENTITY_PUBLICATION } from 'c
 
 const page = {
     openLoginMenu() {
-        // Click the closed "Log In" dropdown menu (to open Login menu)
+        // Click the "Log In" dropdown menu in header
-        cy.get('ds-auth-nav-menu.navbar-collapsed').click();
+        cy.get('ds-themed-navbar [data-e2e="login-menu"]').click();
+    },
+    openUserMenu() {
+        // Once logged in, click the User menu in header
+        cy.get('ds-themed-navbar [data-e2e="user-menu"]').click();
     },
     submitLoginAndPasswordByPressingEnter(email, password) {
         // In opened Login modal, fill out email & password, then click Enter
-        cy.get('ds-themed-navbar ds-log-in-password input[type = "email"]').type(email);
+        cy.get('ds-themed-navbar [data-e2e="email"]').type(email);
-        cy.get('ds-themed-navbar ds-log-in-password input[type = "password"]').type(password);
+        cy.get('ds-themed-navbar [data-e2e="password"]').type(password);
-        cy.get('ds-themed-navbar ds-log-in-password input[type = "password"]').type('{enter}');
+        cy.get('ds-themed-navbar [data-e2e="password"]').type('{enter}');
     }
 };
 
@@ -24,8 +28,8 @@ describe('Login Modal', () => {
         cy.login(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD);
         cy.get('ds-log-in').should('not.exist');
 
-        // Open login menu again, verify user menu & logout button now available
+        // Open user menu, verify user menu & logout button now available
-        page.openLoginMenu();
+        page.openUserMenu();
         cy.get('ds-user-menu').should('be.visible');
         cy.get('ds-log-out').should('be.visible');
     });
@@ -41,8 +45,8 @@ describe('Login Modal', () => {
         page.submitLoginAndPasswordByPressingEnter(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD);
         cy.get('.form-login').should('not.exist');
 
-        // Open login menu again, verify user menu & logout button now available
+        //  Open user menu, verify user menu & logout button now available
-        page.openLoginMenu();
+        page.openUserMenu();
         cy.get('ds-user-menu').should('be.visible');
         cy.get('ds-log-out').should('be.visible');
     });
@@ -51,23 +55,15 @@ describe('Login Modal', () => {
         const ENTITYPAGE = '/entities/publication/' + TEST_ENTITY_PUBLICATION;
         cy.visit(ENTITYPAGE);
 
-        // Login menu should exist
-        cy.get('ds-log-in').should('exist');
-
         // Login, and the <ds-log-in> tag should no longer exist
         cy.login(TEST_ADMIN_USER, TEST_ADMIN_PASSWORD);
         cy.get('ds-log-in').should('not.exist');
 
         // Verify we are still on the same page
         cy.url().should('include', ENTITYPAGE);
-
-        // Open login menu again, verify user menu & logout button now available
-        page.openLoginMenu();
-        cy.get('ds-user-menu').should('be.visible');
-        cy.get('ds-log-out').should('be.visible');
     });
 
-    it('logout should work', () => {
+    it('should support logout', () => {
         cy.visit('/');
 
         cy.get('ds-log-in').should('exist');
@@ -85,4 +81,32 @@ describe('Login Modal', () => {
         cy.get('ds-log-in').should('exist');
         cy.get('ds-log-out').should('not.exist');
     });
+
+    it('should allow new user registration', () => {
+        cy.visit('/');
+
+        page.openLoginMenu();
+
+        // Registration link should be visible
+        cy.get('ds-themed-navbar [data-e2e="register"]').should('be.visible');
+
+        // Click registration link & you should go to registration page
+        cy.get('ds-themed-navbar [data-e2e="register"]').click();
+        cy.location('pathname').should('eq', '/register');
+        cy.get('ds-register-email').should('exist');
+    });
+
+    it('should allow forgot password', () => {
+        cy.visit('/');
+
+        page.openLoginMenu();
+
+        // Forgot password link should be visible
+        cy.get('ds-themed-navbar [data-e2e="forgot"]').should('be.visible');
+
+        // Click link & you should go to Forgot Password page
+        cy.get('ds-themed-navbar [data-e2e="forgot"]').click();
+        cy.location('pathname').should('eq', '/forgot');
+        cy.get('ds-forgot-email').should('exist');
+    });
 });

cypress/integration/search-navbar.spec.ts

@@ -1,15 +1,15 @@
 const page = {
     fillOutQueryInNavBar(query) {
         // Click the magnifying glass
-        cy.get('.navbar-container #search-navbar-container form a').click();
+        cy.get('ds-themed-navbar [data-e2e="header-search-icon"]').click();
         // Fill out a query in input that appears
-        cy.get('.navbar-container #search-navbar-container form input[name = "query"]').type(query);
+        cy.get('ds-themed-navbar [data-e2e="header-search-box"]').type(query);
     },
     submitQueryByPressingEnter() {
-        cy.get('.navbar-container #search-navbar-container form input[name = "query"]').type('{enter}');
+        cy.get('ds-themed-navbar [data-e2e="header-search-box"]').type('{enter}');
     },
     submitQueryByPressingIcon() {
-        cy.get('.navbar-container #search-navbar-container form .submit-icon').click();
+        cy.get('ds-themed-navbar [data-e2e="header-search-icon"]').click();
     }
 };
 
@@ -19,30 +19,45 @@ describe('Search from Navigation Bar', () => {
 
     it('should go to search page with correct query if submitted (from home)', () => {
         cy.visit('/');
+        // This is the GET command that will actually run the search
+        cy.intercept('GET', '/server/api/discover/search/objects*').as('search-results');
+        // Run the search
         page.fillOutQueryInNavBar(query);
         page.submitQueryByPressingEnter();
         // New URL should include query param
         cy.url().should('include', 'query=' + query);
+        // Wait for search results to come back from the above GET command
+        cy.wait('@search-results');
         // At least one search result should be displayed
         cy.get('ds-item-search-result-list-element').should('be.visible');
     });
 
     it('should go to search page with correct query if submitted (from search)', () => {
         cy.visit('/search');
+        // This is the GET command that will actually run the search
+        cy.intercept('GET', '/server/api/discover/search/objects*').as('search-results');
+        // Run the search
         page.fillOutQueryInNavBar(query);
         page.submitQueryByPressingEnter();
         // New URL should include query param
         cy.url().should('include', 'query=' + query);
+        // Wait for search results to come back from the above GET command
+        cy.wait('@search-results');
         // At least one search result should be displayed
         cy.get('ds-item-search-result-list-element').should('be.visible');
     });
 
     it('should allow user to also submit query by clicking icon', () => {
         cy.visit('/');
+        // This is the GET command that will actually run the search
+        cy.intercept('GET', '/server/api/discover/search/objects*').as('search-results');
+        // Run the search
         page.fillOutQueryInNavBar(query);
         page.submitQueryByPressingIcon();
         // New URL should include query param
         cy.url().should('include', 'query=' + query);
+        // Wait for search results to come back from the above GET command
+        cy.wait('@search-results');
         // At least one search result should be displayed
         cy.get('ds-item-search-result-list-element').should('be.visible');
     });

cypress/integration/search-page.spec.ts

@@ -2,21 +2,18 @@ import { Options } from 'cypress-axe';
 import { testA11y } from 'cypress/support/utils';
 
 describe('Search Page', () => {
-    // unique ID of the search form (for selecting specific elements below)
-    const SEARCHFORM_ID = '#search-form';
-
     it('should contain query value when navigating to page with query parameter', () => {
         const queryString = 'test query';
         cy.visit('/search?query=' + queryString);
-        cy.get(SEARCHFORM_ID + ' input[name="query"]').should('have.value', queryString);
+        cy.get('[data-e2e="search-box"]').should('have.value', queryString);
     });
 
     it('should redirect to the correct url when query was set and submit button was triggered', () => {
         const queryString = 'Another interesting query string';
         cy.visit('/search');
         // Type query in searchbox & click search button
-        cy.get(SEARCHFORM_ID + ' input[name="query"]').type(queryString);
+        cy.get('[data-e2e="search-box"]').type(queryString);
-        cy.get(SEARCHFORM_ID + ' button.search-button').click();
+        cy.get('[data-e2e="search-button"]').click();
         cy.url().should('include', 'query=' + encodeURI(queryString));
     });
 
@@ -51,9 +48,8 @@ describe('Search Page', () => {
     it('should pass accessibility tests in Grid view', () => {
         cy.visit('/search');
 
-        // Click to display grid view
+        // Click button in sidebar to display grid view
-        // TODO: These buttons should likely have an easier way to uniquely select
+        cy.get('ds-search-sidebar [data-e2e="grid-view"]').click();
-        cy.get('#search-sidebar-content > ds-view-mode-switch > .btn-group > [href="/search?view=grid"] > .fas').click();
 
         // <ds-search-page> tag must be loaded
         cy.get('ds-search-page').should('exist');

cypress/support/commands.ts

@@ -19,13 +19,13 @@ declare namespace Cypress {
  */
 function login(email: string, password: string): void {
     // Click the closed "Log In" dropdown menu (to open Login menu)
-    cy.get('ds-auth-nav-menu.navbar-collapsed').click();
+    cy.get('ds-themed-navbar [data-e2e="login-menu"]').click();
     // Enter email
-    cy.get('ds-themed-navbar ds-log-in-password input[type = "email"]').type(email);
+    cy.get('ds-themed-navbar [data-e2e="email"]').type(email);
     // Enter password
-    cy.get('ds-themed-navbar ds-log-in-password input[type = "password"]').type(password);
+    cy.get('ds-themed-navbar [data-e2e="password"]').type(password);
     // Click login button
-    cy.get('ds-themed-navbar ds-log-in-password button[type = "submit"]').click();
+    cy.get('ds-themed-navbar [data-e2e="login-button"]').click();
 }
 // Add as a Cypress command (i.e. assign to 'cy.login')
 Cypress.Commands.add('login', login);
@@ -37,11 +37,11 @@ Cypress.Commands.add('login', login);
  */
  function logout(): void {
     // Click the closed User dropdown menu (to open user menu in header)
-    cy.get('ds-auth-nav-menu.navbar-collapsed').click();
+    cy.get('ds-themed-navbar [data-e2e="user-menu"]').click();
     // This is the POST command that will actually log us out
     cy.intercept('POST', '/server/api/authn/logout').as('logout');
     // Click logout button
-    cy.get('ds-themed-navbar ds-log-out button').click();
+    cy.get('ds-themed-navbar [data-e2e="logout-button"]').click();
     // Wait until above POST command responds before continuing
     cy.wait('@logout');
 }

src/app/search-navbar/search-navbar.component.html

@@ -3,8 +3,8 @@
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
-             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1">
+             class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p-1" data-e2e="header-search-box">
-      <a class="submit-icon" [routerLink]="" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()">
+      <a class="submit-icon" [routerLink]="" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" data-e2e="header-search-icon">
         <em class="fas fa-search fa-lg fa-fw"></em>
       </a>
     </form>

src/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -1,7 +1,7 @@
 <ul class="navbar-nav" [ngClass]="{'mr-auto': (isXsOrSm$ | async)}">
   <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item"
       (click)="$event.stopPropagation();">
-    <div ngbDropdown #loginDrop display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
+    <div ngbDropdown #loginDrop display="dynamic" placement="bottom-right" class="d-inline-block" data-e2e="login-menu" @fadeInOut>
       <a href="javascript:void(0);" class="dropdownLogin px-1 " [attr.aria-label]="'nav.login' |translate" (click)="$event.preventDefault()" ngbDropdownToggle>
         {{ 'nav.login' | translate }}
       </a>
@@ -17,7 +17,7 @@
       {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
     </a>
   </li>
-  <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
+  <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item" data-e2e="user-menu">
     <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
       <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.logout' |translate" (click)="$event.preventDefault()" [title]="'nav.logout' | translate" class="px-1" ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></a>

src/app/shared/log-in/log-in.component.html

@@ -8,6 +8,6 @@
   </ng-container>
 
   <div class="dropdown-divider"></div>
-  <a class="dropdown-item" *ngIf="canRegister$ | async" [routerLink]="[getRegisterRoute()]">{{"login.form.new-user" | translate}}</a>
+  <a class="dropdown-item" *ngIf="canRegister$ | async" [routerLink]="[getRegisterRoute()]" data-e2e="register">{{"login.form.new-user" | translate}}</a>
-  <a class="dropdown-item" [routerLink]="[getForgotRoute()]">{{"login.form.forgot-password" | translate}}</a>
+  <a class="dropdown-item" [routerLink]="[getForgotRoute()]" data-e2e="forgot">{{"login.form.forgot-password" | translate}}</a>
 </div>

src/app/shared/log-in/methods/password/log-in-password.component.html

@@ -9,7 +9,8 @@
          formControlName="email"
          placeholder="{{'login.form.email' | translate}}"
          required
-         type="email">
+         type="email"
+         data-e2e="email">
   <label class="sr-only">{{"login.form.password" | translate}}</label>
   <input [attr.aria-label]="'login.form.password' |translate"
          autocomplete="off"
@@ -17,12 +18,13 @@
          placeholder="{{'login.form.password' | translate}}"
          formControlName="password"
          required
-         type="password">
+         type="password"
+         data-e2e="password">
   <div *ngIf="(error | async) && hasError" class="alert alert-danger" role="alert"
        @fadeOut>{{ (error | async) | translate }}</div>
   <div *ngIf="(message | async) && hasMessage" class="alert alert-info" role="alert"
        @fadeOut>{{ (message | async) | translate }}</div>
 
-  <button class="btn btn-lg btn-primary btn-block mt-3" type="submit"
+  <button class="btn btn-lg btn-primary btn-block mt-3" type="submit" data-e2e="login-button"
           [disabled]="!form.valid"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
 </form>

src/app/shared/log-out/log-out.component.html

@@ -2,5 +2,5 @@
 
   <div *ngIf="(error | async)" class="alert alert-danger" role="alert" @fadeOut>{{ error | async }}</div>
 
-  <button class="btn btn-lg btn-primary btn-block mt-3" (click)="logOut()"><i class="fas fa-sign-out-alt"></i> {{"logout.form.submit" | translate}}</button>
+  <button class="btn btn-lg btn-primary btn-block mt-3" (click)="logOut()" data-e2e="logout-button"><i class="fas fa-sign-out-alt"></i> {{"logout.form.submit" | translate}}</button>
 </div>

src/app/shared/search-form/search-form.component.html

@@ -4,10 +4,10 @@
             <div *ngIf="showScopeSelector === true" class="input-group-prepend">
                 <button class="scope-button btn btn-outline-secondary text-truncate" [ngbTooltip]="(selectedScope | async)?.name" type="button" (click)="openScopeModal()">{{(selectedScope | async)?.name || ('search.form.scope.all' | translate)}}</button>
             </div>
-            <input type="text" [(ngModel)]="query" name="query" class="form-control" attr.aria-label="{{ searchPlaceholder }}"
+            <input type="text" [(ngModel)]="query" name="query" class="form-control" attr.aria-label="{{ searchPlaceholder }}" data-e2e="search-box"
                    [placeholder]="searchPlaceholder">
             <span class="input-group-append">
-            <button type="submit" class="search-button btn btn-{{brandColor}}"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>
+            <button type="submit" class="search-button btn btn-{{brandColor}}" data-e2e="search-button"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>
         </span>
         </div>
     </div>

src/app/shared/view-mode-switch/view-mode-switch.component.html

@@ -6,7 +6,8 @@
        (click)="switchViewTo(viewModeEnum.ListElement)"
        routerLinkActive="active"
        [class.active]="currentMode === viewModeEnum.ListElement"
-       class="btn btn-secondary">
+       class="btn btn-secondary"
+       data-e2e="list-view">
           <i class="fas fa-list" title="{{'search.view-switch.show-list' | translate}}"></i>
     </a>
     <a *ngIf="isToShow(viewModeEnum.GridElement)"
@@ -16,7 +17,8 @@
        (click)="switchViewTo(viewModeEnum.GridElement)"
        routerLinkActive="active"
        [class.active]="currentMode === viewModeEnum.GridElement"
-       class="btn btn-secondary">
+       class="btn btn-secondary"
+       data-e2e="grid-view">
           <i class="fas fa-th-large" title="{{'search.view-switch.show-grid' | translate}}"></i>
     </a>
     <a *ngIf="isToShow(viewModeEnum.DetailedListElement)"
@@ -26,7 +28,8 @@
        (click)="switchViewTo(viewModeEnum.DetailedListElement)"
        routerLinkActive="active"
        [class.active]="currentMode === viewModeEnum.DetailedListElement"
-       class="btn btn-secondary">
+       class="btn btn-secondary"
+       data-e2e="detail-view">
       <i class="far fa-square" title="{{'search.view-switch.show-detail' | translate}}"></i>
     </a>
 </div>