Manage a Tenancy - TODO

How to use this template

1. Change the readme heading above to Manage a Tenancy - <processName>, replacing <processName> with the full name of the process (e.g. Manage a Tenancy - Tenancy and Household Check)
2. Find and replace all TODOs in this project
3. Rename pages/TODO to pages/<basePath>, public/TODO to public/<basePath>, and __tests__/pages/TODO to __tests__/pages/<basePath>, replacing /<basePath> in each with the value specified in config/basePath.js
4. Remove this section from the readme

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/TODO.

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 to files in server/.

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 test

To run the full test suite, 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 TODO 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.