cypress-io/cypress-realworld-app

A payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows.

A payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows.

💬 Note from maintainers

This application is purely for demonstration and educational purposes. Its setup and configuration resemble typical real-world applications, but it's not a full-fledged production system. Use this app to learn, experiment, tinker, and practice application testing with Cypress.

Happy Testing!

---

Features

🛠 Built with React, XState, Express, lowdb, Material-UI and TypeScript ⚡️ Zero database dependencies 🚀 Full-stack Express/React application with real-world features and tests 👮‍♂️ Local Authentication 🔥 Database Seeding with End-to-end Tests 💻 CI/CD + Cypress Cloud

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) 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. The default password for all users is s3cret. Example users can be seen by running yarn list:dev:users.

Prerequisites

This project requires Node.js to be installed on your machine. Refer to the .node-version file for the exact version.

Yarn Classic is also required. Once you have Node.js installed, execute the following to install the npm module yarn (Classic - version 1) globally.

npm install yarn@latest -g

If you have Node.js' experimental Corepack feature enabled, then you should skip the step npm install yarn@latest -g to install Yarn Classic globally. The RWA project is locally configured for Corepack to use Yarn Classic (version 1).

Yarn Modern

This project is not compatible with Yarn Modern (version 2 and later).

Installation

yarn

Mac users with M-series chips will need to prepend PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true.

PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true yarn install

Run the app

yarn dev

🚩 Note

The app will run on port 3000 (frontend) and 3001 (API backend) by default. Please make sure there are no other applications or services running on both ports. If you want to change the default ports, you can do so by modifying PORT and VITE_BACKEND_PORT variables in .env file. However, make sure the modified port numbers in .env are not committed into Git since the CI environments still expect the application to run on the default ports.

Start Cypress

yarn cypress:open

🚩 Note

If you have changed the default ports, then you need to update Cypress configuration file (cypress.config.ts) locally. There are three properties that you need to update in cypress.config.ts: e2e.baseUrl, env.apiUrl, and env.url. The port number in e2e.baseUrl corresponds to PORT variable in .env file. Similarly, the port number in env.apiUrl and env.url correspond to VITE_BACKEND_PORT. For example, if you have changed PORT to 13000 and VITE_BACKEND_PORT to 13001 in .env file, then your cypress.config.ts should look similar to the following snippet:

{
  env: {
    apiUrl: "http://localhost:13001",
    codeCoverage: {
      url: "http://localhost:13001/__coverage__"
    },
  },
  e2e: {
    baseUrl: "http://localhost:13000"
  }
}

Avoid committing the modified cypress.config.ts into Git since the CI environments still expect the application to be run on default ports.

Tests

Type	Location
api	cypress/tests/api
ui	cypress/tests/ui
component	src/(next to component)
unit	src/__tests__

Database

• The local JSON database is located in data/database.json and is managed with lowdb.

• The database is reseeded each time the application is started (via yarn dev). Database seeding is done in between each Cypress End-to-End test.

• Updates via the React frontend are sent to the Express server and handled by a set of database utilities

• Generate a new database using yarn db:seed.

• An empty database seed is provided along with a script (yarn start:empty) to view the application without data.

Additional NPM Scripts

Script	Description
dev	Starts backend in watch mode and frontend
dev:coverage	Starts backend in watch mode and frontend with instrumented code coverage enabled
dev:auth0	Starts backend in watch mode and frontend; Uses Auth0 for Authentication > Read Guide
dev:okta	Starts backend in watch mode and frontend; Uses Okta for Authentication > Read Guide
dev:cognito	Starts backend in watch mode and frontend; Uses Cognito for Authentication > Read Guide
dev:google	Starts backend in watch mode and frontend; Uses Google for Authentication > Read Guide
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

Code Coverage Report

The Cypress Real-World App uses the @cypress/code-coverage plugin to generate code coverage reports for the app frontend and backend.

To generate a code coverage report:

1. Start the development server with coverage enabled by running yarn dev:coverage.
2. Run yarn cypress:run --env coverage=true and wait for the test run to complete.
3. Once the test run is complete, you can view the report at coverage/index.html.

3rd Party Authentication Providers

Support for 3rd party authentication is available in the application to demonstrate the concepts on logging in with a 3rd party provider.

The app contains different entry points for each provider. There is a separate index file for each provider, and to use one, you must replace the current index.tsx file with the desired one. The following providers are supported:

• Auth0 (index.auth0.tsx)
• Okta (index.okta.tsx)
• Amazon Cognito (index.cognito.tsx)
• Google (index.google.tsx)

Auth0

The Auth0 tests have been rewritten to take advantage of our cy.session and cy.origin commands.

Prerequisites include an Auth0 account and a Tenant configured for use with a SPA. Environment variables from Auth0 are to be placed in the .env. For more details see Auth0 Application Setup and Setting Auth0 app credentials in Cypress.

To start the application with Auth0, replace the current src/index.tsx file with the src/index.auth0.tsx file and start the application with yarn dev:auth0 and run Cypress with yarn cypress:open.

The only passing spec on this branch will be the auth0 spec; all others will fail. Please note that your test user will need to authorize your Auth0 app before the tests will pass.

Okta

A guide has been written with detail around adapting the RWA to use Okta and to explain the programmatic command used for Cypress tests.

Prerequisites include an Okta account and application configured for use with a SPA. Environment variables from Okta are to be placed in the .env.

To start the application with Okta, replace the current src/index.tsx file with the src/index.okta.tsx file and start the application with yarn dev:okta and run Cypress with yarn cypress:open.

The only passing spec on this branch will be the okta spec; all others will fail.

Amazon Cognito

A guide has been written with detail around adapting the RWA to use Amazon Cognito as the authentication solution and to explain the programmatic command used for Cypress tests.

Prerequisites include an Amazon Cognito account. Environment variables from Amazon Cognito are provided by the AWS Amplify CLI.

• A user pool is required (identity pool is not used here)
  • The user pool must have a hosted UI domain configured, which must:
    • allow callback and sign-out URLs of http://localhost:3000/,
    • allow implicit grant Oauth grant type,
    • allow these OpenID Connect scopes:
      • aws.cognito.signin.user.admin
      • email
      • openid
  • The user pool must have an app client configured, with:
    • enabled auth flow ALLOW_USER_PASSWORD_AUTH, only for programmatic login flavor of test.
    • The cy.origin() flavor of test only requires auth flow ALLOW_USER_SRP_AUTH, and does not require ALLOW_USER_PASSWORD_AUTH.
  • The user pool must have a user corresponding to the AWS_COGNITO env vars mentioned below, and the user's Confirmation Status must be Confirmed. If it is Force Reset Password, then use a browser to log in once at http://localhost:3000 while yarn dev:cognito is running to reset their password.

The test knobs are in a few places:

• The .env file has VITE_AUTH_TOKEN_NAME and vars beginning AWS_COGNITO. Be careful not to commit any secrets.
• Both scripts/mock-aws-exports.js and scripts/mock-aws-exports-es5.js must have the same data; only their export statements differ. These files can be edited manually or exported from the amplify CLI.
• cypress.config.ts has cognito_programmatic_login to control flavor of the test.

To start the application with Cognito, replace the current src/index.tsx file with the src/index.cognito.tsx file and start the application with yarn dev:cognito and run Cypress with yarn cypress:open. yarn dev may need to have been run once first.

The only passing spec on this branch will be the cognito spec; all others will fail.

Google

A guide has been written with detail around adapting the RWA to use Google as the authentication solution and to explain the programmatic command used for Cypress tests.

Prerequisites include an Google account. Environment variables from Google are to be placed in the .env.

To start the application with Google, replace the current src/index.tsx file with the src/index.google.tsx file and start the application with yarn dev:google and run Cypress with yarn cypress:open.

The only passing spec when run with yarn dev:google will be the google spec; all others will fail.

License

This project is licensed under the terms of the MIT license.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Kevin Old

Amir Rustamzadeh

Brian Mann

Gleb Bahmutov

Ben Hong

David Khourshid

This project follows the all-contributors specification. Contributions of any kind welcome!!

cypress-realworld-app's Issues

Authentication

Components

• Login
• Signup
  • Form
  • Actions/Reducer/Logic

Routes

• /checkAuth

State

• User State (Redux)
• Logout (Actions/Reducer/Logic)

Use react-number-format on Create Transaction form for to improve look

Demo:
https://material-ui.com/components/text-fields/#integration-with-3rd-party-input-libraries

Bank Account API

Data Model

• id | string
• uuid | string
• user_id | string
• bank_name | string
• account_number | string
• routing_number | string
• is_deleted | boolean
• created_at | timestamp (ISO 8601)
• modified_at | timestamp (ISO 8601)

HTTP API

• GET /bank_accounts (scoped-user)
  • Tested
• GET /bank_accounts/:bank_account_id (scoped-user)
  • Tested
• POST /bank_accounts (scoped-user)
  • Tested
• DELETE (soft) /bank_accounts (scoped-user)
  • Tested
  • if you have a pending transaction that depends on this bank account then account cannot be soft-deleted.

Transaction Lists

Backend

• Need Sender and Receiver names in transaction payload item

Test/Dev Data

• Demo Requests

Components

• Top Tabs (Public, Friends, Personal)

  • Routing
  • /transactions/public
  • /transactions/friends
  • /transactions/personal

• Transaction Feeds (switch based on route)

  • Public
  • Contacts
  • Personal

• Tests

Cleanup: Migrate from snake_case to camelCase

Update all snake_case variables to camelCase

Initial spec was for snake_case API params, etc.

Per conversation with @amirrustam we'd like to move to camelCase.

Notifications

Components

• Notifications List (Main View)

  • Payment Request (Accept / Reject)
  • Transaction Likes
  • Transaction Comments

• Tests

Additional Ideas:

• Notifications Short List (Top Navigation)

Transaction Detail Page

• Route /transactions/:transactionId
• Transaction Detail
  • Display Likes count
  • Display Comments count
• Like/Comment UI

Sort /users based on contacts and transactions

From #1

• GET /users
  • Validate params
  • Tested
  • Query Params:
    • Validate params
    • order
      • default: scoped user contacts first, then all other users
      • "top_first": contacts with most transactions first

Signup Flow / User Onboarding

Define and implement new user onboarding flow

Forgot password functionality

Implement forgot password functionality

README / Developer Onboarding

Craft README with instructions / details for onboarding developers.

Update UI to be Responsive

Update UI to be Responsive and add Viewport testing scenarios.

• Make side nav minimized

Cleanup: Refactor /users and /auth routes content into database methods

Minor cleanup to move the contents of routes into database methods:

• /users
• /auth

Empty UI States

After onboarding user lists do not have items; add "Empty State" UI instructing user to create their first:

• Transaction List (instruct user to create first transaction by call to action)
• Bank Account (instruct user to create first bank account by call to action)
• Notification List (instruct user that notifications will appear in this area)

Implement full-text/fuzzy search for /users/search

Use https://fusejs.io/ to implement fuzzy search across username, first name, last name.

From #1

User API

Data Model

---

• id | string
• uuid | string
• first_name | string
• last_name | string
• username | string (unique, url-friendly and santized)
• password | string (bcrypt encrypted text)
• email | string (unique, email-format)
• phone_number | string (unique, phone-format)
• balance | positive-number
• avatar | string (url-fromat)
• default_privacy_level | string enumerated: "public" | "private" | "contacts" (default)
• created_at | timestamp (ISO 8601)
• modified_at | timestamp (ISO 8601)

HTTP API

---

• GET /users

  • Validate params
  • Tested
  • Query Params:
    • Validate params
    • order
      • default: scoped user contacts first, then all other users
      • "top_first": contacts with most transactions first

• GET /users/:user_id (permission: account owner)

  • Validate params
  • Tested

• GET /users/profile/:username (public info, authentication not required)

  • Tested

• GET /users/search

  • Validate params
  • Tested
  • Query Params:
    • Validate params
    • query: string representing like name or like username, or exactly phone, or exactly email

• POST /users

  • Validate payload
  • Tested

• PATCH /users/:user_id

  • Validate params
  • Tested

MVP Polish

• Style new transaction button
• Notifications link in Drawer Nav
• Remove ID’s from notification list items, bold names
• Avatar name header in drawer with Pay App Balance per Amir’s screenshot
• Update Transaction tabs to read: Everyone/Friends/Mine
• Style Transaction list item (red/green amounts) add avatar and comment like icons
• Transaction list loading indicators
• Save messages/notifications for forms and redirects (toasts) / Snackbar
• Update Bank Accounts Icon in Drawer to be house with columns icon
• Transaction Detail, prevent multiple likes
• Transaction Detail, render list of Comments

Backend API

Full backend HTTP API:

• User API
• Contact API
• Transaction API
• Bank Transfer API
• Bank Account API
• Notifications API
• Comment API
• Like API

Transaction Comment

Transaction Comment functionality

• Create Comment form for Transaction

• Tests

Public User Profile

Components

• Routing /user/:userId

• User Public Profile Details

• User Public Transactions Feed (visible to viewer)

• Tests

Setup Delayed responses for demo purposes

Per discussion, adding delays for all or various endpoint responses can aid in demonstrating how Cypress works.

The following snipped can be added to the Express JS app (app.ts) to delay ALL route responses by 2 second:

// simulate delay response
app.use((req, res, next) => {
  setTimeout(() => next(), 2000);
});

This middleware snippet can be added per route:

(req, res, next) => setTimeout(() => next(), 5000),

For instance:

//GET /transactions/public - auth-required
router.get(
  "/public",
  (req, res, next) => setTimeout(() => next(), 5000),
  ensureAuthenticated,
  validateMiddleware(isTransactionPublicQSValidator),
  (req, res) => {
    let transactions = !isEmpty(req.query)
      ? getPublicTransactionsByQuery(req.user?.id!, req.query)
      : getPublicTransactionsDefaultSort(req.user?.id!);

    res.status(200);
    res.json({ transactions });
  }
);

Discussion: LowDB and concurrency

We selected lowdb because of it's easy to install footprint and base of json-server.

The configuration for running Jest tests has been adjusted to run them synchronously (via --runInBand) due to failures when the unit test are run concurrently.

To date, the Cypress API tests have not had an issue.

Our primary goals for a database are:

1. Ensure that we are able to execute real world test case scenarios with zero installation dependencies
2. Retrieve record immediately after save

Given this information, we may need to look to one of the following solutions (or others) to ensure tests can be run asynchronously.

1. Use async/await with the existing lowdb Sync Adapter
2. Investigate/use lowdb's Async Adapter (https://github.com/typicode/lowdb/blob/master/src/adapters/FileAsync.js)
3. Investigate how json-server handles the situation

User Settings

Components

• Settings Form

  • Notification Settings
  • Transaction Privacy

• Edit Profile

  • First Name
  • Last Name
  • Change Password
  • Change Phone Number

• Tests

NPM Scripts Experience

Spec

• Starting the app for normal usage with pre-existing activity

  • yarn start
  • Seed with sample fake data
    • yarn db:seed:dev

• Starting the app for normal usage with no activity (empty state)

  • yarn start:empty
  • Seeded with an empty seed
    • yarn db:seed:empty

• Starting the app for development

  • Default: yarn dev
  • Alias: yarn start:dev
  • Watch mode via nodemon (backend) and react-scripts (frontend)
  • Opens Cypress after full app start
  • Seeded with yarn db:seed:dev

• Start the app just for testing

  • Cypress (open): yarn test
  • Cypress (run): yarn test:headless
  • Cypress (CI): yarn test:ci
  • Cypress (API only): yarn test:api
    • This is dependent if we even want to show isolated API tests.
  • Unit: yarn test:unit

Contact API

Data Model

• id | string
• uuid | string
• user_id | User.id
• contact_user_id | User.id
• created_at | timestamp (ISO 8601)
• modified_at | timestamp (ISO 8601)

HTTP API

• GET /contacts/:username (scoped-user?)
  • Tested
• POST /contacts (scoped-user)
  • Validate body
  • Tested
• DELETE /contacts/:contact_id (scoped-user)
  • Validate param
  • Tested

Searchable Users List

Components

• User List

  • Avatar (initials)
  • First name
  • Last name

• Search People

  • Search Box (Search all users by username or name)

• Tests

Cleanup and migrate rwa-react setup into pay-app repo

Get current rwa-react loose ends finalized and copy project as initial commit into pay-app.

• Passport Local Auth installation
• Port backend to TypeScript
• Remove TailwindCSS

Filter Transactions by date range

Objective

A user can filter transactions within the main feed by a specified date range via a date range picker UI.

Spec

• The date picker UI should adhere to material design date picker pattern:

More details about the date picker design standard here.

• The user will be provided with two date input pickers:
  • Start Date field
  • End Date Field

Bank Accounts UI

• New Bank Account Button

• Create Bank Account Form

• Bank Accounts List

• Delete Bank Account

Like API

Data Model

• id | string
• uuid | string
• user_id | User
• transaction_id | Transaction
• created_at | timestamp (ISO 8601)
• modified_at | timestamp (ISO 8601)

Dev Checklist

• Create Model
• Unit tests
• Helper methods
• Generate fake data

HTTP API

• GET /likes/:transaction_id
  • Validated
  • Tested
  • comply with user privacy level
• POST /likes/:transaction_id
  • Validated
  • Tested
  • comply with user privacy level

Align Cypress specs with User Flows

Implement Basic Local Auth

Setup Passport Local Auth against User API

Transaction Like

Like Transaction functionality

• Create Like for Transaction
• Display Likes for Transaction
• Add to Transaction List Item
• Tests

Cleanup: Refactors to Frontend

Various refactors to frontend to:

• Cleanup variable names

• Restructure components to containers

• SignUp Component

  • SignUp Container
  • SignUpForm Component

• SignIn Component

  • SignIn Container
  • SignInForm Component

• Layout Component

  • MainContainer
  • MainLayout Component
  • NavDrawer Component
  • NavBar Component

Create Transaction

Create Transaction functionality

• Create Transaction
  • Add Recipients
    • Pay
    • Request

Bank Transfer API

Data Model

• id | string
• uuid | string
• source | BankAccount
• user_id | User.id - added for ease of lookup for scoped user queries
• amount | number
• type | enumerated string: "deposit" | "withdrawal"
• transaction_id | Transaction
• created_at | timestamp (ISO 8601)
• modified_at | timestamp (ISO 8601)

Data

• Generate Fake Data

HTTP API

• GET /bank_transfers (scoped-user)

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Found renovate config warnings

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency node to version v20.12.2 🌟
• chore(deps): update dependency yarn to version 1.22.22 🌟
• fix(deps): update dependency axios to version 0.28.1 🌟
• chore(deps): update dependency eslint to version 8.57.0 🌟 (eslint, eslint-plugin-cypress, prettier)
• fix(deps): update dependency @babel/core to version 7.24.4 🌟 (@babel/core, @babel/plugin-syntax-flow)
• chore(deps): update dependency @testing-library/jest-dom to version 6.4.2 🌟 (major) (@testing-library/jest-dom, @testing-library/react)
• chore(deps): update dependency http-proxy-middleware to version 3.x 🌟
• chore(deps): update dependency vite-plugin-istanbul to version 6.x 🌟

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• fix(deps): update dependency aws-amplify to version 6.0.28 🌟
• chore(deps): update dependency @faker-js/faker to version 6.3.1 🌟 (@faker-js/faker, concurrently, dotenv, fuse.js, jwks-rsa, start-server-and-test)
• fix(deps): update dependency @okta/jwt-verifier to version 3.1.0 🌟 (@okta/jwt-verifier, @okta/okta-auth-js, @okta/okta-react)
• fix(deps): update dependency webpack to version 5.91.0 🌟

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @types/bcryptjs to version 2.4.6 🌟 (@types/bcryptjs, @types/bluebird, @types/connect-flash, @types/cors, @types/detect-port, @types/dinero.js, @types/json-server, @types/jsonwebtoken, @types/lowdb, @types/morgan, @types/react, @types/react-dom, @types/react-infinite-calendar, @types/react-router, @types/react-virtualized, @types/shortid)
• chore(deps): update dependency @cypress/code-coverage to version 3.12.35 🌟 (@cypress/code-coverage, @percy/cli, @testing-library/jest-dom, @testing-library/react, @types/connect-history-api-fallback, @types/lodash, @types/node, @types/validator, @types/webpack-env, @types/yup, @vitejs/plugin-react, http-proxy-middleware, npm, vite, vitest)
• chore(deps): update dependency graphql-tools to version 8.3.20 🌟
• chore(deps): update dependency @faker-js/faker to version 8.x 🌟 (major) (@faker-js/faker, concurrently, fuse.js, husky, jwks-rsa, lowdb, start-server-and-test, uuid, yup)
• chore(deps): update dependency @types/http-proxy-middleware to version 1.x 🌟 (major) (@types/http-proxy-middleware, @types/jsonwebtoken, @types/jwt-decode, @types/uuid)
• chore(deps): update dependency connect-history-api-fallback to version 2.x 🌟
• chore(deps): update dependency eslint to version 9.x 🌟 (major) (eslint, eslint-config-prettier)
• chore(deps): update dependency express-jwt to version 8.x 🌟 (major) (express-jwt, express-validator, nodemon)
• chore(deps): update dependency graphql-tools to version 9.x 🌟
• chore(deps): update dependency jsdom to version 24.x 🌟
• chore(deps): update dependency npm to version 10.x 🌟
• chore(deps): update dependency patch-package to version 8.x 🌟
• chore(deps): update dependency typescript to version 5.x 🌟
• chore(deps): update dependency vite to version 5.x 🌟
• chore(deps): update dependency vitest to version 1.x 🌟
• fix(deps): update dependency @graphql-tools/graphql-file-loader to version 8.x 🌟 (major) (@graphql-tools/graphql-file-loader, @graphql-tools/load)
• fix(deps): update dependency @xstate/react to version 4.x 🌟 (major) (@xstate/react, xstate)
• fix(deps): update dependency axios to version 1.x 🌟 (major) (axios, clsx, date-fns)
• fix(deps): update dependency history to version 5.x 🌟 (major) (history, react-router, react-router-dom)
• chore(deps): update dependency to version 🌟
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency passport to version 0.6.0 🌟
• fix(deps): update dependency @material-ui/core to version 🌟 (@material-ui/core, @material-ui/icons)
• fix(deps): update dependency react-number-format to version 5.x 🌟

Detected dependencies

circleci

.circleci/config.yml

• cypress 3.3.1

github-actions

.github/workflows/add_issue_to_triage_board.yml

.github/workflows/main.yml

• actions/checkout v4
• cypress-io/github-action v6
• actions/upload-artifact v4
• actions/checkout v4
• actions/download-artifact v4
• cypress-io/github-action v6
• actions/checkout v4
• actions/download-artifact v4
• cypress-io/github-action v6
• actions/checkout v4
• actions/download-artifact v4
• cypress-io/github-action v6
• actions/checkout v4
• actions/download-artifact v4
• cypress-io/github-action v6

.github/workflows/merge-develop-into-flake-demo.yml

• actions/checkout v4
• actions/github-script v7

.github/workflows/triage_new_comment_workflow.yml

nodenv

.node-version

• node 20.12.0

npm

package.json

• @auth0/auth0-react 2.2.4
• @babel/core 7.23.9
• @babel/plugin-syntax-flow ^7.14.5
• @babel/plugin-transform-react-jsx ^7.14.9
• @graphql-tools/graphql-file-loader 7.5.17
• @graphql-tools/load 7.8.14
• @material-ui/core 4.12.4
• @material-ui/icons 4.11.3
• @material-ui/lab 4.0.0-alpha.61
• @matheusluizn/react-google-login ^5.1.6
• @okta/jwt-verifier ^3.0.1
• @okta/okta-auth-js ^7.3.0
• @okta/okta-react ^6.7.0
• @types/detect-port ^1.3.2
• @xstate/react 3.2.2
• aws-amplify ^6.0.16
• axios 0.28.0
• clsx 1.2.1
• date-fns 2.30.0
• detect-port ^1.5.1
• dinero.js 1.9.1
• formik 2.4.5
• history 4.10.1
• postinstall-postinstall ^2.1.0
• react 18.2.0
• react-dom 18.2.0
• react-infinite-calendar 2.3.1
• react-number-format 4.9.4
• react-router 5.3.4
• react-router-dom 5.3.4
• react-virtualized 9.22.5
• shortid 2.2.16
• uuid 8.3.2
• webpack 5
• xstate 4.38.3
• yup 0.32.11
• @babel/plugin-proposal-private-property-in-object 7.21.11
• @cypress/code-coverage ^3.10.0-dev.1
• @cypress/instrument-cra 1.4.0
• @cypress/vite-dev-server ^5.0.7
• @faker-js/faker 6.1.2
• @percy/cli ^1.27.4
• @percy/cypress 3.1.2
• @testing-library/jest-dom ^5.16.5
• @testing-library/react ^14.0.0
• @types/bcryptjs 2.4.2
• @types/bluebird 3.5.36
• @types/connect-flash 0.0.37
• @types/connect-history-api-fallback 1.3.5
• @types/cors 2.8.12
• @types/dinero.js 1.9.0
• @types/express 4.17.21
• @types/express-paginate 1.0.4
• @types/express-serve-static-core 4.17.2
• @types/express-session 1.18.0
• @types/http-proxy-middleware 0.19.3
• @types/json-server 0.14.4
• @types/jsonwebtoken 8.5.8
• @types/jwt-decode 2.2.1
• @types/lodash 4.14.181
• @types/lowdb 1.0.11
• @types/morgan 1.9.3
• @types/node ^20.11.25
• @types/passport 1.0.16
• @types/react ^18.2.14
• @types/react-dom ^18.2.6
• @types/react-infinite-calendar 2.3.6
• @types/react-router 5.1.18
• @types/react-router-dom 5.3.3
• @types/react-virtualized 9.21.21
• @types/shortid 0.0.29
• @types/uuid 8.3.4
• @types/validator 13.7.2
• @types/webpack-env 1.16.4
• @types/yup 0.29.13
• @vitejs/plugin-react ^4.0.2
• bcryptjs 2.4.3
• concurrently 7.1.0
• connect-history-api-fallback 1.6.0
• cors 2.8.5
• cross-env 7.0.3
• cypress ^13.7.1
• dotenv 16.0.0
• eslint ^8.44.0
• eslint-config-prettier 8.10.0
• eslint-config-react-app ^7.0.1
• eslint-plugin-cypress 2.15.1
• eslint-plugin-prettier ^5.0.0
• express 4.19.2
• express-graphql 0.12.0
• express-jwt 6.1.2
• express-paginate 1.0.2
• express-session 1.18.0
• express-validator 6.15.0
• fuse.js 6.5.3
• graphql 16.8.1
• graphql-tools 8.2.7
• http-proxy-middleware 0.19.1
• husky 7.0.4
• istanbul-lib-coverage 3.2.2
• jsdom ^22.1.0
• json 11.0.0
• jwks-rsa 2.0.5
• lowdb 1.0.0
• morgan 1.10.0
• ncp 2.0.0
• nodemon 2.0.22
• npm ^9.8.0
• nyc 15.1.0
• passport 0.5.0
• passport-local 1.0.0
• patch-package ^7.0.0
• prettier ^3.0.0
• start-server-and-test 1.14.0
• ts-node 10.9.2
• typescript 4.9.5
• vite ^4.4.2
• vite-plugin-eslint ^1.8.1
• vite-plugin-istanbul ^4.1.0
• vitest ^0.33.0
• node ^18.0.0 || >=20.0.0
• yarn 1.22.19

nvm

.nvmrc

• node 20.12.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Transaction API

Data Model

• id | string
• uuid | string
• source | BankAccount
• amount | number
• description | string
• privacy_level | enumerated string: "public" | "private" | "contacts" (default User.default_privacy_level)
• receiver_id | User
• sender_id | User
• balance_at_completion | number
• status | enumrated string: "pending" | "incomplete" | "complete"
• request (object)
  • status | enumrated string: "pending" | "accepted" | "rejected"
  • resolved_at | timestamp (ISO 8601)
• created_at | timestamp (ISO 8601)
• modified_at | timestamp (ISO 8601)

HTTP API

• GET /transactions - scoped user, auth-required

  • Validate params
  • Tested
  • Query Params:
    • status (default: "complete")
    • request_status (default: none)
    • receiver_id
    • sender_id
  • TODO: Complex logic outside of vanilla lowdb, Created #18
  • range_start_ts
  • range_end_ts
  • amount_max
  • amount_min

• GET /transactions/contacts - scoped user, auth-required

  • Validate params
  • Tested
  • Query Params:
    • status (default: "complete")
    • request_status (default: none)
    • receiver_id
    • sender_id
  • TODO: Complex logic outside of vanilla lowdb, Created #18
  • range_start_ts
  • range_end_ts
  • amount_max
  • amount_min

• GET /transactions/public - auth-required

  • Validate params
  • Tested
  • Sorted
  • Query Params:
    • order
      • default: public transactions of contacts first ordered by most recent, then all other transactions ordered by most recent

• POST /transactions - scoped-user

  • Validate params
  • Tested
  • Body Parameters:
    • type: "payment" | "request"
    • source: bank_account_id
    • amount
    • description
    • privacy_level: "public" | "private" | "contacts"
    • receiver_id
    • sender_id

• PATCH /transactions/:transaction_id - scoped-user

  • Validate params
  • Tested
  • Body Parameters:
    • request_status: "accepted" | "rejected"

Pagination / Infinite scroll for Transactions Lists

Implement pagination via infinite scroll for Transaction Lists for testing scenarios

Test Seed Endpoints

Add test data endpoints /testData/:entity to serve entity portion of data from database.test.json

• users
• contacts
• bankaccounts
• notifications
• transactions
• likes
• comments
• banktransfers

Site Chrome

Components

• Side Navigation

  • Profile
  • Settings
  • Logout

• Notification Indicator

• Routing

  • Transaction Public (scaffold) - default route

Enable renovate bot

Please enable renovate bot for this repo

Comment API

Data Model

• id | number
• uuid | string
• content | string
• user_id | User
• transaction_id | Transaction
• created_at | timestamp (ISO 8601)
• modified_at | timestamp (ISO 8601)

HTTP API

• GET /comments/:transaction_id
  • Validated
  • Tested
  • comply with user privacy level
• POST /comments/:transaction_id
  • Validated
  • Tested
  • comply with user privacy level

Update Dependencies (Renovate Bot)

This master issue contains a list of Renovate updates and their statuses.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to ignore the schedule.

• fix(deps): Pin dependency @babel/cli to version 7.7.7 🌟 (@babel/cli, @babel/plugin-transform-typescript, @babel/preset-env, @hapi/joi, @material-ui/core, @types/bcrypt, @types/connect-flash, @types/dotenv, @types/express-session, @types/express-validator, @types/faker, @types/hapi__joi, @types/json-server, @types/lodash, @types/lowdb, @types/morgan, @types/passport, @types/shortid, @types/supertest, @types/uuid, @types/validator, bcrypt, connect-flash, dotenv, express-session, express-validator, faker, libphonenumber-js, nodemon, passport, passport-local, shortid, supertest, ts-node)
• chore(deps): Update dependency cypress to version 3.8.2 🌟
• chore(deps): Update dependency start-server-and-test to version 1.10.7 🌟
• fix(deps): Update dependency @types/jest to version 24.9.0 🌟
• fix(deps): Update dependency @types/node to version 12.12.25 🌟
• fix(deps): Update dependency @types/react to version 16.9.19 🌟
• fix(deps): Update dependency @types/react-dom to version 16.9.5 🌟
• fix(deps): Update dependency @types/react-redux to version 7.1.6 🌟
• fix(deps): Update dependency @types/react-router to version 5.1.4 🌟
• fix(deps): Update dependency axios to version 0.19.2 🌟
• fix(deps): Update dependency typescript to version 3.7.5 🌟
• chore(deps): Update dependency to version 🌟

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): Update dependency @babel/cli to version 7.8.3 🌟 (@babel/cli, @babel/plugin-transform-typescript, @babel/preset-env)
• fix(deps): Update dependency @hapi/joi to version 17.1.0 🌟
• fix(deps): Update dependency @material-ui/core to version 4.9.0 🌟
• fix(deps): Update dependency @types/faker to version 4.1.9 🌟
• fix(deps): Update dependency @types/hapi__joi to version 16.0.7 🌟
• fix(deps): Update dependency libphonenumber-js to version 1.7.31 🌟
• Check this option to rebase all the above open PRs at once

---

Advanced

• Check this box to trigger a request for Renovate to run again on this repository

Frontend UI

• Site Chrome
• Authentication
• Transactions
• Profile
• Notifications
• Transfer Balance
• Requests
• Settings
• Search

Notifications API

PaymentNotification

Dev Checklist

• Create Model
• Unit tests
• Helper methods
• Generate fake data

Data Model

• id | string
• uuid | string
• user_id | User.id - added for ease of lookup for scoped user queries
• status | enumerated string: "requested" | "received" | "incomplete"
• transaction_id | Transaction
• is_read | boolean (default: false)
• created_at | timestamp (ISO 8601)
• modified_at | timestamp (ISO 8601)

LikeNotification

Dev Checklist

• Create Model
• Unit tests
• Helper methods
• Generate fake data

Data Model

• id | string
• uuid | string
• user_id | User.id - added for ease of lookup for scoped user queries
• like_id | Like
• transaction_id | Transaction
• is_read | boolean (default: false)
• created_at | timestamp (ISO 8601)
• modified_at | timestamp (ISO 8601)

CommentNotification

Dev Checklist

• Create Model
• Unit tests
• Helper methods
• Generate fake data

Data Model

• id | string
• uuid | string
• user_id | User.id - added for ease of lookup for scoped user queries
• comment_id | Comment
• transaction_id | Transaction
• is_read | boolean (default: false)
• created_at | timestamp (ISO 8601)
• modified_at | timestamp (ISO 8601)

HTTP API for all Notification data

• GET /notifications (scoped-user)
• POST /notifications/bulk (scoped-user)
  • Validated
  • Tested
  • Body

    [{
      type: "payment" | "like" | "comment"
      id: payment_notification_id | like_notification_id | comment_notification_id
    }]
    

• PATCH /notifications/:notification_id

Test Case Assessment / Review

Assess existing resources and tests implemented during RWA build. Compile a list of test cases and concepts to be covered in the RWA for MVP.

• Review cypress-example-recipes for valid test cases
• Review cypress-example-kitchensink for test cases
• List test cases outside of current examples
• List additional test cases (Kevin / Amir)
• Normalize lists into master test list (Kevin / Amir)
• Note where test cases are achieved in existing RWA tests

Review / Refactor

• auth.spec.ts
• bankaccounts.spec.ts
• notifications.spec.ts
• transaction-view.spec.ts
• new-transaction.spec.ts
• transaction-feeds.spec.ts
• user-settings.spec.ts

---

cypress-example-recipes

Compelling test cases. Determine if accomplished in RWA tests or should be.

• Environment Variables
• Dynamic Tests
• Fixtures
• Custom Commands
• Tab Handing and Links
• Hover and Hidden Elements
• Form Interactions
• Drag and Drop
• Wait for static resource
• Authentication
• TypeScript with Webpack / Use TypeScript with Cypress
• E2E API Testing
• A11y Testing
• Stubbing Functions
• Stubbing window.fetch
• Stubbing window.open and console.log
• Stubbing Google Analytics
• Database Seeding
• Visual Testing
• Code Coverage
• App Actions

cypress-example-kitchensink (Techniques / Concepts)

Covered in some form in RWA tests

• CI via Circle CI Orb
  • Multiple run groups
• Actions
• Aliasing
• Assertions
• Connectors
• Cookies
• Cypress API
• Files
• LocalStorage
• Location
• Misc
• Navigation
• Network Requests
• Querying
• Spies, Stubs, Clocks
• Traversal
• Utilities
• Viewport
• Waiting
• Window

Additional Test Cases / Concepts

• Lists
  • Infinite Scroll
• Navigation (Drawer) (hide / show)
• Redirects (Location)
• Multiple User Interactions (Auth -> User A -> Interaction -> Auth -> User B -> Assertion)
• Seeding from routes

Implemented in RWA

• Run Tests in CI via Circle CI Orb
  • Multiple run groups (API tests)
• TypeScript with Webpack / Use TypeScript with Cypress
• Database Seeding
• Environment Variables
• Dynamic Tests
• Fixtures
• Custom Commands
• Form Interactions
  • Happy path
  • Validation / Errors
  • Button Disable
• Authentication
  • Basic Auth (user/pass) via HTML Form
  • CSRF Tokens (Future)
  • JWT (Future)
• E2E API Testing
• Lists
  • Infinite Scroll

Evaluate/Implement expanded query params for /transactions

From #3:

The following query params are outside the scope of vanilla lowdb.

Determine if they have value enough to warrant additional implementation time for custom comparators built with lodash, date-fns, etc.

• dateRangeStart #129
• dateRangeEnd #129
• amountMin
• amountMax

Accept/Reject Payment Requests

Transaction Detail page add the ability to

• Accept Request
• Reject Request

??? Transaction Item, if sender

• Cancel Request

• Tests

Transfer Balance

• Select Bank Account

• Instant Transaction with Fee

• No Fee Transaction

• Tests