et-syr

Getting Started

Running the application requires the following tools to be installed in your environment:

• Node.js v18.6.0 or later
• yarn
• Docker

Running the application

Install dependencies by executing the following command:

$ yarn install

Bundle:

$ yarn webpack

Run:

$ yarn start

Run Dev Mode:

$ yarn start:dev

Run Dev Mode With Redis server:

$ yarn start:dev-red

Before starting the app, create a new case by using claimant journey (et-sya-api, https://localhost:3002). Use caseReferenceId and connect to this app by using the link https://localhost:3003/response-hub/{{caseReferenceId}}?lng=en

For now it doesn't have a home page as we are waiting for UX Design details.

Running with Docker

Create docker image:

  docker-compose build

Run the application by executing the following command:

  docker-compose up

This will start the frontend container exposing the application's port (set to 3003 in this template app).

In order to test if the application is up, create a new case by using claimant journey (et-sya-api, https://localhost:3002). Use caseReferenceId and connect to this app by using the link https://localhost:3003/response-hub/{{caseReferenceId}}?lng=en

You should get a very basic response hub page.

For now it doesn't have a home page as we are waiting for UX Design details.

Running with CFTLIB

As CFTLIB may have different ports for IDAM API we need to have the following environment variables defined

IDAM_WEB_URL=http://localhost:XXXX/login

IDAM_API_URL=http://localhost:XXXX/o/token

XXXX is the port which CFTLIB uses for IDAM, as ET(Employment Tribunals) we are using 5062

Developing

Code style

We use ESLint with Prettier alongside sass-lint [Husky] Pre-Commit Hooks are enabled which makes sure all your files are formatted before commiting (https://github.com/typicode/husky)

Running the linting with ES auto fix and Prettier check:

$ yarn lint --fix

Running the linting with Prettier auto fix:

$ yarn prettier src/* --write

Running the tests

This template app uses Jest as the test engine. You can run unit tests by executing the following command:

$ yarn test

Here's how to run functional tests (the template contains just one sample test):

$ yarn test:routes

Running accessibility tests:

$ yarn test:a11y

Make sure all the paths in your application are covered by accessibility tests (see a11y.ts).

Running all continuous integration tests:

$ yarn cichecks

Security

CSRF prevention

Cross-Site Request Forgery prevention has already been set up in this template, at the application level. However, you need to make sure that CSRF token is present in every HTML form that requires it. For that purpose you can use the csrfProtection macro, included in this template app. Your njk file would look like this:

...
<form ...>
  ...
    <input type="hidden" name="_csrf" value={{ csrfToken }}>
  ...
</form>
...

Helmet

This application uses Helmet, which adds various security-related HTTP headers to the responses. Apart from default Helmet functions, following headers are set:

• Referrer-Policy
• Content-Security-Policy

There is a configuration section related with those headers, where you can specify:

• referrerPolicy - value of the Referrer-Policy header.

Here's an example setup:

{
  "security": {
    "referrerPolicy": "origin"
  }
}

Make sure you have those values set correctly for your application.

Healthcheck

The application exposes a health endpoint (https://localhost:3003/health), created with the use of Nodejs Healthcheck library. This endpoint is defined in health.ts file. Make sure you adjust it correctly in your application. In particular, remember to replace the sample check with checks specific to your frontend app, e.g. the ones verifying the state of each service it depends on.

License

This project is licensed under the MIT License - see the LICENSE file for details

Functional tests

Technology Stack

Technology	Description
Nodejs & Yarn	Node.js & yarn
Codecept 3.2.3	CodeceptJS allows to run several browser sessions inside a test. This can be useful for testing communication between users inside a chat or other systems.
Puppeteer 13.2.0	Puppeteer framework is one such framework that offers Headless Browser Testing for Google Chrome. It allows the tester to perform the actions on the Chrome browser using commands in JavaScript
JavaScript	Using java script to implement features & scenarios

Running functional tests

$ yarn test:functional

Testing Locally

Before you start this project, you need to create a new case. After creation of the case you can connect to response hub by using the link:

https://localhost:3003/response-hub/{{caseReferenceId}}?lng=en

Responsible Team

Team

Employment Tribunals