Skip to content

README.md

Latest commit

 

History

History
65 lines (43 loc) · 3.96 KB

README.md

File metadata and controls

65 lines (43 loc) · 3.96 KB

code style: prettier

Beacons Registration Webapp

The frontend application for the Beacons Registration service enables:

  • 406Mhz beacon owners to register their details with the Maritime & Coastguard Agency
  • Search and rescue Mission Control Centres to retrieve information about beacons during distress signal activations

This directory contains the frontend application of the service. It is built using NextJS and based on the GOV.UK Design System.

This application depends on the Beacons Registration API.

Local development

Follow the instructions in the root README to get started.

Testing

Our approach to testing:

  • Testing the rendering of React components. We use React testing library with Jest to ensure the rendered pages are what the user expects to see.
  • Testing logic. We segregate frontend logic from components by defining reusable TypeScript functions in src/lib/. Unit tests for these functions using Jest are in test/lib.
  • UI testing. We use Cypress to ensure the logic of the frontend matches the requirements.
  • End-to-end testing. We also use Cypress to test the user journey from end to end.

Running unit tests

  • npm run test -- Runs all unit tests in the test/ directory
  • npm run test:watch -- Runs unit tests in watch mode

Running UI tests

  • docker compose up -- Start the app in production mode.
  • npm run cypress:open -- Run Cypress tests in the cypress/integration directory with the Cypress Test Runner
  • npm run cypress:watch -- Run Cypress tests with the Test Runner, with Cypress watching test files for changes
  • npm run cypress:run -- Run Cypress tests in the cypress/integration directory in the command line
  • npm run cypress:run:firefox -- Run Cypress tests in the cypress/integration directory using Firefox (requires Firefox to be installed)

The UI tests are a part of our CI/CD pipeline.

Running end-to-end tests:

  • Bring up the: Service, Database and Webapp
  • Cypress needs the SESSION_TOKEN environment variable to be set
    • This value is set in env.local
    • The value is in 1Password
  • npm run cypress:open or npm run cypress:watch -- Run Cypress tests in the cypress/endToEnd directory with the Test Runner
  • npm run cypress:e2e -- Run Cypress tests in the cypress/endToEnd directory in the command line

The end-to-end tests are also a part of our CI/CD pipeline

  • They require the env vars SESSION_TOKEN, JWT_SECRET and WEBAPP_CLIENT_SECRET

    • These have been set as GitHub secrets in the repository

  • Currently, the values are the same as the ones used locally (.env.local)

    • They're listed in 1Password in case the local or repository values change

    Testing authentication pages:

  • If you are working on authentication pages, look at the auth documentation here.