Adds basic Cypress tests for important functionality

cloud.dev.deploy.yml

@@ -6,6 +6,7 @@ steps:
   args: ['run', 'test']
 - name: 'gcr.io/cloud-builders/npm'
   env: ['CI=true', 'REACT_APP_EFFEKT_API_URL=https://dev.data.gieffektivt.no']
+  args: ['run', 'cy:run']
   args: ['run', 'build']
 - name: 'gcr.io/cloud-builders/gsutil'
   args: ['-m', 'cp', '-r', 'build/*', 'gs://effekt-widget-react-dev/']

cypress/integration/bank.recurring.spec.ts

@@ -0,0 +1,36 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../support/index.d.ts" />
+import "cypress-react-selector";
+import { API_URL } from "../../src/config/api";
+
+context("Window", () => {
+  before(() => {
+    cy.visit("http://localhost:3000");
+    cy.waitForReact();
+  });
+
+  it("End-2-End recurring bank donation", () => {
+    cy.pickMethod("bank");
+    cy.inputDonorValues();
+
+    cy.intercept("POST", `${API_URL}/donations/register`).as(
+      "registerDonation"
+    );
+
+    cy.get("button").click();
+    cy.wait(500);
+
+    cy.get("button").click();
+    cy.wait("@registerDonation")
+      .its("response.statusCode")
+      .should("be.oneOf", [200, 304]);
+    cy.wait(500);
+
+    cy.get("[data-cy=nextReferral]").click();
+
+    cy.get("[data-cy=kidNumber]").should(($kid) => {
+      const kid = $kid.text();
+      expect(kid).to.be.length(8);
+    });
+  });
+});

cypress/integration/bank.single.spec.ts

@@ -0,0 +1,37 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../support/index.d.ts" />
+import "cypress-react-selector";
+import { API_URL } from "../../src/config/api";
+
+context("Window", () => {
+  before(() => {
+    cy.visit("http://localhost:3000");
+    cy.waitForReact();
+  });
+
+  it("End-2-End single bank donation", () => {
+    cy.pickRecurring(false);
+    cy.pickMethod("bank");
+    cy.inputDonorValues();
+
+    cy.intercept("POST", `${API_URL}/donations/register`).as(
+      "registerDonation"
+    );
+
+    cy.get("button").click();
+    cy.wait(500);
+
+    cy.get("button").click();
+    cy.wait("@registerDonation")
+      .its("response.statusCode")
+      .should("be.oneOf", [200, 304]);
+    cy.wait(500);
+
+    cy.get("[data-cy=nextReferral]").click();
+
+    cy.get("[data-cy=kidNumber]").should(($kid) => {
+      const kid = $kid.text();
+      expect(kid).to.be.length(8);
+    });
+  });
+});

cypress/integration/paypal.recurring.spec.ts

@@ -0,0 +1,37 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../support/index.d.ts" />
+import "cypress-react-selector";
+import { API_URL } from "../../src/config/api";
+
+context("Window", () => {
+  before(() => {
+    cy.visit("http://localhost:3000");
+    cy.waitForReact();
+  });
+
+  it("End-2-End single paypal donation", () => {
+    const randomSum = Math.floor(Math.random() * 1000) + 100;
+
+    cy.intercept("POST", `${API_URL}/donations/register`).as(
+      "registerDonation"
+    );
+
+    cy.pickMethod("paypal");
+    cy.inputDonorValues();
+
+    cy.get("button").click();
+    cy.wait(500);
+
+    cy.react("TextInput", { props: { name: "sum" } }).type(
+      randomSum.toString()
+    );
+
+    cy.get("button").click();
+    cy.wait("@registerDonation")
+      .its("response.statusCode")
+      .should("be.oneOf", [200, 304]);
+    cy.wait(500);
+
+    cy.get("[data-cy=nextReferral]").click();
+  });
+});

cypress/integration/paypal.single.spec.ts

@@ -0,0 +1,38 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../support/index.d.ts" />
+import "cypress-react-selector";
+import { API_URL } from "../../src/config/api";
+
+context("Window", () => {
+  before(() => {
+    cy.visit("http://localhost:3000");
+    cy.waitForReact();
+  });
+
+  it("End-2-End single paypal donation", () => {
+    const randomSum = Math.floor(Math.random() * 1000) + 100;
+
+    cy.intercept("POST", `${API_URL}/donations/register`).as(
+      "registerDonation"
+    );
+
+    cy.pickRecurring(false);
+    cy.pickMethod("paypal");
+    cy.inputDonorValues();
+
+    cy.get("button").click();
+    cy.wait(500);
+
+    cy.react("TextInput", { props: { name: "sum" } }).type(
+      randomSum.toString()
+    );
+
+    cy.get("button").click();
+    cy.wait("@registerDonation")
+      .its("response.statusCode")
+      .should("be.oneOf", [200, 304]);
+    cy.wait(500);
+
+    cy.get("[data-cy=nextReferral]").click();
+  });
+});

cypress/integration/shares.spec.ts

@@ -0,0 +1,59 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../support/index.d.ts" />
+import "cypress-react-selector";
+import { API_URL } from "../../src/config/api";
+import { ShareType } from "../../src/types/Enums";
+
+context("Window", () => {
+  before(() => {
+    cy.intercept("GET", `${API_URL}/organizations/active`).as(
+      "getOrganizations"
+    );
+
+    cy.visit("http://localhost:3000");
+    cy.waitForReact();
+
+    cy.wait("@getOrganizations")
+      .its("response.statusCode")
+      .should("be.oneOf", [200, 304]);
+  });
+
+  it("End-2-End shared donation", () => {
+    cy.intercept("POST", `${API_URL}/donations/register`).as(
+      "registerDonation"
+    );
+
+    cy.pickMethod("bank");
+    cy.pickAnonymous();
+    cy.get("button").click();
+    cy.wait(500);
+
+    // DonationPane
+    cy.react("RichSelectOption", {
+      props: { value: ShareType.CUSTOM },
+    }).click();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cy.get("@getOrganizations").then((req: any) => {
+      const organizations = req.response.body.content;
+      for (let i = 0; i < 4; i += 1) {
+        cy.get(`input[label="${organizations[i].name}"]`).type("25", {
+          force: true,
+        });
+      }
+    });
+    cy.get("button").click();
+
+    // ReferralPane
+    cy.wait("@registerDonation")
+      .its("response.statusCode")
+      .should("be.oneOf", [200, 304]);
+    cy.wait(500);
+    cy.get("[data-cy=nextReferral]").click();
+
+    // PaymentPane
+    cy.get("[data-cy=kidNumber]").should(($kid) => {
+      const kid = $kid.text();
+      expect(kid).to.be.length(8);
+    });
+  });
+});

cypress/integration/vipps.single.spec.ts

@@ -0,0 +1,46 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../support/index.d.ts" />
+import "cypress-react-selector";
+import { API_URL } from "../../src/config/api";
+
+context("Window", () => {
+  before(() => {
+    cy.visit("http://localhost:3000");
+    cy.waitForReact();
+  });
+
+  const donationState = () => cy.getState().its("donation");
+
+  it("End-2-End single vipps donation", () => {
+    const randomSum = Math.floor(Math.random() * 1000) + 100;
+
+    cy.intercept("POST", `${API_URL}/donations/register`).as(
+      "registerDonation"
+    );
+
+    cy.pickRecurring(false);
+    cy.pickMethod("vipps");
+    cy.inputDonorValues();
+
+    cy.get("button").click();
+    cy.wait(500);
+
+    cy.react("TextInput", { props: { name: "sum" } }).type(
+      randomSum.toString()
+    );
+
+    cy.get("button").click();
+    cy.wait("@registerDonation")
+      .its("response.statusCode")
+      .should("be.oneOf", [200, 304]);
+    cy.wait(500);
+
+    cy.get("[data-cy=nextReferral]").click();
+
+    donationState()
+      .its("paymentProviderURL")
+      .should((url: string) => {
+        expect(url).to.have.string("vipps.no");
+      });
+  });
+});

cypress/support/commands.ts

@@ -0,0 +1,41 @@
+import { DonorType } from "../../src/types/Temp";
+
+const getState = () => cy.window().its("store").invoke("getState");
+
+const pickRecurring = (recurring: boolean) => {
+  cy.react("RichSelectOption", {
+    props: { value: recurring ? 0 : 1 },
+  }).click();
+};
+
+const pickMethod = (methodName: string) => {
+  cy.react("MethodButton", { props: { className: methodName } }).click();
+  cy.wait(500);
+};
+
+const pickAnonymous = () => {
+  cy.react("RichSelectOption", {
+    props: { value: DonorType.ANONYMOUS },
+  }).click();
+};
+
+const inputDonorValues = () => {
+  cy.react("TextInput", { props: { name: "name" } }).type("Cypress Test");
+  cy.react("TextInput", { props: { name: "email" } }).type(
+    `[email protected]`
+  );
+  cy.get("[data-cy=checkboxTaxDeduction]").click("left");
+  cy.get("[data-cy=checkboxNewsletter]").click("left");
+  cy.get("[data-cy=checkboxPrivacyPolicy]").click("left");
+
+  cy.react("TextInput", { props: { name: "ssn" } }).type("123456789");
+  cy.wait(500);
+};
+
+Cypress.Commands.add("getState", getState);
+Cypress.Commands.add("pickRecurring", pickRecurring);
+Cypress.Commands.add("pickMethod", pickMethod);
+Cypress.Commands.add("pickAnonymous", pickAnonymous);
+Cypress.Commands.add("inputDonorValues", inputDonorValues);
+
+export {};

cypress/support/index.d.ts

@@ -1,12 +1,11 @@
-// load type definitions that come with Cypress module
-// <reference types="cypress" />
+/// <reference types="cypress" />
 
 declare namespace Cypress {
-    interface Chainable {
-      /**
-       * Custom command to select DOM element by data-cy attribute.
-       * @example cy.dataCy('greeting')
-      */
-      dataCy(value: string): Chainable<Element>
-    }
-  }
+  export interface Chainable {
+    getState(): Chainable<Element>;
+    pickRecurring(recurring: boolean): Chainable<Element>;
+    pickMethod(methodName: string): Chainable<Element>;
+    pickAnonymous(): Chainable<Element>;
+    inputDonorValues(): Chainable<Element>;
+  }
+}

cypress/support/index.ts

@@ -13,6 +13,4 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-import './commands'
-import 'cypress-react-selector';
-
+import "./commands";