UI Development
In the UI, we use some Fontawesome Pro icons. In order to install the Fontawesome Pro packages, you will need to download an .npmrc file with a Fontawesome license token. Copy it into the workbench root directory:
workbench$ gsutil cp gs://all-of-us-workbench-test-credentials/.npmrc .
Before launching or testing the UI, yarn must first install the neccessary packages. From the ui/ directory:
yarn install
yarn dev-up
This launches a local UI development server hosted @ http://localhost:4200. Any changes made locally should be immediately hotswapped into your open tabs.
By default, this runs against the AoU test environment.
This requires that you have a local API server running, e.g. via ./project.rb dev-up.
REACT_APP_ENVIRONMENT=local yarn dev-up
yarn test
# Filter by specific test
yarn test help-sidebar
Change it(, to fit( on the target test case.
# Modify test case as follows
fit('should ...
# Execute just that test file
yarn test target-filename
Change it(, to xit( on the target test case.
# Modify test case as follows
xit('should ...
This test will appear as "skipped" in the test run summary, like:
Tests: 1 skipped, 43 passed, 44 total
yarn lint --fix
- your UI server should be running, e.g.
yarn dev-up - you should have http://localhost:4200 open in Chrome
- you should have the Chrome Inspector open
Read on for an easy way to use the debugger.
One simple way of using the Chrome debugger is to temporarily add the following line anywhere in your code:
debugger;
If this line is executed while the Chrome Inspector is open, it will act as a breakpoint.
Run this variant of the test command:
yarn test:debug
Open the Chrome inspector in any tab, and click "dedicated Node devtools"
By default, Jest does not execute in a browser. These extra steps allow you to debug the Jest testing process (a Node process) via Chrome inspector as usual. You can set breakpoints in your test code, or in the main UI code.