Revalidation

This project was generated with Angular CLI version 16.1.6.

Pre requisite

• Clone this repo. Make sure you are running node v18 or above and then run npm install in order to get all dependencies. If you need to run multiple versions of node locally, the best approach is to use node version manager - https://github.com/nvm-sh/nvm

Development server

• Run npm run start for a dev server which will consume staging hosted BE endpoints. Navigate to http://localhost:4200/.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build. *NOTE on build you may encounter Error: Call retries were exceeded fix: node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build

Versioning

We adopt Semantic Versioning https://semver.org/ defined via version property in package.json. This needs to be incremented for each new release.

Coding Style

To ensure consistency across formatting of files, we use Prettier. Please ensure you setup your IDE using one of the following tutorials.

In case you haven't done this, there is also now a git-hook to ensure your code updates match the Prettier style:

• Webstorm: https://prettier.io/docs/en/webstorm.html
• VSCode: https://github.com/prettier/prettier
• Sublime: https://github.com/danreeves/sublime-prettier

When writing Cypress e2e tests, ensure you follow best practices (https://docs.cypress.io/guides/references/best-practices). In particular when cy.get() you should target data-cy properties on elements rather than using more vague selectors (e.g. id, element name etc.).

Git Hooks

Local Git Hooks are managed and maintained using Husky.

There is currently one pre-commit active githook in the project which can be found within package.json. This git hook runs;

1. Prettier: Ensures that the code follows the same style independant of developer. Prettier will restructure your code on every commit.
2. Linting: Ensures typescript and scss code is linted by running the ng lint script. Any errors occurred during linting will prevent the commit from completing

State Management

We are using NGXS for state management. The NGXS cli can be leveraged in order to auto generate files.

Example usage;

ngxs --name foo

Full options

--name name         Store name
--directory path    By default, the prompt is set to the current directory
--folder-name name  Use your own folder name, default: state
--spec boolean      Creates a spec file for store, default: true

Running unit tests

Run npm test or ng test to execute the unit tests via Karma.

Running end-to-end tests

Prequisite - set environment variables;

export CYPRESS_username=xxxxxxx
export CYPRESS_password=xxxxxxx
export CYPRESS_baseUrl=xxxxxxx

The Cypress e2e tests can be run;

• In headless mode in the electron browser via npm run cypress or
• In interactive mode utilising the Cypress Test Runner via npm run cypress:open .

For further info (click here)[https://docs.cypress.io/guides/guides/command-line.html#How-to-run-commands]

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.