Merge pull request #470 from ruxailab/create-heuristic-e2e-test

[E2E TESTS] Generate auth utils + auth test + heuristic test

cypress.config.js

@@ -1,9 +1,16 @@
-const { defineConfig } = require("cypress");
+const { defineConfig } = require('cypress')
+require('dotenv').config()
 
 module.exports = defineConfig({
+  projectId: 'xmf2jf',
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },
   },
-});
+  env: {
+    // add environment variables here
+    ...process.env,
+    url: 'http://localhost:8080',
+  },
+})

cypress/e2e/auth.spec.cy.js

@@ -0,0 +1,67 @@
+const authUser = require('../fixtures/authUser.json')
+const url = Cypress.env('url')
+
+describe('Authentication Suite', () => {
+  describe('Registration', () => {
+    it('should allow a new user to register', () => {
+      cy.visit(url + '/signup')
+      const { email, password } = authUser
+      cy.get('form').findByLabelText(/e-mail/i).type(email)
+      cy.get('form').findByLabelText("Password").type(password)
+      cy.get('form').findByLabelText("Confirm your password").type(password)
+      cy.findByRole('button', {name: 'Sign-up'}).click()
+      cy.wait(500)
+      cy.contains(email)
+      cy.deleteUser(email, password)
+    })
+    it('should reject registration with invalid password', () => {
+      cy.visit(url + '/signup')
+      const { email, invalidPassword } = authUser
+      cy.get('form').findByLabelText(/e-mail/i).type(email)
+      cy.get('form').findByLabelText("Password").type(invalidPassword)
+      cy.get('form').findByLabelText("Confirm your password").type(invalidPassword)
+      cy.findByRole('button', {name: 'Sign-up'}).click()
+      cy.contains('Password must be at least 6 characters')
+    })
+    it('should reject registration when passwords do not match', () => {
+      cy.visit(url + '/signup')
+      const { email, password, invalidPassword } = authUser
+      cy.get('form').findByLabelText(/e-mail/i).type(email)
+      cy.get('form').findByLabelText("Password").type(password)
+      cy.get('form').findByLabelText("Confirm your password").type(invalidPassword)
+      cy.findByRole('button', {name: 'Sign-up'}).click()
+      cy.contains('Different passwords')
+    })
+  })
+  describe('Login', () => {
+    const { email, password } = authUser
+    beforeEach(() => {
+      cy.signup(email, password)
+      cy.logout()
+      cy.visit(url + '/signin')
+    })
+    afterEach(() => {
+      cy.deleteUser(email, password)
+    })
+    it('should allow a registered user to login', () => {
+      cy.get('form').findByLabelText(/e-mail/i).type(email)
+      cy.get('form').findByLabelText('Password').type(password)
+      cy.findByTestId('sign-in-button').click()
+      cy.wait(500)
+      cy.contains(email)
+    })
+    it('should reject login with incorrect password', () => {
+      const { email, password, invalidPassword } = authUser
+      cy.get('form').findByLabelText(/e-mail/i).type(email)
+      cy.get('form').findByLabelText('Password').type(invalidPassword)
+      cy.findByTestId('sign-in-button').click()
+      cy.contains('Incorrect password')
+    })
+    it('should reject login with unregistered email', () => {
+      cy.get('form').findByLabelText(/e-mail/i).type('[email protected]')
+      cy.get('form').findByLabelText('Password').type('noexist')
+      cy.findByTestId('sign-in-button').click()
+      cy.contains('Incorrect username or password')
+    })
+  })
+})

cypress/e2e/heuristic.spec.cy.js

@@ -0,0 +1,31 @@
+const heuristic = require('../fixtures/heuristic.json')
+const authUser = require('../fixtures/authUser.json')
+
+const url = Cypress.env('url')
+const { email, password } = authUser
+
+describe('Heuristic test Suite', () => {
+  before('Signup into the app', () => {
+    cy.deleteUser(email, password)
+    cy.signup(email, password)
+    cy.login(email, password)
+  })
+  after('Remove user', () => {
+    cy.deleteUser(email, password)
+  })
+  describe('Create Heuristic Test', () => {
+    it('should allow a new test to create', () => {
+      cy.visit(url + '/testslist')
+      cy.findByTestId('create-test-btn').click()
+      cy.findByText('Create a blank test').click()
+      cy.findByText('Usability Heuristic').click()
+
+      const { name, description } = heuristic
+      cy.findByLabelText(/Test name/i).type(name)
+      cy.findByLabelText(/Test Description/i).type(description)
+      cy.findByTestId('add-name-test-creation-btn').click()
+
+      cy.contains(/Manager/i)
+    })
+  })
+})

cypress/fixtures/authUser.json

@@ -0,0 +1,13 @@
+{
+  "email": "[email protected]",
+  "password": "ruxailab1234",
+  "invalidPassword": "123",
+  "data": {
+    "accessLevel": 1,
+    "email" : "[email protected]",
+    "myAnswers": {},
+    "myTests": {},
+    "notifications": []
+  },
+  "collection": "users"
+}

cypress/fixtures/heuristic.json

@@ -0,0 +1,4 @@
+{
+  "name": "Heuristic Test",
+  "description": "This is a test of the heuristic test"
+}

cypress/support/commands.js

@@ -22,4 +22,17 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import '@testing-library/cypress/add-commands'
+import { deleteUser,
+  logInWithEmailAndPassword,
+  logOut,
+  signUpWithEmailAndPassword }
+  from './commands/auth'
+
+
+Cypress.Commands.add('deleteUser', deleteUser)
+Cypress.Commands.add('login', logInWithEmailAndPassword)
+Cypress.Commands.add('logout', logOut)
+Cypress.Commands.add('signup', signUpWithEmailAndPassword)

cypress/support/commands/auth.js

@@ -0,0 +1,130 @@
+import { initializeApp } from 'firebase/app'
+import {
+  getAuth,
+  connectAuthEmulator,
+  deleteUser as deleteUserAuth,
+  signInWithEmailAndPassword,
+  signOut,
+  createUserWithEmailAndPassword,
+} from 'firebase/auth'
+import {
+  getFirestore,
+  connectFirestoreEmulator,
+  doc,
+  setDoc,
+  deleteDoc,
+} from 'firebase/firestore'
+
+const authUser = require('../../fixtures/authUser.json')
+
+const firebaseConfig = {
+  apiKey: Cypress.env('VUE_APP_FIREBASE_API_KEY'),
+  authDomain: Cypress.env('VUE_APP_FIREBASE_AUTH_DOMAIN'),
+  storageBucket: Cypress.env('VUE_APP_FIREBASE_STORAGE_BUCKET'),
+  projectId: Cypress.env('VUE_APP_FIREBASE_PROJECT_ID'),
+  appId: Cypress.env('VUE_APP_FIREBASE_APP_ID'),
+}
+
+const firebaseApp = initializeApp(firebaseConfig)
+const auth = getAuth(firebaseApp)
+const db = getFirestore(firebaseApp)
+if (window.Cypress) {
+  connectAuthEmulator(auth, 'http://localhost:9099')
+  connectFirestoreEmulator(db, 'localhost', 8081)
+}
+
+/**
+ * Delete the currently logged-in user
+ * @returns {Promise<void>}
+ */
+export const deleteUser = async (email, password) => {
+  try {
+    const { user } = await signInWithEmailAndPassword(auth, email, password)
+    const { collection } = authUser
+    await deleteDocById(collection, user.uid)
+    await deleteUserAuth(user)
+    console.info(`Deleted user with ID "${user.uid}"`)
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+/**
+ * Log in with email and password
+ * @param email
+ * @param password
+ * @returns {Promise<void>}
+ */
+export const logInWithEmailAndPassword = async (email, password) => {
+  try {
+    await signInWithEmailAndPassword(auth, email, password).then(() => {
+      console.info(`Logged in as "${email}"`)
+    })
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+/**
+ * Log out the currently logged-in user
+ * @returns {Promise<void>}
+ */
+export const logOut = async () => {
+  try {
+    await signOut(auth).then(() => {
+      console.info('Logged out')
+    })
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+/**
+ * Sign up with email and password
+ * @param email
+ * @param password
+ * @returns {Promise<void>}
+ */
+export const signUpWithEmailAndPassword = async (email, password) => {
+  try {
+    const { user } = await createUserWithEmailAndPassword(auth, email, password)
+    console.info(`Signed up as "${email}" with user ID "${user.uid}"`)
+    const { data, collection } = authUser
+    await createDoc(collection, user.uid, data)
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+/**
+ * Create a document in a collection
+ * @param col
+ * @param docId
+ * @param data
+ * @returns {Promise<void>}
+ */
+export const createDoc = async (col, docId, data) => {
+  try {
+    const ref = doc(db, `${col}/${docId}`)
+    await setDoc(ref, data)
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+/**
+ * Delete a document by ID
+ * @param col
+ * @param docId
+ * @returns {Promise<void>}
+ */
+export const deleteDocById = async (col, docId) => {
+  try {
+    const ref = doc(db, `${col}/${docId}`)
+    await deleteDoc(ref)
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+

jsconfig.json

@@ -3,6 +3,7 @@
     "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"]
-    }
+    },
+    "types": ["cypress", "@testing-library/cypress"]
   }
 }

package.json

@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "@intlify/vue-i18n-loader": "^1.1.0",
+    "@testing-library/cypress": "^10.0.1",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "12",
@@ -60,7 +61,7 @@
     "@vue/test-utils": "^1.3.0",
     "babel-eslint": "^8.2.6",
     "babel-plugin-transform-require-context": "^0.1.1",
-    "cypress": "^13.7.3",
+    "cypress": "^13.8.1",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "jsdoc": "^3.6.11",

src/views/admin/CreateBlankView.vue

@@ -169,6 +169,7 @@
                     color="orange"
                     class="ml-auto mr-2 circleOrange"
                     @click="validate()"
+                    data-testid="add-name-test-creation-btn"
                   >
                     <v-icon x-large>
                       mdi-arrow-right

src/views/admin/DashboardView.vue

@@ -16,6 +16,7 @@
           v-bind="attrs"
           @click="goToCreateTestRoute()"
           v-on="on"
+          data-testid="create-test-btn"
         >
           <v-icon large>
             mdi-plus

src/views/public/SignInView.vue

@@ -34,6 +34,7 @@
               </v-form>
               <v-card-actions class="justify-center mt-4">
                 <v-btn
+                  data-testid="sign-in-button"
                   color="#F9A826"
                   rounded
                   class="white--text"