Nova Samples Frontend

The frontend for the Samples system.

README Index

• Main README (You are here.)
• End to End tests
• Architectural Decision Records
• Testing and Debugging
• Unusual Behaviour of LLAMAS

Release Notes:

• LLAMAS CHANGELOG

Prerequisites

1. Connected to our private npm repository
2. Node ≥ 16 & NPM ≥ 8
3. Install the Flow Language Support VS Code extension (more here on VS Code configuration)

Getting Started

# Clone the repository
git clone [e-mail]:Anthony-Nolan/nova-samples-frontend.git
cd nova-samples-frontend

npm install
npm start

The UI should launch at http://localhost:3009/

Running against a local API backend

• Add a .env file to the root of the project, setting REACT_APP_API_BASE=http://localhost:5120/api
• Ensure that the backend is running on the same port (5120) as above. If not, the hardcoded authorisation config in index.js will need updating with your local port

Overriding feature flags

A system has been put in place by which the end to end tests can override feature flags on a per test basis. This can also be leveraged to enable manual testing with flag overrides.

This approach involves manually updating local storage in your browser.

To set up overrides, run the following in your browser's console:

const flagOverrides = {myFeatureFlag: true};
window.localStorage.setItem('anthonyNolanFeatureFlagOverrides', JSON.stringify(flagOverrides));

Tip: make sure myFeatureFlag is in camelCase (irrespective of the case displayed in Azure's app configuration).

These overrides will persist across sessions. To clear them, run the following:

window.localStorage.removeItem('anthonyNolanFeatureFlagOverrides');

Exporting classes/functional components

When exporting your classes/functional components, we are moving away from default exports and towards explicitly named exports. We are taking a gradual approach with this so there will be inconsistencies throughout the app. As we are refactoring as we go, if you find yourself working with a default export, please update this to be a named export.

Tests

How To Structure Your Tests

When writing a test, the top level describe summarises the thing we are testing. In unit tests, this would typically be the function name.

• For snapshot tests, this would typically be the component name.
• In e2e tests, this would usually be the piece of functionality we are testing. We then use it or test to state the conditions and the expected result. Within the top level describe we use nested describe blocks to narrow the scope.

Unit Tests

To run the tests locally:

npm run test

If the tests fail to run in your terminal, try a different one. They have run in CMD and Git Bash, but not in Cygwin.

The tests should be run locally - and any shapshots updated - before putting your work up for review.

End to end tests

End-to-End tests are a separate package within the end-to-end-tests directory.

See End to end test README

Notes

This project was bootstrapped with Create React App.

You can find the most recent version of the Create React App guide here.