Skip to content

README.md

Latest commit

 

History

History
115 lines (76 loc) · 4.17 KB

README.md

File metadata and controls

115 lines (76 loc) · 4.17 KB

National Document Repository User Interface

Intro

The National Document Repository user interface (UI) has been developed with React. This is a developer's guide to run the UI and tools locally.

Requirements

  • Node: Version 24.x
  • NPM: this should come installed with Node but if not version 11.4.1 or greater is recommended.
  • Browser: Of your choice, although Chrome has better development tools.

Setup

1. Set Env Variables

In the app/ directory create a .env file by duplicating the .env.template and adding any missing values. This file is sourced to your shell env so make sure it doesn't have any extra whitespace, comments etc. The local environment variable will allow your local app to bypass auth and mock most lambda requests.

2. Local

To run the UI, the team has created a Makefile in the route directory, on your first run you will need to install the required node packages for the app through a command line interface (CLI)..

make install

After modules have installed you need to install pdfjs with the following command

make install-pdfjs

Once the packages have been installed, you can then run the app through the following command

make start

Once everything is up and running you should see a prompt in the CLI that the app is running on http://localhost:xxxx, where xxxx is the value of PORT specified in .env file. You should now be able to visit the site in a browser of your choice.

Testing

1. UI Tests

You can run the unit tests for the app Vitest by running

make test-ui

These tests are run against each *.test.tsx file, which should generally be written per component when extending the app. The applications unit tests will also run automatically every-time a push is made via git.

2. E2E Tests

There are also Cypress end-to-end tests written against each user journey and it's functionality.

Before running the E2E tests, please make sure you have got the value CYPRESS_BASE_URL=http://localhost:xxxx set up in your .env file.
You can then start the E2E tests by running

make cypress-open

If you wish to run a CLI only test run, you can use the following command

make cypress-run

This will open a new Chromium window with the options to either run the E2E tests or Component tests

3. Smoke Tests

Smoke tests are a subset of E2E tests that run against a real deployed environment. They live under cypress/e2e/1-ndr-smoke-tests/.

Before running smoke tests, all of the following environment variables must be set in your .env file. Tests will fail without them:

Environment Variable Description
CYPRESS_BASE_URL URL of the deployed environment to test against, e.g. https://ndr-dev.access-request-fulfilment.patient-deductions.nhs.uk/
CYPRESS_KEY Mock CIS2 key used to authenticate on the login page
CYPRESS_ODSCODE ODS code of the practice to log in as, e.g. H81109 or M85143
CYPRESS_WORKSPACE Workspace name used to resolve patient fixture data, e.g. ndr-dev, sandbox
AWS_ACCESS_KEY_ID AWS access key used to seed DynamoDB/S3 test data
AWS_SECRET_ACCESS_KEY AWS secret key used to seed DynamoDB/S3 test data
AWS_SESSION_TOKEN AWS session token — required when using temporary credentials (e.g. assumed role)
AWS_REGION AWS region, defaults to eu-west-2 if not set
CYPRESS_OUTPUT_VIDEO Set to any value to enable Cypress video recording of test runs

You can then run the smoke tests by running

make cypress-open

If you wish to run a CLI only test run, you can use the following command

make cypress-run

Accessibility

  • WAVE Chrome extension
  • Use a screen reader
  • Use keyboard navigation
  • Use NHS components rather than custom styling

Design

The UI follows the guidelines specified in the NHS Service Manual. To help achieve this, we utilise the UI components provided by the nhsuk-frontend package.