Releasing v0.2.4

.eslintrc.yml

@@ -34,4 +34,5 @@ rules:
         react/jsx-key: warn,
         no-duplicate-imports: warn,
         no-mixed-spaces-and-tabs: warn,
+        cypress/no-unnecessary-waiting: off,
     }

.github/workflows/github-actions-demo.yml

@@ -1,36 +1,35 @@
 name: E2E Test for EMSE Portal
 on: [push]
 jobs:
-  cypress-run:
-    runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node: [ 16, 18 ]
-        browser: [ chrome, firefox ]
-        containers: [1, 2, 3]
-    name: E2E on ${{ matrix.browser }} on Node ${{ matrix.node }}
-    continue-on-error: true
-    steps:
-      - uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node }}
-      - uses: actions/checkout@v2
-      - name: Install dependencies
-        run: yarn
-      - name: Running tests
-        uses: cypress-io/github-action@v2
-        with:
-          start: yarn local
-          wait-on: 'http://localhost:3000'
-          browser: ${{ matrix.browser }}
-          record: true
-          tag: node-${{ matrix.node }}
-          command-prefix: "--"
-          parallel: true
-          group: 'E2E'
-        env:
-          # pass the Dashboard record key as an environment variable
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          # Recommended: pass the GitHub token lets this action correctly
-          # determine the unique run id necessary to re-run the checks
-          GITHUB_TOKEN: ${{ secrets.TOKEN }}
+    cypress-run:
+        runs-on: ubuntu-20.04
+        strategy:
+            matrix:
+                node: [16, 18]
+                browser: [chrome, firefox]
+        name: E2E on ${{ matrix.browser }} on Node ${{ matrix.node }}
+        continue-on-error: true
+        steps:
+            - uses: actions/setup-node@v1
+              with:
+                  node-version: ${{ matrix.node }}
+            - uses: actions/checkout@v2
+            - name: Install dependencies
+              run: yarn
+            - name: Running tests
+              uses: cypress-io/github-action@v4
+              with:
+                  config-file: cypress.config.js
+                  start: yarn dev
+                  wait-on: 'http://localhost:3000'
+                  browser: ${{ matrix.browser }}
+                  record: true
+                  tag: node-${{ matrix.node }}
+                  command-prefix: '--'
+                  group: 'E2E'
+              env:
+                  # pass the Dashboard record key as an environment variable
+                  CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+                  # Recommended: pass the GitHub token lets this action correctly
+                  # determine the unique run id necessary to re-run the checks
+                  GITHUB_TOKEN: ${{ secrets.TOKEN }}

Dockerfile

@@ -3,7 +3,7 @@ FROM node:18 as base
 WORKDIR /usr/src/app
 
 #copy folder director to docker container
-COPY package.json .env postcss.config.js tailwind.config.js webpack.config.js config-overrides.js cypress.json .eslintrc.yml ./
+COPY package.json .env postcss.config.js tailwind.config.js webpack.config.js config-overrides.js cypress.config.js .eslintrc.yml ./
 
 COPY ./public ./public
 

cypress.config.js

@@ -0,0 +1,30 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+	e2e: {
+		baseUrl: 'http://localhost:3000',
+		setupNodeEvents(on, config) {
+			on('task', {
+				log(message) {
+					console.log(message)
+
+					return null
+				},
+				table(message) {
+					console.table(message)
+
+					return null
+				},
+			})
+		},
+	},
+
+	projectId: '5szk9g',
+
+	component: {
+		devServer: {
+			framework: 'create-react-app',
+			bundler: 'webpack',
+		},
+	},
+})

cypress/component/Navbar.cy.js

@@ -0,0 +1,5 @@
+describe('Navbar.cy.js', () => {
+  it('playground', () => {
+    // cy.mount()
+  })
+})

cypress/integration/dashboard.spec.js → cypress/e2e/dashboard.cy.js

@@ -1,7 +1,7 @@
 describe('Load Dashboard screen', () => {
 	beforeEach(() => {
-		cy.visit('/dashboard')
-		cy.login('[email protected]', 'testing@12345')
+		cy.visit('/users/login')
+		cy.login()
 	})
 
 	it('should display the dashboard screen and the tiles', () => {

cypress/integration/portal.spec.js → cypress/e2e/portal.cy.js

@@ -1,7 +1,7 @@
 describe('Load Program screen', () => {
 	beforeEach(() => {
-		cy.visit('/portal')
-		cy.login('[email protected]', 'testing@12345')
+		cy.visit('/users/login')
+		cy.login()
 	})
 
 	it('should load the page after login', () => {

cypress/integration/ui/a11y.spec.js → cypress/e2e/ui/a11y.cy.js

@@ -1,5 +1,3 @@
-import jwt from 'jsonwebtoken'
-
 const terminalLog = (violations) => {
 	cy.task(
 		'log',
@@ -20,37 +18,23 @@ const terminalLog = (violations) => {
 	cy.task('table', violationData)
 }
 
-let token = localStorage.getItem('JWT')
-
 const routes = [
 	'dashboard',
 	'portal',
 	'program',
+	'program/61560592009b2b64008696c5',
 	'assignments',
 	'users/621faf87751282e60aa06d11',
 ]
 
-jwt.verify(token, 'JWT', (err, decoded) => {
-	if (err) {
-		console.log(err)
-	} else {
-		console.warn(decoded)
-		routes.push(`user/${decoded.id}`)
-	}
-})
-
-describe('Component accessibility test', () => {
+describe('Accessibility testing pages', () => {
 	routes.forEach((route) => {
-		const componentName = route.replace('.html', '')
-		const testName = `${componentName} has no detectable accessibility violations on load`
+		const testName = `${route} has no detectable accessibility violations`
 
 		it(testName, () => {
-			cy.visit('/users/login')
-			cy.login('[email protected]', 'testing@12345')
-			cy.log('Logged in')
-			cy.wait(5000)
+			cy.loginViaAPI()
 			cy.visit(route)
-			cy.wait(5000)
+			cy.wait(1500)
 			cy.injectAxe()
 
 			cy.get('body').each((element, index) => {

cypress/integration/ui/navbar.spec.js → cypress/e2e/ui/navbar.cy.js

@@ -1,7 +1,7 @@
 describe('navbar renders differently if user is logged in', () => {
 	it('navbar when logging in', () => {
 		cy.visit('/users/login')
-		cy.login('[email protected]', 'testing@12345')
+		cy.login()
 		cy.wait(2000)
 		cy.visit('/dashboard')
 		cy.get('aside').should('be.visible')
@@ -10,7 +10,7 @@ describe('navbar renders differently if user is logged in', () => {
 
 	it('navbar when logging out', () => {
 		cy.visit('/users/login')
-		cy.login('[email protected]', 'testing@12345')
+		cy.login()
 		cy.wait(2000)
 		cy.visit('/dashboard')
 		cy.get('aside').should('be.visible')

cypress/integration/ui/program.spec.js → cypress/e2e/ui/program.cy.js

@@ -6,8 +6,9 @@
 
 describe('Load Program screen', () => {
 	beforeEach(() => {
+		cy.visit('/users/login')
+		cy.login()
 		cy.visit('/program')
-		cy.login('[email protected]', 'testing@12345')
 	})
 
 	it('should display the program card', () => {})

cypress/integration/users/login.spec.js → cypress/e2e/users/login.cy.js

@@ -1,3 +1,6 @@
+import { decode, verify } from 'jsonwebtoken'
+import moment from 'moment'
+
 describe('Load Login screen', () => {
 	beforeEach(() => {
 		cy.visit('/users/login')
@@ -34,8 +37,18 @@ describe('Tests Login form', () => {
 	beforeEach(() => {
 		cy.visit('/users/login')
 	})
-	// we expect this case to fail since we haven't fixed ALMP-199
-	// TODO: Fix ALMP-199 and re-test this case
+
+	it('should redirect user if token in cookie is valid', () => {
+		cy.loginViaAPI(credentials.correctEmail, credentials.correctPassword)
+		cy.getCookie('JWT')
+			.should('exist')
+			.then((cookie) => {
+				const rawValue = decode(cookie.value)
+				expect(moment(rawValue.exp).isAfter(new Date())).to.be.true
+				expect(moment(rawValue.iat).isBefore(new Date())).to.be.true
+			})
+	})
+
 	it('should not display an error with email address in it', () => {
 		cy.login(credentials.incorrectEmail, credentials.incorrectPassword)
 		cy.get('div.Toastify__toast-body').should(
@@ -44,6 +57,16 @@ describe('Tests Login form', () => {
 		)
 	})
 
+	it('should display an error if email is incorrect', () => {
+		cy.login(credentials.incorrectEmail, credentials.correctPassword)
+		cy.get('div.Toastify__toast-body').should('exist')
+	})
+
+	it('should display an error if password is incorrect', () => {
+		cy.login(credentials.correctEmail, credentials.incorrectPassword)
+		cy.get('div.Toastify__toast-body').should('exist')
+	})
+
 	it('should not display an error if correct credentials are provided', () => {
 		cy.login(credentials.correctEmail, credentials.correctPassword)
 		cy.url().should('include', '/dashboard')

cypress/integration/users/register.spec.js → cypress/e2e/users/register.cy.js

@@ -18,7 +18,12 @@ describe('Load Register screen', () => {
 	it('should display the register form fields labels', () => {
 		cy.get('form label').should('exist')
 	})
+})
 
+describe('Registration form interaction', () => {
+	beforeEach(() => {
+		cy.visit('/users/register')
+	})
 	it('should display an error if you try to submit but fields are empty', () => {
 		cy.get('button[type=submit]').click()
 		cy.get('input:invalid').should('have.length.gt', 1)
@@ -44,7 +49,7 @@ describe('Load Register screen', () => {
 		cy.get('div.Toastify__toast-body').should('exist')
 	})
 
-	it('should not display an error if middle name is not entered', () => {
+	it('should allow empty middle name field', () => {
 		cy.register({
 			email: '[email protected]',
 			password: 'testing12345',
@@ -53,7 +58,7 @@ describe('Load Register screen', () => {
 		cy.get('div.Toastify__toast-body').should('not.exist')
 	})
 
-	it('login link should lead to login page', () => {
+	it('should lead users to login page on hyperlink click', () => {
 		cy.get('span')
 			.contains('Log in')
 			.parent()
@@ -66,15 +71,57 @@ describe('Load Register screen', () => {
 		cy.get('button[type=reset]').should('have.attr', 'disabled')
 	})
 
-	it('should lead to next form if not student', () => {
-		cy.register({ group: 'admin' })
+	it('should lead to personal information page if next button is clicked and user is not a student', () => {
+		cy.register({
+			email: '[email protected]',
+			password: 'testing@12345',
+			group: 'admin',
+		})
 		cy.then(() => {
 			cy.get('h1').should('contain', 'Personal information')
 		})
 	})
 
+	it('should match confirmation page information with the credentials entered', () => {
+		const credentials = {
+			firstName: 'John',
+			lastName: 'Doe',
+			email: '[email protected]',
+			password: 'testing@12345',
+			group: 'student',
+		}
+		cy.register(credentials)
+		cy.get('div.my-1 > span.font-bold').each(($el, index) => {
+			switch (index) {
+				case 0:
+					cy.wrap($el).should('contain', credentials.firstName)
+					break
+				case 1:
+					credentials.middleName
+						? cy.wrap($el).should('contain', credentials.middleName)
+						: cy.wrap($el).should('be.empty')
+					break
+				case 2:
+					cy.wrap($el).should('contain', credentials.lastName)
+					break
+				case 3:
+					cy.wrap($el).should('contain', credentials.email)
+					break
+				case 4:
+					cy.wrap($el).should('contain', credentials.group)
+					break
+				default:
+					break
+			}
+		})
+	})
+
 	it('should let students go backward from confirmation page', () => {
-		cy.register({ group: 'student' }).then(() => {
+		cy.register({
+			email: '[email protected]',
+			password: 'testing@12345',
+			group: 'student',
+		}).then(() => {
 			cy.get('h1')
 				.should('contain', 'Confirm account details')
 				.then(() => {
@@ -90,7 +137,6 @@ describe('Load Register screen', () => {
 		})
 	})
 
-	//TODO: We expect this to fail since this is an active bug ALMP-205
 	it('should display an error if email you are trying to register with not a valid email', () => {
 		cy.register({
 			email: 'dpapp001',
@@ -100,10 +146,3 @@ describe('Load Register screen', () => {
 		cy.get('input:invalid').should('have.length', 1)
 	})
 })
-
-//TODO: Break these cases up into separate test clusters
-// describe('Test Register form', () => {
-// 	beforeEach(() => {
-// 		cy.visit('/users/register')
-// 	})
-// })