Skip to content
This repository was archived by the owner on Dec 28, 2021. It is now read-only.

Frontend Testing Guide

Jump to bottom
Shaii Ong edited this page May 7, 2020 · 1 revision

This testing guide something I put together for the EssayJack team. Leaving it here for reference.

This is a guide to testing in our current test environment. For more information on testing, in general, please check out the appendix

Cypress

Main purpose is for end-to-end testing.

When to use

Create a Cypress test when testing UX critical flows such as:

  1. App signup/signin
  2. Subscription and payment
  3. Core functionality like the essay editor

When you are not sure

  • if you want to test the presence of a UI element, use a component test
  • if you want to test whether your button caused data to update, test the reducer
  • if you want to test whether interacting with your element triggered the correct action, test the action creator

Folder structure and test placement

  • Cypress tests can be placed ejb/frontend/cypress/integration
  • Our cypress tests are organised in different folders based on roles and specific lti institutions

Examples of where to put your tests:

Feature description Directory to place test file
Feature created for educators ejb/frontend/cypress/integration/educator
Feature affects users with any role ejb/frontend/cypress/integration/global

How to run cypress tests

  • bin/run_cypress

Documentation reference

Jest

We use Jest for unit testing certain things in our code:

  1. action creators
  2. reducers
  3. component UI

How to run jest tests

  • cd frontend
  • yarn test

Naming and placement of tests examples

File to test Test file name Placement of test file
/features/main_dashboard/actions.js /features/main_dashboard/actions.unit.test.js right next to file to test
/features/main_dashboard/reducers.js /features/main_dashboard/reducers.unit.test.js right next to file to test
/components/datagrid/Datagrid.js /components/datagrid/Datagrid.unit.test.js right next to file to test

Testing action creators

From the Docs:

When testing action creators, we want to test whether the correct action creator was called and also whether the right action was returned

Documentation reference

Testing reducers

A reducer should return the new state after applying the action to the previous state, and that's the behavior tested

Documentation reference

Testing Regular Component (UI)

We use shallow rendering of components and snapshots to test UI elements.

Documentation reference

Testing connected components

A connected component is one that is output from the connect function of the react-redux library. In order to test the unwrapped component, you must first export it on it's own.

Documentation reference

Appendix

General Unit Testing best practices

Clone this wiki locally