Frontend for the 5calls.org site
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.vscode
__mocks__/mixpanel-browser/src A more reliable mixpanel tracking setup (#443) Nov 26, 2018
config Remove bugsnag uploader as it was causing build failures randomly. Jan 12, 2019
public Split issues / contacts from new API (#454) Jan 7, 2019
scripts Experimenting with netlify, do not merge (#409) Aug 11, 2018
src
web-tests remove old donation banner, slight redesign of header, rename confusi… ( Jan 24, 2019
.gitignore
.prettierrc
5calls.code-workspace
CONTRIBUTING.md add precommit hook for tslint fix (#438) Nov 24, 2018
CRA_README.md
LICENSE.txt Year changes. Jan 1, 2018
Makefile
README.md
circle.yml Change CI test task to `test:ci` for brevity Feb 16, 2017
gulpfile.js
karma.ci.conf.js Add unit tests for localStorage and default state (#316) Jun 17, 2017
karma.conf.js
netlify.toml
package.json Added intercom message helper thing. (#464) Jan 24, 2019
runner.js Split issues / contacts from new API (#454) Jan 7, 2019
tsconfig.json
tslint.json Reformat the codebase using prettier for readability (#441) Nov 27, 2018
yarn.lock

README.md

5calls

Quicknav

Automated testing

CircleCI

Cross-browser testing

BrowserStack Status

Table of Contents

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

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