Code Testing and Validation - guardian/support-frontend GitHub Wiki

Client-side Validation

We run our client-side code through two validation steps: ESLint and Flow. To run both checks together you can use:

yarn validate

Alternatively you can run them individually with the following commands:

yarn lint
yarn flow

ESLint is comprehensive. Chances are it'll suggest many changes. You can automate fixing many of those by committing your code first, then running yarn lint --fix. This will allow ESLint to edit your code and fix formatting, spacing, etc.

Using an IDE

If you plan to spend time writing client-side code it is strictly encouraged to spend some time configuring your IDE to automatically run eslint and flow in the background. This will help you catch and identify bugs and issues as you code rather than at the last time. You should be able to find extensions or options for both of these for your IDE of choice.

Client-side Unit Tests

We use Jest to handle our client-side tests. They can be run as follows:

yarn test

Jest Snapshots

We make use of Jest Snapshots in our testing, primarily for making sure Redux reducers are working correctly, but also in couple of other places. These are useful for making sure that code changes don't have unintended side effects. However, when you explicitly want to change the structure of the object that is snapshotted, you will also need to update the snapshot. This can be done with the following command:

yarn jest-update-snapshot

Server-side Unit Tests

To run the server-side tests use:

sbt test

Integration Tests

There are a number of integration tests in the project which talk to real services, these are useful for real end to end testing, but slow to run and prone to failures if any of the services are playing up.

These tests are tagged with either an @IntegrationTest annotation at the spec level or an IntegrationTest tag at the individual test level which allows us to run them selectively as follows:

sbt test - runs unit tests only and excludes integration tests.

sbt it:test - runs all tests including integration tests.

End-To-End Tests

We use Selenium to run end-to-end tests in the browser. These tests typically work their way through the various sign-up flows. To run them, launch identity-frontend and support-frontend locally and then use:

sbt selenium:test

If you want to test for a single test, use:

sbt "selenium:testOnly *TestNameSpec"