Table of Contents
- Contributor Guidelines
- Other Client Projects
To build the application, you need to install Yarn and run the following commands:
# install dependencies and # compile .scss files to .css: yarn # Run unit tests in watch mode yarn test # Run unit tests with a code coverage report yarn test:coverage # start the app running in the # webpack development server: yarn start # start the app running in https mode # (needed for browser geolocation): yarn start:https # build the app into build folder # for server deployment: yarn build # any updates to .scss files need # to be compiled to css using: yarn clean-build-css
yarn add to add new dependencies
will throw an error related to node-sass-chokidar, which can be ignored.
For the best development experience, you should install both the React and Redux Development Tools extensions into your browser. Both browser extensions are available for Chrome and Firefox.
End-to-end Integration Tests
E2E testing for this project is done using TestCafe with testcafe-react-selectors. This provides a web scraping test bed that provides an assertion library to ensure that the expected elements appear on each page under test.
Running the tests
Before running the tests, the development server must be running using the command
Once the test server is running, you may either run all the tests on your local browser using one of the following commands
testcafe <browsername> web-tests/*.ts yarn web-tests:all
Or if you have access to browserstack, you may run on multiple browsers using the command
Running on browserstack
To run on browserstack, ensure that you have environment variables set for BROWSERSTACK_ACCESS_KEY and BROWSERSTACK_USERNAME to the values of your browserstack account You may view test results on the dashboard
Debugging and running individual tests
You may run specific tests by running testcafe with the -t or -T option -t -T <partial test name, must meet grep search criteria. Ex. Tests that start with donate may be found with "Donate.*">
Tests may be run in debug mode with the --inspect-brk option.
testcafe --inspect-brk chrome web-tests/test.ts
Breakpoints may be put in the test with the following syntax
// tslint:disable-next-line:no-debugger debugger;
Then in chrome, navigate to
On this page, under Remote Target there will be an inspect link, click to start the debugger.
Architecture, Data Flow and Strong Typing
A selection of files in this repository include code comments describing the architecture, data flow and strong typing conventions used in developing the React-Redux-TypeScript version of the 5 Calls application. These include files that illustrate the following (see the individual files for more details):
Use of TypeScript to Strongly Type Request Parameters Passed by React-Router
Data Flow through a Component Heirarcy
Redux Data Flow
See code comments containing the token 'REDUX DATA FLOW'. Also note the use of TypeScript in these files.
Contributions to this repository are welcome. Please see the Contributing.md file in the 5calls/5calls repository for information on contributing to this repository.
- Nick O'Neill
- Matt Jacobs
- Liam Campbell
- James Home
- Beau Smith
- Anthony Johnson
- Craig Doremus
- Owen Derby
- All contributors
Other Client Projects
Create React App Code Generation
This project was created with create-react-app (CRA, react-scripts ver 1.0.0) using react-scripts-ts (ver 2.2.0) to add TypeScript support. In addition, the
node-sass-chokidar library was added for preprocessing of SASS (.scss files) to CSS.
Subsequently, the CRA-created configurations were exposed using the eject command (
yarn eject). This created the
scripts folders and added dependencies and other configurations to
CRA_README.md is the original README.md file created when the create-react-app command was run.