Add test coverage

.github/workflows/build-pr.yml

@@ -1,4 +1,4 @@
-name: Build App on Pull Request
+name: Build and Test App in PRs
 'on':
   pull_request:
     branches:
@@ -7,6 +7,47 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
       - name: Build
         run: yarn && yarn build
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - name: Cache dependencies
+      id: cache-dependencies
+      uses: actions/cache@v3
+      with:
+        path: |
+          **/node_modules
+          **/.cache/Cypress
+          **/.cache/firebase/emulators
+        key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
+    - name: Install Dependencies
+      run: yarn
+    # - name: Cache emulators binary
+    #   uses: actions/cache@v3
+    #   with:
+    #     path: |
+    #       **/.cache/firebase/emulators
+    #     key: ${{ runner.os }}
+    - name: Install Cypress binary
+      run: npx cypress install
+      if: steps.cache-dependencies.outputs.cache-hit == 'true'
+    - name: Test
+      run: yarn ci
+      env:
+        REACT_APP_FIREBASE_API_KEY: ${{ secrets.FIREBASE_API_KEY }}
+        REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ secrets.FIREBASE_AUTH_DOMAIN }}
+        REACT_APP_FIREBASE_PROJECT_ID: ${{ secrets.FIREBASE_PROJECT_ID }}
+        REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ secrets.FIREBASE_STORAGE_BUCKET }}
+        REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.FIREBASE_MESSAGING_SENDER_ID }}
+        REACT_APP_FIREBASE_APP_ID: ${{ secrets.FIREBASE_APP_ID }}
+        NODE_ENV: development
+        REACT_APP_DATA_SOURCE: emulators

.github/workflows/pages-hosting-merge.yml

@@ -7,7 +7,13 @@ jobs:
   build_and_deploy:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
       - name: Deploy
         env:
           GIT_REPO: github.com/derekmborges/pairminator.git

.gitignore

@@ -24,4 +24,9 @@ yarn-error.log*
 
 .env
 .firebase/
-*debug.log*
+*.log
+
+# cypress
+cypress/screenshots/
+cypress/videos/
+cypress/downloads/

cypress.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: 'http://localhost:3000/pairminator#',
+    env: {
+      "NODE_ENV": "development",
+      "REACT_APP_DATA_SOURCE": "emulators",
+    }
+  },
+});

cypress/e2e/pairees.cy.ts

@@ -0,0 +1,69 @@
+import { v4 as uuidv4 } from 'uuid'
+
+describe('Pairees', () => {
+    beforeEach(() => {
+        cy.visit('/new')
+        cy.get('[data-cy=project-name]').type(uuidv4())
+        cy.get('[data-cy=project-password').type(uuidv4())
+        cy.get('[data-cy=submit]').click()
+    })
+
+    afterEach(() => {
+        cy.get('[data-cy=sign-out]').click()
+    })
+
+    it('allows user to add multiple pairees', () => {
+        const pairees = ['John', 'Stacey']
+        for (let pairee of pairees) {
+            cy.get('[data-cy=new-pairee-name').type(pairee)
+            cy.get('[data-cy=add-pairee]').click()
+            cy.get('[data-cy=new-pairee-alert]').should('have.text', 'Pairee added successfully')
+        }
+
+        cy.get('[data-cy=pairee-name]').should('have.length', 2)
+        cy.get('[data-cy=pairee-name]').each((label, i) => {
+            expect(label.text()).to.equal(pairees[i])
+        })
+    })
+
+    it('clears out pairee text field upon adding', () => {
+        cy.get('[data-cy=new-pairee-name').type('Somebody')
+        cy.get('[data-cy=add-pairee]').click()
+        cy.get('[data-cy=new-pairee-alert]').should('have.text', 'Pairee added successfully')
+        cy.get('[data-cy=new-pairee-name').should('have.value', '')
+    })
+
+    it('prevents user from adding pairee with the same name', () => {
+        const name = 'Alex'
+        cy.get('[data-cy=new-pairee-name').type(name)
+        cy.get('[data-cy=add-pairee]').click()
+        cy.get('[data-cy=new-pairee-alert]').should('have.text', 'Pairee added successfully')
+
+        cy.get('[data-cy=new-pairee-name').type(name)
+        cy.get('[data-cy=add-pairee]').click()
+
+        cy.get('[data-cy=pairee-add-error]').should('have.text', 'Pairee name already exists.')
+    })
+
+    // TODO: fix the delete modal bug and re-activate test
+    it.skip('allows user to delete a pairee', () => {
+        const pairees = ['John', 'Stacey']
+        for (let pairee of pairees) {
+            cy.get('[data-cy=new-pairee-name').type(pairee)
+            cy.get('[data-cy=add-pairee]').click()
+            cy.get('[data-cy=new-pairee-alert]').should('have.text', 'Pairee added successfully')
+        }
+        cy.get('[data-cy=pairee-name]').should('have.length', 2)
+        const paireeToDelete = pairees[0]
+
+        cy.get(`[data-cy=pairee-row-${paireeToDelete}]`).trigger('mouseover')
+        cy.get('[data-cy=pairee-delete-button]').click()
+
+        cy.get('[data-cy=delete-modal-text').should('have.text', `Remove ${paireeToDelete} from pairees?`)
+
+        cy.get('[data-cy=pairee-confirm-delete-button]').click()
+
+        cy.get('[data-cy=deleted-pairee-alert]').should('have.text', 'Pairee deleted successfully')
+        cy.get('[data-cy=pairee-name]').should('have.length', 1).should('have.text', pairees[1])
+    })
+})

cypress/e2e/pairs.cy.ts

@@ -0,0 +1,74 @@
+import { v4 as uuidv4 } from 'uuid'
+import { times } from 'lodash'
+
+describe('Pairs', () => {
+    beforeEach(() => {
+        cy.visit('/new')
+        cy.get('[data-cy=project-name]').type(uuidv4())
+        cy.get('[data-cy=project-password').type(uuidv4())
+        cy.get('[data-cy=submit]').click()
+    })
+
+    afterEach(() => {
+        cy.get('[data-cy=sign-out]').click()
+    })
+
+    const addPairees = (numPairees: number) => {
+        let pairees: string[] = []
+        times(numPairees, (n: number) => {
+            pairees.push(`Pairee${n + 1}`)
+        })
+        for (let pairee of pairees) {
+            cy.get('[data-cy=new-pairee-name').type(pairee)
+            cy.get('[data-cy=add-pairee]').click()
+            cy.get('[data-cy=new-pairee-alert]').should('have.text', 'Pairee added successfully')
+            cy.get('body').click() // Make toast disappear
+        }
+    }
+
+    it('allows user to assign pairs for even number of pairees', () => {
+        const expectedNumLanes = 2
+        addPairees(expectedNumLanes * 2)
+        cy.get('[data-cy=no-current-pairs-label').should('have.text', 'No pairs have been assigned yet.')
+
+        cy.get('[data-cy=assign-pairs-button]').click()
+
+        cy.get('[data-cy=lane-name]').should('have.length', expectedNumLanes)
+        cy.get('[data-cy=lane-name]').each((label, i) => {
+            const lane = i + 1
+            expect(label.text()).to.equal(`Lane ${lane}`)
+        })
+        cy.get(`[data-cy=pairee1-name]`).should('have.length', expectedNumLanes)
+        cy.get(`[data-cy=pairee2-name]`).should('have.length', expectedNumLanes)
+    })
+
+    it('allows user to assign pairs for odd number of pairees', () => {
+        const expectedNumLanes = 3
+        addPairees(expectedNumLanes * 2 - 1)
+        cy.get('[data-cy=no-current-pairs-label').should('have.text', 'No pairs have been assigned yet.')
+
+        cy.get('[data-cy=assign-pairs-button]').click()
+
+        cy.get('[data-cy=lane-name]').should('have.length', expectedNumLanes)
+        cy.get('[data-cy=lane-name]').each((label, i) => {
+            const lane = i + 1
+            expect(label.text()).to.equal(`Lane ${lane}`)
+        })
+        cy.get(`[data-cy=pairee1-name]`).should('have.length', expectedNumLanes)
+        cy.get(`[data-cy=pairee2-name]`).should('have.length', expectedNumLanes - 1)
+    })
+
+    it('allows user to record assigned pairs and see the assignment in the history', () => {
+        addPairees(2)
+        cy.get('[data-cy=no-current-pairs-label').should('have.text', 'No pairs have been assigned yet.')
+        cy.get('[data-cy=no-history-label]').should('have.text', 'Record pairs to see a recent history.')
+
+        cy.get('[data-cy=assign-pairs-button]').click()
+        cy.get('[data-cy=lane-name]').should('have.length', 1)
+
+
+        cy.get('[data-cy=record-pairs-button]').click()
+        cy.get('[data-cy=recorded-pairs-alert]').should('have.text', 'Pairs recorded')
+        cy.get('[data-cy=history-record]').should('have.length', 1)
+    })
+})

cypress/e2e/projects.cy.ts

@@ -0,0 +1,70 @@
+import { v4 as uuidv4 } from 'uuid'
+
+describe('Project Creation - Success', () => {
+    beforeEach(() => {
+        cy.visit('/new')
+    })
+
+    afterEach(() => {
+        cy.get('[data-cy=sign-out]').click()
+    })
+
+    it('allows user to create a new project', () => {
+        cy.get('[data-cy=page-header]').should('contain.text', 'Create a project')
+
+        const projectName = uuidv4()
+        cy.get('[data-cy=project-name]').type(projectName)
+
+        cy.get('[data-cy=project-password').type(uuidv4())
+
+        cy.get('[data-cy=submit]').click()
+
+        cy.location().should((location) => {
+            expect(location.href).to.eq('http://localhost:3000/pairminator#/dashboard')
+        })
+
+        cy.get('[data-cy=current-project-name]').should('have.text', projectName)
+    })
+})
+
+describe('Project Creation - Validation', () => {
+    beforeEach(() => {
+        cy.visit('/new')
+    })
+
+    it('form submit is disabled when either field is below minimum character requirement', () => {
+        cy.get('[data-cy=submit]').should('not.be.enabled')
+
+        cy.get('[data-cy=project-name]').type('1') // 1/2 chars
+        cy.get('[data-cy=submit]').should('not.be.enabled')
+
+        cy.get('[data-cy=project-password').type('12345') // 5/6 chars
+        cy.get('[data-cy=submit]').should('not.be.enabled')
+
+        cy.get('[data-cy=project-name]').type('12') // minimum 2 chars
+        cy.get('[data-cy=project-password').type('123456') // minimum 6 chars
+
+        cy.get('[data-cy=submit]').should('be.enabled')
+    })
+
+    it('prevents user from creating duplicate project name', () => {
+        cy.get('[data-cy=page-header]').should('contain.text', 'Create a project')
+
+        const projectName = uuidv4()
+        cy.get('[data-cy=project-name]').type(projectName)
+        cy.get('[data-cy=project-password').type(uuidv4())
+        cy.get('[data-cy=submit]').click()
+
+        cy.get('[data-cy=current-project-name]').should('have.text', projectName)
+        cy.get('[data-cy=sign-out]').click()
+
+        cy.get('[data-cy=create-project-button]').click()
+
+        // re-use same project name
+        cy.get('[data-cy=project-name]').type(projectName)
+        cy.get('[data-cy=project-password').type(uuidv4())
+        cy.get('[data-cy=submit]').click()
+
+        cy.get('[data-cy=new-project-error]').should('have.text', 'Project name is not available')
+    })
+})

cypress/support/commands.ts

@@ -0,0 +1,43 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts 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('logout', () => {
+    cy.get('[data-cy=sign-out]').click()
+})
+
+Cypress.Commands.add('login', (name, password) => {
+    // TODO: complete
+})
+//
+//
+// -- 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) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts 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')