Skip to content

Latest commit

 

History

History
218 lines (145 loc) · 8.17 KB

README.md

File metadata and controls

218 lines (145 loc) · 8.17 KB
Raw

Frontend for TDP

Frontend API Service for TDP. Deployed to Cloud.gov at https://tdp-frontend.app.cloud.gov/ . The project uses USWDS and in particular, trussworks/react-uswds

Prerequisites

Contents

Testing the local Frontend Service:

Login is now dependent on the tdrs-backend service. You will need a local instance of that application running.

Local Development Options

Commands are to be executed from within the tdrs-frontend directory

1.) Create a .env.local file for local development configured to reference the backend service:

$ touch .env.local && echo "REACT_APP_BACKEND_URL=http://localhost:8080/v1" >> .env.local
  • The REACT_APP_BACKEND_URL variable in this file points to the backend host. For local testing this value should default to the following :
http://localhost:8080/v1

2.) Frontend project spin-up options:

  • Option 1 (Using Yarn directly): We recommend using NVM

    $ nvm install 12.18.3 # Install specific node version
$ yarn
$ yarn build
$ yarn start

  • Option 2 (Build and start via docker-compose):

    $ docker-compose up -d --build

    This will start one container named tdrs-frontend_tdp-frontend with port 3000. Any changes made in tdrs-frontend folder will be picked up by docker automatically (no stop/run containers each time).

  • Option 3 ( Build and start via docker)

    1.) Build the Docker image locally:
docker build --target localdev -t tdp-frontend:local . -f Dockerfile.local

2.) Run the app:
docker run -it -p 3000:3000 -v $PWD/src/:/home/node/app/src --rm tdp-frontend:local

    This will start one container tdp-frontend with port 3000. Any changes amde in src folder will be picked up by docker automatically (no stop/run containers each time).

    With the project started, you can access the landing page via a web-browser ( we recommend Chrome) at the following URL:

  http://localhost:3000

3.) This will redirect you to the TDP Homepage page with a button labeled Sign in with Login.gov.

  • Clicking this button will redirect you to the login.gov authentication page.
  • You must agree to associate your account with the TANF Prototype: Development application.
  • If you encounter any issues signing in, please ensure you are using a Login.gov-Sandbox Account and NOT your Login.gov Account.

4.) Upon successful authentication you will be redirected to the frontend edit-profile (/edit-profile) UI with an option to sign out.

5.) Clicking the Sign Out button will log you out of the application and redirect you to the landing page,

6.) Frontend project tear down options:

  • If using Option 1 or 3 from above:

     Kill the application running in your terminal.

 MacOS Example: control+c

  • Option 2 (If you ran the application via docker-compose):

    $ docker-compose down

Code Linting and Formatting

The app is set up with ESLint and Prettier, and follows the Airbnb Style Guide.

To run eslint locally:

$ yarn lint

If you use VSCode as an IDE, it will be helpful to add the extensions, ESLint and Prettier - Code formatter. These make it possible to catch lint errors as they occur, and even auto-fix style errors (with Prettier).

Unit and Integration Testing

This project uses Jest for unit tests and Cypress for end-to-end (e2e) tests.

Unit Tests with Jest

Jest provides an interactive test console that's helpful for development. After running the following commands, you will see options to run all the tests, run only failing tests, run specific tests, and more.

1.) To run unit tests locally:

$ yarn test

2.) To run unit tests with code coverage report:

$ yarn test:cov

3.) To run unit tests as a continuous integration environment would, which runs the tests once (without the interactive console):

$ yarn test:ci

After running either test:cov or test:ci, coverage details can be seen as HTML in the browser by running:

$ open coverage/lcov-report/index.html

In addition to Jest's matchers, this project uses enzyme-matchers to simplify tests and make them more readable. Enzyme matchers is integrated with Jest using the jest-enzyme package which provides many useful assertions for testing React components.

End-to-End Tests with Cypress

It is required to run the application locally for Cypress to run, since it actually navigates to the URL and performs tests on the rendered UI. Cypress requires that the application is running locally in order to perform its tests, since it navigates to the URL and performs tests on the rendered UI.

  • Run the app (see docs to run locally)
  • Open the Cypress app: 
    $ yarn cy:open
  • The Cypress Test Runner immediately displays a list of Integration Tests. Click on one to run it, or run all tests.
  • Alternatively the tests can all be run from the command line without the interactive browser window: 
    $ yarn cy:run

The Cypress guides are helpful.

Manual Cloud.gov Deployments:

Although CircleCi is set up to auto deploy frontend and backend to Cloud.gov, if there is a need to do a manual deployment, the instructions below can be followed:

1.) Build and push a tagged docker image while on the the target Github branch:

(Please note you need to be logged into docker for these operations)

docker build -t lfrohlich/tdp-frontend:local . -f Dockerfile.dev

docker push lfrohlich/tdp-frontend:local

2.) Log into your cloud.gov account and set your space and organization:

- ORG: The target deployment organization as defined in cloud.gov Applications
- SPACE: The target deployment space under the organization as defined in cloud.gov Applications
$ cf login -a api.fr.cloud.gov --sso
$ cf target -o <ORG> -s <SPACE-1>

You may be prompted to select from a list of spaces under the selected target. Please follow the prompt to select your intended deployment space

Example Prompt:

Targeted org hhs-acf-prototyping.

Select a space:
1. <SPACE-1>
2. <SPACE-2>

Space (enter to skip): 1
Targeted space <SPACE-1>.

3.) Push the image to Cloud.gov ( you will need to be in the same directory astdrs-frontend/manifest.yml):

( The --var parameter ingests a value into the ((docker-frontend)) environment variable in the manifest.yml)

 cf push tdp-frontend -f manifest.yml --var docker-frontend=lfrohlich/tdp-frontend:local

4.) To apply any changes made to environment variables you will need to restage the application:

$ cf restage tdp-frontend