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:
Prerequisites
- Connected to our private npm repository
- Node ≥ 16 & NPM ≥ 8
- Install the Flow Language Support VS Code extension (more here on VS Code configuration)
Getting Started
# Clone the repository
git clone git@github.com: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, settingREACT_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
ortest
to state the conditions and the expected result. Within the top leveldescribe
we use nesteddescribe
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.
Notes
This project was bootstrapped with Create React App.
You can find the most recent version of the Create React App guide here.