Description: This application allows consumers to search complaints submitted to the CFPB by other consumers.
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 Testing Library providing support for event testing.
yarn is used to manage the build/test/deploy cycle.
This application depends on the following third-party components:
It also contains portions adapted from:
Instructions on how to install, configure, and get the project running are in the INSTALL document.
Please see the subsection Configuring in INSTALL
This application depends on the Public Complaints API to be available.
To run the app locally using the public consumerfinance.gov API, install dependencies and start the app in development mode:
yarn
yarn start
If you want to run the app against a local version of the API, edit the proxy
property to point to your local API server, likely http://localhost:8000. See the API docs to learn how to setup and run the API.
Run the app in development mode:
yarn 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
To launch the JavaScript test runner in interactive watch/test mode:
yarn test
Enter Control-C
to exit interactive watch mode
Our browser-based tests check base-line user operations for consumer complaint search. The tests are run against JSON fixtures from the ccdb5-api.
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
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 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 start
, pass a --baseUrl
parameter:
yarn 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 cypress open --browser chrome
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 cypress run --browser chrome --headless --config baseUrl=https://[DEV SERVER URL]/data-research/consumer-complaints/search/
Ready to publish changes to npm?
.env
file,cp .env_SAMPLE .env
.GITHUB_TOKEN
in your .env
file (seemain
and git pull
to confirm you're up-to-date.yarn build
to ensure you have the latest built artifacts for npm./dist/
directory files to main
..env
with source ./.env
(if GITHUB_TOKEN
in unset).npm login
(if not already logged in).yarn release
to start the release.dist
directory. It then usescd cfgov/unprocessed/apps/ccdb-search/
.npx yarn-check -u
and update to the latest ccdb5-ui version. Note: you might need to hit the space bar to properly set the new version number.yarn release
can't find https://www.npmjs.com/package/@cfpb/ccdb5-uicfgov/unprocessed/apps/ccdb-search/npm-packages-offline-cache
cfgov/unprocessed/apps/ccdb-search/node_modules
cfgov/unprocessed/apps/ccdb-search/yarn.lock
.yarnrc
fileyarn cache clean; yarn install
cfgov/unprocessed/apps/ccdb-search/
..yarnrc
file.If you have questions, concerns, bug reports, etc, please file an issue in this repository's Issue Tracker.