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

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

• 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.

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.

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

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

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.

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

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)

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

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

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

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

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