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

This commit is contained in:
Tim Donohue
2022-01-07 15:11:12 -06:00
parent cb91ccbc33
commit 794aa33c8f
12 changed files with 94 additions and 54 deletions

View File

@@ -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('ds-search-form button.search-button').click();
cy.get('[data-e2e="search-box"]').type(queryString);
cy.get('[data-e2e="search-button"]').click();
cy.url().should('include', '/search');
cy.url().should('include', 'query=' + encodeURI(queryString));
});

View File

@@ -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)
cy.get('ds-auth-nav-menu.navbar-collapsed').click();
// Click the "Log In" dropdown menu in header
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 ds-log-in-password input[type = "password"]').type(password);
cy.get('ds-themed-navbar ds-log-in-password input[type = "password"]').type('{enter}');
cy.get('ds-themed-navbar [data-e2e="email"]').type(email);
cy.get('ds-themed-navbar [data-e2e="password"]').type(password);
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
page.openLoginMenu();
// Open user menu, verify user menu & logout button now available
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
page.openLoginMenu();
// Open user menu, verify user menu & logout button now available
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');
});
});

View File

@@ -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');
});

View File

@@ -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(SEARCHFORM_ID + ' button.search-button').click();
cy.get('[data-e2e="search-box"]').type(queryString);
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
// TODO: These buttons should likely have an easier way to uniquely select
cy.get('#search-sidebar-content > ds-view-mode-switch > .btn-group > [href="/search?view=grid"] > .fas').click();
// Click button in sidebar to display grid view
cy.get('ds-search-sidebar [data-e2e="grid-view"]').click();
// <ds-search-page> tag must be loaded
cy.get('ds-search-page').should('exist');