Polished E2E Cypress tests

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')
+
+  })
+})

cypress/e2e/Login.js

@@ -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}`)
-  })
-})

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')
+    })
+
+  })

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",

package.json

@@ -65,6 +65,7 @@
   },
   "devDependencies": {
     "cypress": "^12.12.0",
+    "cypress-localstorage-commands": "^2.2.3",
     "gh-pages": "^5.0.0"
   }
 }