Public Release V1 (#295)

* remove ts preprocessor and renable code coverage * add back code coverage * remove service worker * update element finding * add and utilize clickwithoutscroll command * investigating flake scenario * fix flaky issue with workarounds * remove stale unit and api tests * Readme, database and npm script updates (#303) * minor readme updates * wip - update npm scripts * remove test database; update dev commands to use concurrently * update order of test commands * update sandbox config * install concurrently * pin concurrently version * add codesandbox command * update codesandbox commands * update links throughout; clarify getting started section; update additional npm scripts section * edits to generate new seed * update and pin dependencies * refresh user after updating user settings form * clear set submitting for user settings form * generate consistent random phone number type; update database files * fix alignment of onboarding dialog content for mobile * remove true * update readme * update app for to help with improving code coverage * refactor test setup for better mobile workflow and improved coverage * add custom exectuor for mobile jobs * fix executor config syntax * use valid docker image name+tag * fix failing tests * let the force in * fix readme typo * add code coverage plugin in link to readme * fix to click on amount clear button, scroll to main top, click on date range button (so amount range panel is hidden) * fix code coverage setup * update codesandbox to transpile only * upgrade dependencies * fix typescript warning * update coverage file path * Fix uncovered branches from code coverage (#312) * update sidenav data-test tag; add test to toggle navdrawer * code cleanup * update navigation drawer test for mobile * add click to create another transaction to fix code coverage * cleanup and set istanbul ignores * additional auth test for invalid password; istanbul ignores * remove dead code and organize test methods * move more utils to dev/test section; istanbul ignores * fix comment * cleanup unused methods * additional istanbul ignores * add more ignores * fix comments * upgrade jest types * remove .babelrc * remove @babel/plugin-transform-typescript * refactor from pay app to real world app * Transaction List InfiniteLoader refactor (#316) * refactors to load machines and top routes once; refactor infinitelist to use react-virtualized * restore to using PrivateRoutesContainer and useMachine * cleanup test code * cleanup and fix transaction list font size * remove unused packages * use latest circle orb * remove work around and click on transaction item in feed * update package.json meta * update dependencies * remove homepage from package.json causes override of PUBLIC_URL used by create-react-app Co-authored-by: Amir Rustamzadeh <[email protected]> Co-authored-by: Kevin Old <[email protected]> Co-authored-by: Kevin Old <[email protected]>
cypress-io · May 15, 2020 · 92cd860 · 92cd860
1 parent 597109e
commit 92cd860
Show file tree

Hide file tree

Showing 70 changed files with 930 additions and 23,091 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,6 +1,14 @@
 version: 2.1
 orbs:
-  cypress: cypress-io/[email protected]
+  cypress: cypress-io/[email protected]
+executors:
+  mobile:
+    docker:
+      - image: cypress/browsers:node12.13.0-chrome78-ff70
+    environment:
+      # iPhone 6 viewport dimensions
+      CYPRESS_VIEWPORT_WIDTH: 375
+      CYPRESS_VIEWPORT_HEIGHT: 667
 workflows:
   build:
     jobs:
@@ -59,7 +67,7 @@ workflows:
           name: "UI Tests - Chrome - Mobile"
           requires:
             - Setup
-          executor: cypress/browsers-chrome78-ff70
+          executor: mobile
           browser: chrome
           yarn: true
           start: yarn test:ci
@@ -68,7 +76,6 @@ workflows:
           parallel: true
           parallelism: 4
           spec: cypress/tests/ui/*
-          config-file: mobile-cypress.json
           group: "UI - Chrome - Mobile"
 
       # Run E2E tests in Firefox
@@ -92,7 +99,7 @@ workflows:
           name: "UI Tests - Firefox - Mobile"
           requires:
             - Setup
-          executor: cypress/browsers-chrome78-ff70
+          executor: mobile
           browser: firefox
           yarn: true
           start: yarn test:ci
@@ -101,5 +108,4 @@ workflows:
           parallel: true
           parallelism: 4
           spec: cypress/tests/ui/*
-          config-file: mobile-cypress.json
           group: "UI - Firefox - Mobile"
diff --git a/.env b/.env
@@ -8,7 +8,4 @@ SEED_COMMENTS_PER_USER=2
 SEED_NOTIFICATIONS_PER_USER=5
 SEED_BANK_TRANSFERS_PER_USER=5
 SEED_DEFAULT_USER_PASSWORD=s3cret
-PAGINATION_PAGE_SIZE=10
-MOBILE_VIEWPORT_WIDTH=414
-BASE_API_URL=http://localhost:3001
-
+PAGINATION_PAGE_SIZE=10
diff --git a/README.md b/README.md
@@ -1,71 +1,106 @@
 <p style='color: #3f51b5' align="center">
-  <img style='color: #3f51b5' alt="Pay App Logo" src="./src/svgs/pay-app-logo.svg" />
+  <img style='color: #3f51b5' alt="Cypress Real World App Logo" src="./src/svgs/rwa-logo.svg" />
 </p>
 
 A payment application to demonstrate **real-world** usage of [Cypress](https://cypress.io) testing methods, patterns, and workflows.
 
 <p align="center">
-  <img style='width: 70%' alt="Pay App Desktop" src="./public/img/pay-app-desktop.png" />
+  <img style='width: 70%' alt="Cypress Real World App" src="./public/img/rwa-readme-screenshot.png" />
 </p>
 
 ## Features
 
-🛠 Built with React, XState, Express, Lowdb, & TypeScript  
+🛠 Built with [React][reactjs], [XState][xstate], [Express][express], [lowdb][lowdb], & [TypeScript][typescript]  
 ⚡️ Zero database dependencies  
-🚀 Full-stack Express/React application with real-world features and tests  
+🚀 Full-stack [Express][express]/[React][reactjs] application with real-world features and tests  
 👮‍♂️ Local Authentication  
 🔥 Database Seeding with End-to-end Tests  
-💻 CI/CD + [Cypress Dashboard](https://dashboard.cypress.io/projects/7s5okt)
+💻 CI/CD + [Cypress Dashboard][cypressdashboard]
 
 ## Getting Started
 
+The Cypress Real-World App (RWA) is a full-stack Express/React application backed by a local JSON database ([lowdb]).
+
+The app is bundled with [example data](./data/database.json) (`data/database.json`) that contains everything you need to start using the app and run tests out-of-the-box.
+
+> 🚩 **Note**
+> You can login to the app with any of the [example app users](./data/database.json#L2). The default password for all users is `s3cret`.
+
 ### Installation
 
 ```shell
 yarn install
 ```
 
-### Run the app along with Cypress
+### Run the app
 
 ```shell
 yarn dev
 ```
 
-### Tests
+### Start Cypress
+
+```shell
+yarn cypress:open
+```
+
+## Tests
 
 | Type | Location                                 |
 | ---- | ---------------------------------------- |
 | api  | [cypress/tests/api](./cypress/tests/api) |
 | ui   | [cypress/tests/ui](./cypress/tests/ui)   |
 | unit | [`src/__tests__`](./src/__tests__)       |
 
-### Database
+## Database
+
+- The local JSON database located in [data/database.json](./data/database.json) and is managed with [lowdb].
 
-**The default password for all users is `s3cret`.**
+- The database is [reseeded](./data/dev-seed.json) each time the application is started (via `yarn dev`). Database seeding is done in between each [Cypress End-to-End test](./cypress/tests).
 
-The database is located in [data/database.json](./data/database.json) and is [reseeded](./data/dev-seed.json) each time the application is started (via `yarn dev`). [lowdb](https://github.com/typicode/lowdb) is used to interact with the database.
+- Updates via the React frontend are sent to the [Express][express] server and handled by a set of [database utilities](backend/database.ts)
 
-Backend interactions with the database are located in [backend/database.ts](backend/database.ts)
+- Generate a new database using `yarn db:seed`.
 
-### Additional NPM Scripts
+- An [empty database seed](./data/empty-seed.json) is provided along with a script (`yarn start:empty`) to view the application without data.
 
-| Script         | Description                                                          |
-| -------------- | -------------------------------------------------------------------- |
-| start          | Starts backend and frontend                                          |
-| types          | Validates types                                                      |
-| db:seed        | Generates fresh database seeds for json files in /data               |
-| dev:mobile     | Starts backend, frontend and Cypress with mobile-cypress.json config |
-| start:empty    | Starts backend, frontend and Cypress with empty database seed        |
-| start:test     | Starts backend, frontend and Cypress with test database seed         |
-| tsnode         | Customized ts-node command to get around react-scripts restrictions  |
-| list:dev:users | Provides id and username for users in the dev database               |
+> 🚩 **Note**
+> You can login to the app with any of the [example app users](./data/database.json#L2). The default password for all users is `s3cret`.
+
+## Additional NPM Scripts
+
+| Script         | Description                                                         |
+| -------------- | ------------------------------------------------------------------- |
+| dev            | Starts backend in watch mode and frontend                           |
+| start          | Starts backend and frontend                                         |
+| types          | Validates types                                                     |
+| db:seed        | Generates fresh database seeds for json files in /data              |
+| start:empty    | Starts backend, frontend and Cypress with empty database seed       |
+| tsnode         | Customized ts-node command to get around react-scripts restrictions |
+| list:dev:users | Provides id and username for users in the dev database              |
 
 For a complete list of scripts see [package.json](./package.json)
 
+## Code Coverage Report
+
+The Cypress Real-World App uses the [@cypress/code-coverage](https://github.com/cypress-io/code-coverage) plugin to generate code coverage reports for the app frontend and backend.
+
+To generate a code coverage report:
+
+1. Run `yarn cypress:run --env coverage=true` and wait for the test run to complete.
+2. Once the test run is complete, you can view the report at `coverage/index.html`.
+
 <br />
 <br />
 <br />
 <br />
 <p style='color: "#3f51b5"' align="center">
   <img width="100" style='color: "#3f51b5"' alt="Cypress Logo" src="./src/svgs/cypress-logo.svg" />
 </p>
+
+[reactjs]: https://reactjs.org
+[xstate]: https://xstate.js.org
+[express]: https://expressjs.com
+[lowdb]: https://github.com/typicode/lowdb
+[typescript]: https://typescriptlang.org
+[cypressdashboard]: https://dashboard.cypress.io/projects/7s5okt
diff --git a/backend/app.ts b/backend/app.ts
@@ -27,6 +27,12 @@ const corsOption = {
 
 const app = express();
 
+/* istanbul ignore next */
+// @ts-ignore
+if (global.__coverage__) {
+  require("@cypress/code-coverage/middleware/express")(app);
+}
+
 app.use(cors(corsOption));
 app.use(logger("dev"));
 app.use(bodyParser.urlencoded({ extended: false }));
@@ -55,6 +61,7 @@ app.use("/comments", commentRoutes);
 app.use("/notifications", notificationRoutes);
 app.use("/bankTransfers", bankTransferRoutes);
 
+/* istanbul ignore next */
 if (process.env.NODE_ENV === "test" || process.env.NODE_ENV === "development") {
   app.use("/testData", testDataRoutes);
 }

diff --git a/backend/auth.ts b/backend/auth.ts
@@ -50,12 +50,12 @@ router.post("/logout", (req: Request, res: Response): void => {
   res.clearCookie("connect.sid");
   req.logout();
   req.session!.destroy(function (err) {
-    if (err) console.log(err);
     res.redirect("/");
   });
 });
 
 router.get("/checkAuth", (req, res) => {
+  /* istanbul ignore next */
   if (!req.user) {
     res.status(401).json({ error: "User is unauthorized" });
   } else {

diff --git a/backend/bankaccount-routes.ts b/backend/bankaccount-routes.ts
@@ -16,6 +16,7 @@ const router = express.Router();
 
 //GET /bankAccounts (scoped-user)
 router.get("/", ensureAuthenticated, (req, res) => {
+  /* istanbul ignore next */
   const accounts = getBankAccountsByUserId(req.user?.id!);
 
   res.status(200);
@@ -39,6 +40,7 @@ router.get(
 
 //POST /bankAccounts (scoped-user)
 router.post("/", ensureAuthenticated, validateMiddleware(isBankAccountValidator), (req, res) => {
+  /* istanbul ignore next */
   const account = createBankAccountForUser(req.user?.id!, req.body);
 
   res.status(200);

diff --git a/backend/banktransfer-routes.ts b/backend/banktransfer-routes.ts
@@ -10,6 +10,7 @@ const router = express.Router();
 
 //GET /bankTransfers (scoped-user)
 router.get("/", ensureAuthenticated, (req, res) => {
+  /* istanbul ignore next */
   const transfers = getBankTransfersByUserId(req.user?.id!);
 
   res.status(200);

diff --git a/backend/comment-routes.ts b/backend/comment-routes.ts
@@ -31,6 +31,7 @@ router.post(
     const { transactionId } = req.params;
     const { content } = req.body;
 
+    /* istanbul ignore next */
     createComments(req.user?.id!, transactionId, content);
 
     res.sendStatus(200);

diff --git a/backend/contact-routes.ts b/backend/contact-routes.ts
@@ -25,7 +25,7 @@ router.post(
   validateMiddleware([shortIdValidation("contactUserId")]),
   (req, res) => {
     const { contactUserId } = req.body;
-
+    /* istanbul ignore next */
     const contact = createContactForUser(req.user?.id!, contactUserId);
 
     res.status(200);