5calls

Quicknav

Automated testing

Cross-browser testing

Table of Contents

• Development
  • Front End
  • Application Server
  • Quality Assurance
    • JavaScript Unit Tests
    • End-to-end Integration Tests
    • JavaScript Linting
• Contributor Guidelines
• Contributors
• Other Client Projects

Development Notes

The frontend is written in React with Redux for state management and Typescript for type safety and documentation. The application server back end -- for data processing -- is written in Go.

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

Using 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.

Unit testing

Unit testing in this repository is done using Jest with Enzyme in addition to the redux-mock-store library to support Redux-related tests.

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 yarn start 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

yarn web-tests:browserstack

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 chrome://inspect 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

Also illustrates the use of Redux to loosely couple a component to data passed to its props.
CallPageContainer.tsx
CallPage.tsx

Data Flow through a Component Heirarcy

Also note the TypeScript conventions used in these files.
CallPageContainer.tsx
CallPage.tsx
Why5calls.tsx

Redux Data Flow

See code comments containing the token 'REDUX DATA FLOW'. Also note the use of TypeScript in these files.
CallPageContainer.tsx
redux/callState/action.ts
redux/callState/actionCreator.ts
redux/callState/reducer.ts

Contributor Guidelines

Contributions to this repository are welcome. Please see the Contributing.md file in the 5calls/5calls repository for information on contributing to this repository.

Contributors

• Nick O'Neill
• Matt Jacobs
• Liam Campbell
• James Home
• Beau Smith
• Anthony Johnson
• Craig Doremus
• Owen Derby
• All contributors

Other Client Projects

• Android
• iOS

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 config and scripts folders and added dependencies and other configurations to package.json.

CRA_README.md is the original README.md file created when the create-react-app command was run.