From f5a9b2e4cde7cb86934cd73d94654366d4fe5cda Mon Sep 17 00:00:00 2001 From: keannu125 Date: Tue, 16 May 2023 12:13:38 +0800 Subject: [PATCH] Polished E2E Cypress tests --- cypress/e2e/Login.cy.js | 90 ++++++++++++++++++++++++++++++++++++ cypress/e2e/Login.js | 38 --------------- cypress/e2e/Navigation.cy.js | 72 +++++++++++++++++++++++++++++ package-lock.json | 13 ++++++ package.json | 1 + 5 files changed, 176 insertions(+), 38 deletions(-) create mode 100644 cypress/e2e/Login.cy.js delete mode 100644 cypress/e2e/Login.js create mode 100644 cypress/e2e/Navigation.cy.js diff --git a/cypress/e2e/Login.cy.js b/cypress/e2e/Login.cy.js new file mode 100644 index 0000000..32e8e7a --- /dev/null +++ b/cypress/e2e/Login.cy.js @@ -0,0 +1,90 @@ +import "cypress-localstorage-commands"; +// Stuff needed for Logout test case +Cypress.Commands.add('login', () => { + cy.request({ + method: 'POST', + url: 'https://keannu125.pythonanywhere.com/api/v1/accounts/token/login', + body: { + username: user.username, + password: user.password + } + } + ) + .its('body') + .then(body => { + user.token = JSON.stringify(body.auth_token) + }) + }); + + +// Credentials +let user = { + username: 'test1', + password:'pastest1234', +} + +// URLs +// URL with hash is needed since we use hashrouter +let baseurl = 'http://localhost:3000/Ivy' +let urlhashrouter = baseurl + '#' + +describe('Test Scenario for Login', () => { + before(function fetchUser () { + cy.login() + cy.saveLocalStorage() + }) + +beforeEach(() => { + cy.restoreLocalStorage() + cy.visit(baseurl, { + onBeforeLoad: function (window) { + window.localStorage.setItem('token', user.token); + } + }) +}) + + it('Login Test Case', () => { + cy.visit(baseurl, { + onBeforeLoad: function (window) { + window.localStorage.clear(); + } + }) + + // Check if webpage is Ivy + cy.get('p').filter(':contains("Ivy")') + + // Check if login buttons exists and click + cy.get('button').contains('Login').click() + + // Verify if username is typed correctly + cy.get(':nth-child(2) > input') + .type(user.username) + .should('have.value', user.username) + + // Verify if password is typed correctly + cy.get(':nth-child(3) > input') + .type(user.password) + .should('have.value',user.password) + + // Click login button + cy.get('[style="display: flex; align-items: center; flex-direction: column;"] > :nth-child(4)') + .contains('Login').click() + + // Verify logged in user matches + cy.get('p').filter(':contains("Logged in as '+user.username+'")') + }) + it('Logout Test Case', () => { + + // Check if webpage is Ivy + cy.get('p').filter(':contains("Ivy")') + + // Verify logged in user matches + cy.get('p').filter(':contains("Logged in as '+user.username+'")') + + // Check if logout buttons exists and click + cy.get(':nth-child(6) > .MuiButtonBase-root').click() + + cy.location('href').should('eq',urlhashrouter+'/Login') + + }) +}) \ No newline at end of file diff --git a/cypress/e2e/Login.js b/cypress/e2e/Login.js deleted file mode 100644 index 9ac8100..0000000 --- a/cypress/e2e/Login.js +++ /dev/null @@ -1,38 +0,0 @@ - -describe('Test Case for Login', () => { - const user = { - username: 'test1', - password:'pastest1234' - } - beforeEach(() => { - cy.visit('http://localhost:3000/Ivy') - }) - - it('Verify login works', () => { - - // Check if webpage is Ivy - cy.get('[style="display: flex; flex-direction: row; width: 50%; justify-content: left; align-items: center; padding-left: 16px;"] > p') - .should('have.text','Ivy') - - // Check if login buttons exists and click - cy.get('button').contains('Login').click() - - // Verify if username is typed correctly - cy.get(':nth-child(2) > input') - .type(user.username) - .should('have.value', user.username) - - // Verify if password is typed correctly - cy.get(':nth-child(3) > input') - .type(user.password) - .should('have.value',user.password) - - // Click login button - cy.get('[style="display: flex; align-items: center; flex-direction: column;"] > :nth-child(4)') - .contains('Login').click() - - // Verify logged in user matches - cy.get('[style="display: flex; flex-direction: row; width: 50%; justify-content: right; align-items: center;"] > p') - .should('have.text',`Logged in as ${user.username}`) - }) -}) \ No newline at end of file diff --git a/cypress/e2e/Navigation.cy.js b/cypress/e2e/Navigation.cy.js new file mode 100644 index 0000000..86dd205 --- /dev/null +++ b/cypress/e2e/Navigation.cy.js @@ -0,0 +1,72 @@ +import "cypress-localstorage-commands"; + + +// For logging in +Cypress.Commands.add('login', () => { +cy.request({ + method: 'POST', + url: 'https://keannu125.pythonanywhere.com/api/v1/accounts/token/login', + body: { + username: user.username, + password: user.password + } + } +) +.its('body') +.then(body => { + user.token = JSON.stringify(body.auth_token) +}) +}); + +// Credentials +let user = { + username: 'test1', + password:'pastest1234', + token: '' + } + +// URLs +// URL with hash is needed since we use hashrouter +let baseurl = 'http://localhost:3000/Ivy' +let urlhashrouter = baseurl + '#' + + describe('Test Scenario for Navigation', () => { + before(function fetchUser () { + cy.login() + cy.saveLocalStorage() + }) + + beforeEach(() => { + cy.restoreLocalStorage() + cy.visit(baseurl, { + onBeforeLoad: function (window) { + window.localStorage.setItem('token', user.token); + } + }) + }) + it('Test Case: Homepage', () => { + cy.get('p').filter(':contains("Ivy")') + cy.location('href').should('eq',baseurl) + }) + it('Test Case: Home to Products', () => { + // To Products + cy.get('button').filter(':contains("Products")').click() + cy.location('href').should('eq',urlhashrouter+'/Products') + }) + it('Test Case: Home to Inventory', () => { + // To Inventory + cy.get('button').filter(':contains("Inventory")').click() + cy.location('href').should('eq',urlhashrouter+'/Inventory') + }) + it('Test Case: Home to Summary', () => { + // To Summary + cy.get('button').filter(':contains("Summary")').click() + cy.location('href').should('eq',urlhashrouter+'/ActivityToday') + }) + it('Test Case: Home to Logs', () => { + // To Logs + cy.get('button').filter(':contains("Logs")').click() + cy.location('href').should('eq',urlhashrouter+'/Logs') + }) + + }) \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 553e40d..6d15112 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,6 +43,7 @@ }, "devDependencies": { "cypress": "^12.12.0", + "cypress-localstorage-commands": "^2.2.3", "gh-pages": "^5.0.0" } }, @@ -7121,6 +7122,18 @@ "node": "^14.0.0 || ^16.0.0 || >=18.0.0" } }, + "node_modules/cypress-localstorage-commands": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/cypress-localstorage-commands/-/cypress-localstorage-commands-2.2.3.tgz", + "integrity": "sha512-EUEaHzbstw9AsEheIqr+RyXuxIzUS64nBBwl+Q4/mSdzfXpfcaV1nrHF+6H9zbTuFVTc+oWu6eC1l8aSjiWW6w==", + "dev": true, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "cypress": ">=2.1.0" + } + }, "node_modules/cypress/node_modules/@types/node": { "version": "14.18.46", "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.46.tgz", diff --git a/package.json b/package.json index 5795715..b6ed272 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ }, "devDependencies": { "cypress": "^12.12.0", + "cypress-localstorage-commands": "^2.2.3", "gh-pages": "^5.0.0" } }