From 27bbd5698b9526bcc64f083cdd9b944900619365 Mon Sep 17 00:00:00 2001 From: Gleb Bahmutov Date: Tue, 6 Jun 2023 09:07:49 -0400 Subject: [PATCH] add verify credentials spec --- cypress/e2e/login/verify-credentials.cy.ts | 41 ++++++ cypress/e2e/misc/random-popup.cy.ts | 143 --------------------- src/index.jsx | 30 ----- 3 files changed, 41 insertions(+), 173 deletions(-) create mode 100644 cypress/e2e/login/verify-credentials.cy.ts delete mode 100644 cypress/e2e/misc/random-popup.cy.ts diff --git a/cypress/e2e/login/verify-credentials.cy.ts b/cypress/e2e/login/verify-credentials.cy.ts new file mode 100644 index 0000000..5f89743 --- /dev/null +++ b/cypress/e2e/login/verify-credentials.cy.ts @@ -0,0 +1,41 @@ +import { LoginPage } from '@support/pages/login.page' +// how can we stub this function called by the Login form page? +// verifyCredentials from 'src/utils/Credentials' +// plu we need to stub Constants from 'src/utils/Constants.js + +describe('Login form', () => { + // a fake user that normally cannot log in + // but we want to stub the verifyCredentials and VALID_USERNAMES + // to make this user work + const username = 'aUser' + const password = 'aPassword' + + it('calls verifyCredentials', () => { + // create a stub function that always returns true + // give this stub an alias "verify" + // https://on.cypress.io/stub + // https://on.cypress.io/as + // + // visit the login page + // and before the application loads its code + // set properties "window.VALID_USERNAMES" and + // "window.verifyCredentials" to our fake values + // https://on.cypress.io/visit + // Tip: use the "onBeforeLoad" method + // Tip 2: read these properties from the "window" object + // in your application code if they are set. + cy.visit('/', { + onBeforeLoad(win) {}, + }) + // fill the form with our test username info + cy.get(LoginPage.selectors.form).fillForm({ + [LoginPage.selectors.username]: username, + [LoginPage.selectors.password]: password, + }) + LoginPage.getLogin().click() + // we should be logged in and redirected to the inventory page + cy.location('pathname').should('equal', '/inventory.html') + // the stub aliased "verify" should have been called once by the application + // with the test username and password entered in the login form + }) +}) diff --git a/cypress/e2e/misc/random-popup.cy.ts b/cypress/e2e/misc/random-popup.cy.ts deleted file mode 100644 index de3b143..0000000 --- a/cypress/e2e/misc/random-popup.cy.ts +++ /dev/null @@ -1,143 +0,0 @@ -import { LoginPage } from '@support/pages/login.page' - -// before running this spec -// enable the modal popup in the "src/index.jsx" -// if (Math.random() < 1) { - -// this test will fail if the popup appears and blocks the form -it.skip('fills the login form', () => { - cy.visit('/') - // slowly type the username and the password values - // "username" and "password" - LoginPage.getUsername().type('username', { delay: 200 }) - LoginPage.getPassword().type('password', { delay: 100 }) - // confirm the username and the password input elements - // have the expected values we typed - LoginPage.getUsername().should('have.value', 'username') - LoginPage.getPassword().should('have.value', 'password') -}) - -it('closes a random popup', () => { - // visit the login page "/" - // https://on.cypress.io/visit - // which yields the window object - // create a new MutationObserver object to observe - // child list changes on the "window.document.body" node - // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver - cy.visit('/') - // slowly type the username and the password values - // "username" and "password" - LoginPage.getUsername().type('username', { delay: 200 }) - LoginPage.getPassword().type('password', { delay: 100 }) - // confirm the username and the password input elements - // have the expected values we typed - LoginPage.getUsername().should('have.value', 'username') - LoginPage.getPassword().should('have.value', 'password') -}) - -it('closes a random popup (window:load)', () => { - // subscribe to the "window:before:load" event - // create a new MutationObserver object to observe - // child list changes on the "window.document.body" node - // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver - cy.on('window:load', (window) => {}) - - // visit the login page "/" - // https://on.cypress.io/visit - cy.visit('/') - // slowly type the username and the password values - // "username" and "password" - LoginPage.getUsername().type('username', { delay: 200 }) - LoginPage.getPassword().type('password', { delay: 100 }) - // confirm the username and the password input elements - // have the expected values we typed - LoginPage.getUsername().should('have.value', 'username') - LoginPage.getPassword().should('have.value', 'password') -}) - -// enable only if the modal always appears during testing -describe.skip('popup appears', () => { - it('closes a random popup with window property confirmation', () => { - // subscribe to the "window:load" event - // create a new MutationObserver object to observe - // child list changes on the "window.document.body" node - // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver - cy.on('window:load', (window) => {}) - - // visit the login page "/" - // https://on.cypress.io/visit - cy.visit('/') - // slowly type the username and the password values - // "username" and "password" - LoginPage.getUsername().type('username', { delay: 200 }) - LoginPage.getPassword().type('password', { delay: 100 }) - // confirm the username and the password input elements - // have the expected values we typed - LoginPage.getUsername().should('have.value', 'username') - LoginPage.getPassword().should('have.value', 'password') - // confirm the popup was added and hidden (retries) - }) - - it('closes a random popup with object property confirmation', () => { - // use this object to flag the popup handled - const o = { - popupHandled: false, - } - // subscribe to the "window:load" event - // create a new MutationObserver object to observe - // child list changes on the "window.document.body" node - // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver - cy.on('window:load', (window) => {}) - - // visit the login page "/" - // https://on.cypress.io/visit - cy.visit('/') - // slowly type the username and the password values - // "username" and "password" - LoginPage.getUsername().type('username', { delay: 200 }) - LoginPage.getPassword().type('password', { delay: 100 }) - // confirm the username and the password input elements - // have the expected values we typed - LoginPage.getUsername().should('have.value', 'username') - LoginPage.getPassword().should('have.value', 'password') - // confirm the popup was added and hidden (retries) - }) - - it('closes a random popup with spy confirmation', () => { - // if we know the modal always appears, we can - // create a spy and give it an alias "modalClosed" - // https://on.cypress.io/spy - // https://on.cypress.io/as - - // repeat the same setup as in the previous test - cy.visit('/').then((window) => {}) - - // slowly type the username and the password values - // "username" and "password" - LoginPage.getUsername().type('username', { delay: 200 }) - LoginPage.getPassword().type('password', { delay: 100 }) - // confirm the username and the password input elements - // have the expected values we typed - LoginPage.getUsername().should('have.value', 'username') - LoginPage.getPassword().should('have.value', 'password') - - cy.log('**confirm the modal was hidden**') - // confirm the spy "modalClosed" was called once (retries) - }) - - it('waits for the modal to click close', () => { - cy.visit('/') - - // if the modal always appears, let's just wait for it - // and click the "close modal" element - cy.get('#close-modal').click() - // then type the username and the password values - // "username" and "password" - LoginPage.getUsername().type('username', { delay: 200 }) - LoginPage.getPassword().type('password', { delay: 100 }) - // confirm the username and the password input elements - // have the expected values we typed - LoginPage.getUsername().should('have.value', 'username') - LoginPage.getPassword().should('have.value', 'password') - }) -}) diff --git a/src/index.jsx b/src/index.jsx index 3300acc..77e1619 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -37,33 +37,3 @@ ReactDOM.render(routing, document.getElementById('root')) // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://cra.link/PWA serviceWorkerRegistration.register() - -/* istanbul ignore next */ -if (window.Cypress) { - // enable the popup in some situations - // by varying the float limit. 1 means the popup always appears - // 0 means the popup will never appear - if (Math.random() < 1) { - const delay = Cypress._.random(1000, 2000) - setTimeout(() => { - Cypress.$(document.body).append( - Cypress.$(` - - `), - ) - document.getElementById('close-modal').addEventListener('click', () => { - document.getElementById('modal').style.display = 'none' - }) - }, delay) - } -}