Manage a Tenancy - TODO

How to use this template

Technical overview

This project is built with TypeScript and Next.js.

We use:

• styled-jsx for styling components
• Normalize.css to normalize styles across browsers
• Docker to deploy and run the service
• Jest, Cucumber, and Selenium WebDriver for building and running tests
• ESLint for linting
• Prettier for code formatting

Dependencies

• Node.js

  We assume you are using the version of Node.js documented in .node-version. We recommend using nodenv with node-build-update-defs to manage Node.js versions.

• Google Chrome and ChromeDriver or Firefox and geckodriver

  We use these for running feature tests locally. Make sure your installed versions match each other.

Getting started

1. Copy .env.example to .env and fill in the blanks.

2. Create yourself a working process for local development in the OutSystems development environment, setting TEST_PROCESS_REF in your .env to its reference.

3. Install the required packages:

   npm install

4. Run the development server:

   npm run dev

5. Navigate to http://localhost:3000/hc.

6. Make a change, and see the page hot reload.

Changing the server code

Hot reloading isn't set up for the local server, so you will need to restart it to see any changes.

Using service workers

The project is configured to only generate a service worker in production mode. If you want to try offline functionality locally, you will need to use:

npm run build && npm start

Choosing a process stage

One of the parameters passed to the process when starting it is the current process stage:

• "0": in progress
• "1": in manager review
• "2": approved
• "3": declined

We use the TEST_PROCESS_STAGE environment variable to set this value locally during development. Override it in your .env file to work on a different stage.

Running the tests

We use Jest for testing. Feature tests are driven by Selenium Webdriver to test in browser.

To run the unit tests:

npm run test:unit

To run the unit tests, updating changed snapshots:

npm run test:unit:update

To run the unit tests in watch mode:

npm run test:unit:watch

To run the feature tests:

npm run test:feature

To run the feature tests, updating changed snapshots:

npm run test:feature:update

To run the full test suite:

npm run test:all

To run the full test suite, updating changed snapshots:

npm run test:all:update

To run the full test suite, including format checking and linting:

npm test

To run the full test suite, including format checking and linting, fixing any issues and updating snapshots:

npm run test:update

Browser support

We support running the feature tests in Google Chrome and Firefox, headless or not.

The following environment variables customize the browser options for testing:

• TEST_BROWSER determines the browser to use.

  Accepted values:

  • chrome (default)
  • firefox

• TEST_HEADLESS determines if we run the browser in headless mode or not.

  Accepted values:

  • 0 for off
  • 1 for on (default)

Formatting the code

We use Prettier to format our code. There are lots of editor integrations available, and the style is enforced by a Git pre-commit hook.

To run the formatter:

npm run format

Linting the code

We use ESLint, in addition to TypeScript's compiler, for verifying correctness and maintainability of code.

To run the linter:

npm run lint

To run the linter in fix mode:

npm run lint:fix

We can also check that all files (except package.json and package-lock.json because Dependabot can get very noisy) have code owners:

npm run lint:codeowners

Architecture decision records

We use ADRs to document architecture decisions that we make. They can be found in docs/adr and contributed to with adr-tools.

Access

To access this process running on live infrastructure, start a new Home Check from the Manage a Tenancy hub.

Source

This repository was bootstrapped from mat-process-template, which was built from mat-process-thc, which was bootstrapped from dxw's react-template.