Cypress test for login and signup

FullstackProsjekt/cypress.config.js

+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

FullstackProsjekt/cypress/e2e/login.cy.js

+describe('Login Component', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:5173/login') // Assuming your login page route is '/login'
+  })
+
+  it('should display login form', () => {
+    cy.get('h1#login').should('contain', 'Login')
+    cy.get('input[type="text"]').should('exist')
+    cy.get('input[type="password"]').should('exist')
+    cy.get('input[type="submit"]').should('exist')
+  })
+
+  it('should display error message for invalid login', () => {
+
+    
+    cy.get('input[type="text"]').type('invalidUsername')
+    cy.get('input[type="password"]').type('invalidPassword')
+    cy.get('input[type="submit"]').click()
+
+    cy.wait('@loginRequest')
+
+    cy.get('.error-message').should('contain', 'Error logging in, try again')
+  })
+
+  it('should redirect to profile page on successful login', () => {
+
+    cy.get('input[type="text"]').type('123')
+    cy.get('input[type="password"]').type('123')
+    cy.get('input[type="submit"]').click()
+
+    cy.wait('@loginRequest')
+
+    cy.url().should('include', '/profile')
+  })
+})

FullstackProsjekt/cypress/e2e/signup.cy.js

+describe('Signup Component', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:5173/signup')
+  })
+
+  it('should display signup form', () => {
+    cy.get('h1#signup').should('contain', 'Signup')
+    cy.get('input[type="text"]').should('exist')
+    cy.get('input[type="password"]').should('exist')
+    cy.get('.submit-btn').should('exist')
+  })
+
+  it('should show error message for invalid signup', () => {
+    cy.server()
+    cy.route({
+      method: 'POST',
+      url: '/auth/register',
+      status: 400,
+      response: { message: 'Username already exists' }
+    }).as('signupRequest')
+
+    cy.get('input[type="text"]').type('existingUsername')
+    cy.get('input[type="password"]').type('password')
+    cy.get('.submit-btn').click()
+
+    cy.wait('@signupRequest')
+
+    cy.get('.error-message').should('contain', 'Error signing up, try again')
+  })
+
+  it('should redirect to login page on successful signup', () => {
+    cy.server()
+    cy.route('POST', '/auth/register', {}).as('signupRequest')
+
+    cy.get('input[type="text"]').type('newUsername')
+    cy.get('input[type="password"]').type('password')
+    cy.get('.submit-btn').click()
+
+    cy.wait('@signupRequest')
+
+    cy.url().should('include', '/login')
+  })
+})

FullstackProsjekt/cypress/fixtures/example.json

+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

FullstackProsjekt/cypress/support/commands.js

+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file

FullstackProsjekt/cypress/support/e2e.js

+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
\ No newline at end of file

FullstackProsjekt/src/frontend/cypress/e2e/login.cy.js

+describe('Login Component', () => {
+    beforeEach(() => {
+        cy.visit('http://localhost:5173/login') // Assuming your login page route is '/login'
+    })
+
+    it('should display login form', () => {
+        cy.get('h1#login').should('contain', 'Login')
+        cy.get('input[type="text"]').should('exist')
+        cy.get('input[type="password"]').should('exist')
+        cy.get('input[type="submit"]').should('exist')
+    })
+
+    it('should display error message for invalid login', () => {
+
+
+        cy.get('input[type="text"]').type('invalidUsername')
+        cy.get('input[type="password"]').type('invalidPassword')
+        cy.get('input[type="submit"]').click()
+
+        cy.wait('@loginRequest')
+
+        cy.get('.error-message').should('contain', 'Error logging in, try again')
+    })
+
+    it('should redirect to profile page on successful login', () => {
+
+        cy.get('input[type="text"]').type('123')
+        cy.get('input[type="password"]').type('123')
+        cy.get('input[type="submit"]').click()
+
+        cy.wait('@loginRequest')
+
+        cy.url().should('include', '/profile')
+    })
+})

FullstackProsjekt/src/frontend/cypress/e2e/signup.cy.js

+describe('Signup Component', () => {
+    beforeEach(() => {
+        cy.visit('http://localhost:5173/signup')
+    })
+
+    it('should display signup form', () => {
+        cy.get('h1#signup').should('contain', 'Signup')
+        cy.get('input[type="text"]').should('exist')
+        cy.get('input[type="password"]').should('exist')
+        cy.get('.submit-btn').should('exist')
+    })
+
+    it('should show error message for invalid signup', () => {
+        cy.server()
+        cy.route({
+            method: 'POST',
+            url: '/auth/register',
+            status: 400,
+            response: { message: 'Username already exists' }
+        }).as('signupRequest')
+
+        cy.get('input[type="text"]').type('existingUsername')
+        cy.get('input[type="password"]').type('password')
+        cy.get('.submit-btn').click()
+
+        cy.wait('@signupRequest')
+
+        cy.get('.error-message').should('contain', 'Error signing up, try again')
+    })
+
+    it('should redirect to login page on successful signup', () => {
+        cy.server()
+        cy.route('POST', '/auth/register', {}).as('signupRequest')
+
+        cy.get('input[type="text"]').type('newUsername')
+        cy.get('input[type="password"]').type('password')
+        cy.get('.submit-btn').click()
+
+        cy.wait('@signupRequest')
+
+        cy.url().should('include', '/login')
+    })
+})

FullstackProsjekt/src/frontend/package.json

@@ -10,6 +10,7 @@
     "test:unit": "vitest",
     "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "cypress:open": "cypress open",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "format": "prettier --write src/"
   },