Add demo of Cypress e2e tests.

cypress.json

@@ -0,0 +1,3 @@
+{
+    "chromeWebSecurity": false
+}

cypress/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:cypress/recommended"]
+}

cypress/.gitignore

@@ -0,0 +1,2 @@
+screenshots/*
+videos/*

cypress/global.d.ts

@@ -0,0 +1,124 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  import { authService } from "../src/machines/authMachine";
+  import { createTransactionService } from "../src/machines/createTransactionMachine";
+  import { publicTransactionService } from "../src/machines/publicTransactionsMachine";
+  import { contactsTransactionService } from "../src/machines/contactsTransactionsMachine";
+  import { personalTransactionService } from "../src/machines/personalTransactionsMachine";
+  import {
+    User,
+    BankAccount,
+    Like,
+    Comment,
+    Transaction,
+    BankTransfer,
+    Contact,
+  } from "../src/models";
+
+  interface CustomWindow extends Window {
+    authService: typeof authService;
+    createTransactionService: typeof createTransactionService;
+    publicTransactionService: typeof publicTransactionService;
+    contactTransactionService: typeof contactsTransactionService;
+    personalTransactionService: typeof personalTransactionService;
+  }
+
+  type dbQueryArg = {
+    entity: string;
+    query: object | [object];
+  };
+
+  interface Chainable {
+    /**
+     *  Window object with additional properties used during test.
+     */
+    window(options?: Partial<Loggable & Timeoutable>): Chainable<CustomWindow>;
+
+    /**
+     * Custom command to make taking Percy snapshots with full name formed from the test title + suffix easier
+     */
+    visualSnapshot(maybeName?): Chainable<any>;
+
+    getBySel(dataTestAttribute: string, args?: any): Chainable<Element>;
+    getBySelLike(dataTestPrefixAttribute: string, args?: any): Chainable<Element>;
+
+    /**
+     *  Cypress task for directly querying to the database within tests
+     */
+    task(
+      event: "filter:database",
+      arg: dbQueryArg,
+      options?: Partial<Loggable & Timeoutable>
+    ): Chainable<any[]>;
+
+    /**
+     *  Cypress task for directly querying to the database within tests
+     */
+    task(
+      event: "find:database",
+      arg?: any,
+      options?: Partial<Loggable & Timeoutable>
+    ): Chainable<any>;
+
+    /**
+     * Find a single entity via database query
+     */
+    database(operation: "find", entity: string, query?: object, log?: boolean): Chainable<any>;
+
+    /**
+     * Filter for data entities via database query
+     */
+    database(operation: "filter", entity: string, query?: object, log?: boolean): Chainable<any[]>;
+
+    /**
+     * Fetch React component instance associated with received element subject
+     */
+    reactComponent(): Chainable<any>;
+
+    /**
+     * Select data range within date range picker component
+     */
+    pickDateRange(startDate: Date, endDate: Date): Chainable<void>;
+
+    /**
+     * Select transaction amount range
+     */
+    setTransactionAmountRange(min: number, max: number): Chainable<any>;
+
+    /**
+     * Paginate to the next page in transaction infinite-scroll pagination view
+     */
+    nextTransactionFeedPage(service: string, page: number): Chainable<any>;
+
+    /**
+     * Logs-in user by using UI
+     */
+    login(username: string, password: string, rememberUser?: boolean): void;
+
+    /**
+     * Logs-in user by using API request
+     */
+    loginByApi(username: string, password?: string): Chainable<Response>;
+
+    /**
+     * Logs in bypassing UI by triggering XState login event
+     */
+    loginByXstate(username: string, password?: string): Chainable<any>;
+
+    /**
+     * Logs out via bypassing UI by triggering XState logout event
+     */
+    logoutByXstate(): Chainable<void>;
+
+    /**
+     * Switch current user by logging out current user and logging as user with specified username
+     */
+    switchUser(username: string): Chainable<any>;
+
+    /**
+     * Create Transaction via bypassing UI and using XState createTransactionService
+     */
+    createTransaction(payload): Chainable<any>;
+  }
+}

cypress/integration/App.spec.js

@@ -0,0 +1,114 @@
+/// <reference types="cypress" />
+
+import { Machine } from "xstate";
+import { createModel } from "@xstate/test";
+
+const feedbackMachine = Machine({
+  id: "feedback",
+  initial: "question",
+  on: {
+    ESC: "closed",
+  },
+  states: {
+    question: {
+      on: {
+        CLICK_GOOD: "thanks",
+        CLICK_BAD: "form",
+        CLOSE: "closed",
+      },
+      meta: {
+        test: function () {
+          cy.get("[data-testid=question-screen]").contains(
+            "How was your experience?"
+          );
+        },
+      },
+    },
+    form: {
+      on: {
+        SUBMIT: [
+          {
+            target: "thanks",
+            cond: (_, e) => e.value.length,
+          },
+          // This should probably target "closed",
+          // but the demo app doesn't behave that way!
+          { target: "thanks" },
+        ],
+        CLOSE: "closed",
+      },
+      meta: {
+        test: function () {
+          cy.get("[data-testid=form-screen]").contains("Care to tell us why?");
+        },
+      },
+    },
+    thanks: {
+      on: {
+        CLOSE: "closed",
+      },
+      meta: {
+        test: function () {
+          cy.get("[data-testid=thanks-screen]").contains(
+            "Thanks for your feedback."
+          );
+        },
+      },
+    },
+    closed: {
+      type: "final",
+      meta: {
+        test: function () {
+          cy.get("[data-testid=question-screen]").should("not.exist");
+          cy.get("[data-testid=form-screen]").should("not.exist");
+          cy.get("[data-testid=thanks-screen]").should("not.exist");
+        },
+      },
+    },
+  },
+});
+
+const testModel = createModel(feedbackMachine, {
+  events: {
+    CLICK_GOOD: function () {
+      cy.get("[data-testid=good-button]").click();
+    },
+    CLICK_BAD: function () {
+      cy.get("[data-testid=bad-button]").click();
+    },
+    CLOSE: function () {
+      cy.get("[data-testid=close-button]").click();
+    },
+    ESC: function () {
+      cy.get("body").type("{esc}");
+      // And do this once again to avoid some occasional flake...
+      cy.get("body").type("{esc}");
+    },
+    SUBMIT: {
+      exec: function (_, event) {
+        if (event.value?.length)
+          cy.get("[data-testid=response-input]").type(event.value);
+        cy.get("[data-testid=submit-button]").click();
+      },
+      cases: [{ value: "something" }, { value: "" }],
+    },
+  },
+});
+
+const itVisitsAndRunsPathTests = (url) => (path) =>
+  it(path.description, function () {
+    cy.visit(url).then(path.test);
+  });
+
+const itTests = itVisitsAndRunsPathTests(
+  `http://localhost:${process.env.PORT || "3000"}`
+);
+
+context("Feedback App", () => {
+  const testPlans = testModel.getSimplePathPlans();
+  testPlans.forEach((plan) => {
+    describe(plan.description, () => {
+      plan.paths.forEach(itTests);
+    });
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -9,14 +9,17 @@
     "react-dom": "^16.9.0",
     "react-scripts": "^2.1.8",
     "styled-components": "^4.3.2",
-    "xstate": "^4.6.7"
+    "xstate": "^4.16.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "e2e": "jest -c jest.config.js"
+    "e2e": "jest -c jest.config.js --verbose",
+    "cypress": "cypress run",
+    "cypress:open": "cypress open",
+    "cypress:chrome": "cypress open --browser chrome"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -29,8 +32,10 @@
   ],
   "devDependencies": {
     "@testing-library/react": "^9.1.3",
-    "@xstate/test": "0.0.1",
+    "@xstate/test": "^0.4.2",
     "chai": "^4.2.0",
+    "cypress": "^6.5.0",
+    "eslint-plugin-cypress": "^2.11.2",
     "jest-puppeteer": "^4.3.0",
     "puppeteer": "^5.3.1"
   }