ccdb5-ui

Consumer Complaint Database - 5.0

Description: This application allows consumers to search complaints submitted to the CFPB by other consumers.

Technology Stack

This application is written in JavaScript and Less within the React + Redux framework. It uses Webpack at runtime to manage module loading.

The code is written with the ES6 feature set of JavaScript. Backwards compatibility is achieved by compiling the script with Babel prior to using it within the browser.

Unit testing of the application is performed within Jest with Enzyme providing support for event testing.

yarn is used to manage the build/test/deploy cycle.

The ccdb5_ui (note the underscore) directory contains a thin Django implementation that allows it to be used as a plugin for CFPB's public website.

Screenshot

Dependencies

This application depends on the following third-party components:

1. Capital Framework - CFPB standard styling and controls
2. History - Integrating the address bar with the application
3. moment - Better date handling than native JavaScript

It also contains portions adapted from:

1. react-typeahead

Installation

Instructions on how to install, configure, and get the project running are in the INSTALL document.

Configuration

Please see the subsection Configuring in INSTALL

Usage

Developing code

Prerequisites

This application depends on the Public Complaints API to be available.

For local development, you will need to the following:

• Get a local version of consumerfinance.gov running
• Fill the local Elasticsearch with data
• (optional) Install the API
  • Once it is cloned, make sure the website knows the plugin is available. Look under "Loading Sibling Projects, option 2" here

Code-Build cycle

To run the app in development mode:

yarn run start

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Enter Control-C to exit development mode

How to test the software

Unit testing

To launch the JavaScript test runner in interactive watch/test mode:

yarn run test

Enter Control-C to exit interactive watch mode

To run the Python unit tests, first install Tox, and then run:

tox

Cypress integration tests

Our browser-based tests check base-line user operations for consumer complaint search. The tests are meant to be run against a consumerfinance.gov website that has access to an Elasticsearch index of consumer complaints. Tests can be run in a local environment, or they can be run against an external server.

Using a Chrome browser helps avoid some inconsistencies with Cypress's default Electron browser, which currently isn't on the latest version of Chrome.

Timeouts and the local baseUrl are set in cypress.json

To run Cypress tests locally

• Set your node env to development:

export NODE_ENV=development

You can run the tests in headless mode and just see results, or you can open the Cypress test-runner, which lets you choose tests and watch them run in a Chrome browser. Having the live browser allows you to see page state during tests, and you can open Chrome dev tools to check console errors and network requests.

To run local tests and just see results:

yarn run cypress run --browser chrome --headless

This will run Cypress against a local version of consumerfinance.gov running on port 8000. To use a different port, such as the port 3000 used by yarn run start, pass a --baseUrl parameter:

yarn run cypress run --browser chrome --headless --config baseUrl=http://localhost:3000/data-research/consumer-complaints/search/

To open a local Cypress test-runner to choose which tests to run and see the browser interactions:

yarn run cypress open --browser chrome

To run against a server

You can also run Cypress tests against a server by passing a baseUrl config with the path to the server's consumer complaints search page.

Note: If you run against a server that has Django's DEBUG=False setting, the tests will probably run into API throttling, which will make tests fail. Our internal DEV servers can be deployed with DEBUG=True for running Cypress tests.

yarn run cypress run --browser chrome --headless --config baseUrl=https://[DEV SERVER URL]/data-research/consumer-complaints/search/

Getting help

If you have questions, concerns, bug reports, etc, please file an issue in this repository's Issue Tracker.

Getting involved

CONTRIBUTING.

---

Open source licensing info

1. TERMS
2. LICENSE
3. CFPB Source Code Policy

---

Links that were helpful

React-Redux

• https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree
• https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e
• https://medium.com/@kylpo/redux-best-practices-eef55a20cc72
• https://github.com/markerikson/react-redux-links/blob/main/tips-and-best-practices.md
• https://getstream.io/blog/react-redux-best-practices-gotchas/
• https://tech.affirm.com/redux-patterns-and-anti-patterns-7d80ef3d53bc
• https://github.com/gaearon/redux-devtools