This is the angular code for the VTM frontend application.
This is used by the DVSA staff to create and update technical records & test results.
Prerequisites:
- Node 18
- Git Secrets
To get setup on the project you can run: make init, make install and make run.
Then to run tests run:
make all
To just run the application run:
make run
To run the mock api run:
make api
To get different responses use custom VINs/IDs. Also see mock-api/mock-api-server.ts for more details about custom endpoints.
| Argument | Tech Record API | Test Record API |
|---|---|---|
.* |
200 | 200 |
notfound |
400 | 400 |
servererror |
500 | 500 |
delayok |
200 | - |
delayservererror |
500 | - |
HGV |
200 | - |
TRL |
200 | - |
- Run
npm install - Serve with
npm start - Find more commands with
npm run
The test coverage requirement for this project is 80% and automation tests can be found in a java project named cvs-vtm-auto
The framework used is Jest.
To run the test coverage run npm run test
This talks to the following backends:
- cvs-svc-technical-records
- cvs-svc-test-results
- cvs-svc-test-stations
- cvs-svc-test-types
cvs-app-vtm
create .env with environment variables required by Azure SSO. These variables will be used to update `environment.deploy.ts` using `setenv.ts` script by npm start script.
cvs-svc-technical-records
1. npm install
2. npm run tools-setup
3. build & start
Service is running on http:https://localhost:3005
For viewing the seed test data in the local dynamodb - `npm i -G dynamodb-admin`
DYNAMO_ENDPOINT=http:https://localhost:8003 npx dynamodb-admin
which exposes a dynamo admin web front-end on http:https://localhost:8001
cvs-svc-test-results
There is a Launch Chrome vscode debug configuration that will run ng serve and launch an instance of chrome. Initially you will get This site can’t be reached, but this will automatically refresh once the backgraound processes have finished starting up. Break points set within vscode will be hit while using this instance of chrome.
Storybook lets you view components without the rest of the application.
To run storybook:
npm run storybook
Then view it on localhost:6006.
This project aims to follow atomic design principles and is structured as follows:
Atoms - atoms make up everything these are the smallest core components e.g. Label
Molecules - molecules are made up of atoms and provide a more complex component e.g. Nav-Bar
Organisms - organisms are made up of molecules are showcase complex ideas/logic e.g. Calendar with Search logic
More information can be found here: https://bradfrost.com/blog/post/atomic-web-design/