Frontend Cypress Test

.github/workflows/pr-check.yml

@@ -14,37 +14,37 @@ jobs:
       security-events: write
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
+      - name: Checkout repository
+        uses: actions/checkout@v2
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: 'javascript'
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: 'javascript'
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v1
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+      #- run: |
+      #   make bootstrap
+      #   make release
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1
 
   Backend:
     runs-on: ubuntu-latest
@@ -61,13 +61,10 @@ jobs:
         run: yarn install --prefer-offline --frozen-lockfile
       - name: Build
         working-directory: ./packages/backend
-        run:
-          yarn build
+        run: yarn build
       - name: Test
         working-directory: ./packages/backend
-        run:
-          yarn test
-
+        run: yarn test
 
   Frontend:
     runs-on: ubuntu-latest
@@ -84,10 +81,7 @@ jobs:
         run: yarn install --prefer-offline --frozen-lockfile
       - name: Test
         working-directory: ./packages/frontend
-        run:
-          yarn test
+        run: yarn test
       - name: Build
         working-directory: ./packages/frontend
-        run:
-          yarn build
-
+        run: yarn build

.gitignore

@@ -1,4 +1,5 @@
 # Please add IDE and OS specific files in a global gitignore on your system
 
 node_modules
+.vscode
 .eslintcache

packages/frontend/README.md

@@ -20,3 +20,33 @@ Running with Docker will ensure that users can quickly get environment up and ru
 2. Ensure you have Docker running. You can set it to run on device startup in Docker Desktop so you can forget about it. If you are unable to install Docker Desktop, you can use the command `dockerd` to start Docker.
 3. Build the Docker image using `docker build -f Dockerfile -t frontend .`
 4. Run `docker run -it -p 80:3000 frontend` to run the frontend in a docker container.
+
+# Testing with Cypress
+
+To start running tests, ensure Cypress is installed locally as a dev dependency.
+
+```bash
+$ yarn add cypress --dev
+```
+
+## Running tests
+
+There are two methods to run frontend integration tests.
+
+1. Run tests using Cypress Test Runner
+
+```bash
+$ yarn run cypress open
+```
+
+2. Run all tests from the command line
+
+```bash
+$ yarn run cypress run
+```
+
+## Configurations
+
+Current configurations set Cypress to not take screenshots on test fails nor capture video of tests during `yarn run cypress run`.
+
+To change or add to these configurations, modify `cypress.json`.

packages/frontend/cypress.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "video": false,
+  "screenshotOnRunFailure": false
+}

packages/frontend/cypress/fixtures/example.json

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

packages/frontend/cypress/integration/1.routes_spec.js

@@ -0,0 +1,22 @@
+//routers
+describe('Routing', () => {
+  // On first start up, routes to / if not signed in
+  it('visits /', () => {
+    cy.visit('/');
+  });
+
+  // Routes to /auth if not signed in
+  it('visits /auth', () => {
+    cy.visit('/auth');
+  });
+
+  // On first start up, routes to /account if signed in and has no house
+  it('visits /account', () => {
+    cy.visit('/auth');
+  });
+
+  // On first start up, routes to /dashboard if signed in and has a house
+  it('visits /dashboard', () => {
+    cy.visit('/home');
+  });
+});

packages/frontend/cypress/integration/2.landing_page_spec.js

@@ -0,0 +1,13 @@
+describe('Landing page', () => {
+  // should route to / (landing page)
+  it('visits /', () => {
+    cy.visit('/');
+  });
+
+  // login button routes to login page, /auth
+  it('login button navigates to login page', () => {
+    cy.get('[data-cy="login-button"]').click();
+    cy.url().should('include', '/auth');
+    cy.contains('LOGIN');
+  });
+});

packages/frontend/cypress/integration/3.sign_in_page_spec.js

@@ -0,0 +1,125 @@
+describe('Sign in page', () => {
+  const rand = Math.floor(Math.random() * (1000 - 100) + 100);
+  const email = `test${rand}@gmail.com`;
+
+  // clear all local storage before tests
+  // Should really perform resetting and seeding of database instead
+  beforeEach(() => {
+    indexedDB.deleteDatabase('firebaseLocalStorageDb');
+  });
+
+  // should route to /auth
+  it('should visits /auth', () => {
+    cy.visit('/auth');
+    cy.get('[data-cy="switch-button"]').click();
+  });
+
+  // =============== Sign up tests =================
+  // clicking on 'already have an account' should switch to the login inputs
+  it('switches to login content', () => {
+    cy.get('[data-cy="switch-button"]').click();
+    cy.url().should('includes', 'auth');
+    cy.get('[data-cy="name-input"]').should('not.exist');
+    cy.get('[data-cy="switch-button"]').click();
+  });
+
+  // if no email given, warning
+  it('gives warning if no email given', () => {
+    cy.get('[data-cy="submit-button"]').click();
+    cy.get('[data-cy="corner-alert"]').should('be.visible');
+  });
+
+  // if email does not contain @ (invalid), warning
+  it('gives warning if invalid email is given', () => {
+    cy.get('[data-cy="email-input"]').type('example');
+    cy.get('[data-cy="submit-button"]').click();
+    cy.get('[data-cy="corner-alert"]').should('be.visible');
+  });
+
+  // if no passwords given, warning
+  it('gives warning if no password given', () => {
+    cy.get('[data-cy="email-input"]').clear().type(email);
+    cy.get('[data-cy="password-input"]').clear();
+    cy.get('[data-cy="confirm-input"]').clear();
+    cy.get('[data-cy="submit-button"]').click();
+    cy.get('[data-cy="corner-alert"]').should('be.visible');
+  });
+
+  // if password given is too weak, warning
+  it('gives warning if password is too weak', () => {
+    cy.get('[data-cy="password-input"]').clear().type('test');
+    cy.get('[data-cy="confirm-input"]').clear().type('test');
+    cy.get('[data-cy="submit-button"]').click();
+    cy.get('[data-cy="corner-alert"]').should('be.visible');
+  });
+
+  // if confirmation password does not match, warning
+  it('gives warning if passwords does not match', () => {
+    cy.get('[data-cy="password-input"]').clear().type('password');
+    cy.get('[data-cy="confirm-input"]').clear().type('passwrod');
+    cy.get('[data-cy="submit-button"]').click();
+    cy.get('[data-cy="corner-alert"]').should('be.visible');
+  });
+
+  // if email given and passwords match, no warning
+  it('successfully signs up', () => {
+    cy.get('[data-cy="confirm-input"]').clear().type('password');
+    cy.get('[data-cy="submit-button"]').click();
+    cy.wait(8000);
+    // check that user should be redirected to their accounts page
+    cy.url().should('includes', '/account');
+    cy.wait(2000);
+  });
+
+  // =============== Login tests =================
+  // visit login
+  it('navigate back to login page', () => {
+    cy.visit('/auth');
+    cy.wait(2000);
+  });
+
+  // if no email given, warning
+  it('gives warning if no email given', () => {
+    cy.get('[data-cy="submit-button"]').click();
+    cy.get('[data-cy="corner-alert"]').should('be.visible');
+  });
+
+  // if email does not contain @ (invalid), warning
+  it('gives warning if invalid email is given', () => {
+    cy.get('[data-cy="email-input"]').type('example');
+    cy.get('[data-cy="submit-button"]').click();
+    cy.get('[data-cy="corner-alert"]').should('be.visible');
+  });
+
+  // if no passwords given, warning
+  it('gives warning if no password given', () => {
+    cy.get('[data-cy="email-input"]').clear().type(email);
+    cy.get('[data-cy="submit-button"]').click();
+    cy.get('[data-cy="corner-alert"]').should('be.visible');
+  });
+
+  // if not a user, warning
+  it('gives warning if not a user', () => {
+    cy.get('[data-cy="email-input"]').clear().type('[email protected]');
+    cy.get('[data-cy="password-input"]').type('password');
+    cy.get('[data-cy="submit-button"]').click();
+    cy.get('[data-cy="corner-alert"]').should('be.visible');
+  });
+
+  // if incorrect password, warning
+  it('gives warning if incorrect password given', () => {
+    cy.get('[data-cy="email-input"]').clear().type(email);
+    cy.get('[data-cy="password-input"]').type('passwrod');
+    cy.get('[data-cy="submit-button"]').click();
+    cy.get('[data-cy="corner-alert"]').should('be.visible');
+  });
+
+  // if email and password correct, no warning
+  it('successfully logs in', () => {
+    cy.get('[data-cy="password-input"]').clear().type('password');
+    cy.get('[data-cy="submit-button"]').click();
+    cy.wait(8000);
+    // check that user should be redirected to their accounts page
+    cy.url().should('includes', '/account');
+  });
+});

packages/frontend/cypress/integration/4.login_spec.js

@@ -0,0 +1,7 @@
+describe('Auth Page', () => {
+  it('move to signin page', () => {
+    cy.visit('/auth');
+    cy.get('[data-cy="switch-button"]').click();
+    cy.get('[data-cy="name-input"]').should('exist');
+  });
+});

packages/frontend/cypress/integration/5.manage_account_page_spec.js

@@ -0,0 +1,68 @@
+describe('Manage account page', () => {
+  const rand1 = Math.floor(Math.random() * (1000 - 0) + 0);
+  const rand2 = Math.floor(Math.random() * (2000 - 1000) + 1000);
+  const email1 = `test${rand1}@gmail.com`;
+  const email2 = `test${rand2}@gmail.com`;
+
+  it('initialise state - login to go to the authorised page', () => {
+    //clear all local storage before tests
+    indexedDB.deleteDatabase('firebaseLocalStorageDb');
+
+    // Sign Up
+    cy.visit('/auth');
+    cy.get('[data-cy="switch-button"]').click();
+
+    cy.get('[data-cy="email-input"]').type(email1);
+    cy.get('[data-cy="password-input"]').clear().type('password');
+    cy.get('[data-cy="confirm-input"]').type('password');
+    cy.get('[data-cy="submit-button"]').click();
+    cy.wait(5000);
+
+    //direct users to the account page
+    cy.url().should('includes', '/account');
+  });
+
+  it('click create button will show the createHouse modal', () => {
+    cy.get('[data-cy="create-button"]').click();
+    cy.get('[data-cy="create-house-modal"]').should('be.visible');
+  });
+
+  it('create house should close modal', () => {
+    cy.get('[data-cy="house-name-input"]').type(`test${rand1}`);
+    cy.get('[data-cy="house-address-input"]').type('test address');
+    cy.get('[data-cy="house-phone-input"]').type('021 123445');
+
+    cy.get('[data-cy="create-house-button"]').click();
+    //close the modal
+    cy.get('[data-cy="create-house-modal"]').should('not.be.visible');
+  });
+
+  it('initialise state - login to another account', () => {
+    //clear all local storage before tests
+    indexedDB.deleteDatabase('firebaseLocalStorageDb');
+
+    // Sign Up
+    cy.visit('/auth');
+    cy.get('[data-cy="switch-button"]').click();
+
+    cy.get('[data-cy="email-input"]').type(email2);
+    cy.get('[data-cy="password-input"]').clear().type('password');
+    cy.get('[data-cy="confirm-input"]').type('password');
+    cy.get('[data-cy="submit-button"]').click();
+    cy.wait(5000);
+
+    //direct users to the account page
+    cy.url().should('includes', '/account');
+  });
+
+  it('click join button should show the join house modal', () => {
+    cy.get('[data-cy="join-button"]').click();
+    cy.get('[data-cy="join-house-modal"]').should('be.visible');
+  });
+
+  it('submit house code should close the modal', () => {
+    cy.get('[data-cy="house-code-input"]').type(`test${rand1}`);
+    cy.get('[data-cy="join-house-button"]').click();
+    cy.get('[data-cy="join-house-modal"]').should('not.be.visible');
+  });
+});