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,3 +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.contains('Log In').click();
+    cy.url().should('include', '/auth');
+    cy.contains('LOGIN');
+  });
+});

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

@@ -0,0 +1,127 @@
+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.contains('Click here to sign up').click();
+  });
+
+  // =============== Sign up tests =================
+  // clicking on 'already have an account' should switch to the login inputs
+  it('switches to login content', () => {
+    cy.contains('Already have an account?').click();
+    cy.url().should('includes', 'auth');
+    cy.contains('LOGIN').should('be.visible');
+    cy.contains('Click here to sign up').click();
+  });
+
+  // if no email given, warning
+  it('gives warning if no email given', () => {
+    cy.get('button').contains('Sign Up').click();
+    cy.contains('Please enter email').should('be.visible');
+  });
+
+  // if email does not contain @ (invalid), warning
+  it('gives warning if invalid email is given', () => {
+    cy.get('[aria-label="Email"]').type('example');
+    cy.get('button').contains('Sign Up').click();
+    cy.contains('Please enter a valid email').should('be.visible');
+  });
+
+  // if no passwords given, warning
+  it('gives warning if no password given', () => {
+    cy.get('[aria-label="Email"]').clear().type(email);
+    cy.get('[aria-label="Password"]').clear();
+    cy.get('[aria-label="Confirm password"]').clear();
+    cy.get('button').contains('Sign Up').click();
+    cy.contains('Please enter password').should('be.visible');
+  });
+
+  // if password given is too weak, warning
+  it('gives warning if password is too weak', () => {
+    const win = cy.state('window');
+    cy.get('[aria-label="Password"]').clear().type('test');
+    cy.get('[aria-label="Confirm password"]').clear().type('test');
+    cy.get('button').contains('Sign Up').click();
+    cy.contains('Please enter a stronger password').should('be.visible');
+  });
+
+  // if confirmation password does not match, warning
+  it('gives warning if passwords does not match', () => {
+    cy.get('[aria-label="Password"]').clear().type('password');
+    cy.get('[aria-label="Confirm password"]').clear().type('passwrod');
+    cy.get('button').contains('Sign Up').click();
+    cy.contains('Passwords must match').should('be.visible');
+  });
+
+  // if email given and passwords match, no warning
+  it('successfully signs up', () => {
+    cy.get('[aria-label="Confirm password"]').clear().type('password');
+    cy.get('button').contains('Sign Up').click();
+    cy.wait(5000);
+    // 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('button').contains('Login').click();
+    cy.contains('Please enter email').should('be.visible');
+  });
+
+  // if email does not contain @ (invalid), warning
+  it('gives warning if invalid email is given', () => {
+    cy.get('[aria-label="Email"]').type('example');
+    cy.get('button').contains('Login').click();
+    cy.contains('Please enter a valid email').should('be.visible');
+  });
+
+  // if no passwords given, warning
+  it('gives warning if no password given', () => {
+    cy.get('[aria-label="Email"]').clear().type(email);
+    cy.get('[aria-label="Password"]');
+    cy.get('button').contains('Login').click();
+    cy.contains('Please enter password').should('be.visible');
+  });
+
+  // if not a user, warning
+  it('gives warning if not a user', () => {
+    cy.get('[aria-label="Email"]').clear().type('[email protected]');
+    cy.get('[aria-label="Password"]').type('password');
+    cy.get('button').contains('Login').click();
+    cy.contains('No such user').should('be.visible');
+  });
+
+  // if incorrect password, warning
+  it('gives warning if incorrect password given', () => {
+    cy.get('[aria-label="Email"]').clear().type(email);
+    cy.get('[aria-label="Password"]').type('passwrod');
+    cy.get('button').contains('Login').click();
+    cy.contains('Wrong Password').should('be.visible');
+  });
+
+  // if email and password correct, no warning
+  it('successfully logs in', () => {
+    cy.get('[aria-label="Password"]').clear().type('password');
+    cy.get('button').contains('Login').click();
+    cy.wait(2000);
+    // 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.contains('Click here to sign up').click();
+    cy.contains('SIGN UP');
+  });
+});

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

@@ -0,0 +1,50 @@
+describe('Manage account page', () => {
+  const rand = Math.floor(Math.random() * (1000 - 100) + 100);
+  const email = `test${rand}@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.contains('Click here to sign up').click();
+
+    cy.get('[aria-label="Email"]').type(email);
+    cy.get('[aria-label="Password"]').clear().type('password');
+    cy.get('[aria-label="Confirm password"]').type('password');
+    cy.get('button').contains('Sign Up').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('button').contains('CREATE').click();
+    cy.contains('create your first flat').should('be.visible');
+  });
+
+  it('create house should close modal', () => {
+    cy.get('[aria-label="house name"]').type('test');
+    cy.get('[aria-label="house address"]').type('test address');
+    cy.get('[aria-label="phone number"]').type('021 123445');
+
+    cy.get('button').contains('Create!').click();
+    //close the modal
+    cy.contains('create your first flat').should('not.visible');
+  });
+
+  it('click join button should show the join house modal', () => {
+    cy.get('button').contains('JOIN').click();
+    cy.contains('Enter House Code').should('be.visible');
+  });
+
+  it('submit house code should close the modal', () => {
+    cy.get('[aria-label="House Code"]').type('test');
+    cy.get('button').contains('Submit').click();
+
+    cy.contains('Enter House Code').should('not.visible');
+    cy.contains('Joining the house...').should('be.visible');
+  });
+});