Cypress tests for FormContextWithValidation (#47)

Cypress tests

.gitignore

@@ -8,3 +8,4 @@ build
 dev
 coverage
 _config.yml
+cypress/videos

cypress.json

@@ -0,0 +1,3 @@
+{
+    "baseUrl": "http://localhost:3000/"
+}

cypress/integration/BigForm.spec.js

@@ -0,0 +1,37 @@
+describe("Tests for BigForm", () => {
+  beforeEach(() => {
+    cy.visit("");
+  });
+
+  it("test that there are exactly 100 inputs in the form and they have empty value", () => {
+    cy.getByDataTestId("form", "bigForm-form")
+      .should("exist")
+      .within(() => {
+        cy.get("input").should("have.length", 100);
+      });
+
+    for (let index = 0; index < 100; index++) {
+      cy.getByDataTestId("input", `bigForm-input-${index}`)
+        .should("exist")
+        .should("have.value", "");
+    }
+  });
+
+  it("testing input with a large value", () => {
+    const largeText = "A".repeat(200) + "B".repeat(200) + "C".repeat(200);
+    cy.getByDataTestId("input", `bigForm-input-0`).type(largeText);
+    cy.getByDataTestId("input", `bigForm-input-0`).should(
+      "have.value",
+      largeText
+    );
+  });
+
+  it("testing input with special characters", () => {
+    const specialChars = '!@#$%^&*()_+{}|:"<>?';
+    cy.getByDataTestId("input", `bigForm-input-10`).type(specialChars);
+    cy.getByDataTestId("input", `bigForm-input-10`).should(
+      "have.value",
+      specialChars
+    );
+  });
+});

cypress/integration/CollectionAsyncValidation.spec.js

@@ -0,0 +1,27 @@
+// Note : CollectionAsyncValidation is used in SimpleFormWithAsync
+describe("Tests for CollectionAsyncValidation", () => {
+  beforeEach(() => {
+    cy.visit("");
+  });
+
+  it("test for adding and removing new input", () => {
+    cy.getByDataTestId("button", "add-input-simpleFormWithAsync")
+      .first()
+      .click();
+
+    cy.getByDataTestId("input", "input-1-simpleFormWithAsync")
+      .should("exist")
+      .should("have.value", "1")
+      .clear()
+      .type("Hello World")
+      .should("have.value", "Hello World");
+
+    cy.getByDataTestId("button", "remove-input-simpleFormWithAsync")
+      .first()
+      .click();
+
+    cy.getByDataTestId("input", "input-1-simpleFormWithAsync").should(
+      "not.exist"
+    );
+  });
+});

cypress/integration/Email.spec.js

@@ -0,0 +1,36 @@
+// Note : Email is used here for testing is used in SimpleFormWithAsync
+describe("Tests for Email", () => {
+  beforeEach(() => {
+    cy.visit("");
+  });
+
+  it("test for required email", () => {
+    cy.getByDataTestId("input", "email").type("Hello world").clear();
+    cy.get("body").click();
+    cy.getByDataTestId("label", "email-error")
+      .first()
+      .should("exist")
+      .contains("Required");
+  });
+
+  it("test for invalid email", () => {
+    cy.getByDataTestId("input", "email")
+      .first()
+      .type("john doe")
+      .should("have.value", "john doe");
+    cy.get("body").click();
+    cy.getByDataTestId("label", "email-error")
+      .first()
+      .should("exist")
+      .contains("Mail not Valid");
+  });
+
+  it("test for valid email", () => {
+    cy.getByDataTestId("input", "email")
+      .first()
+      .type("[email protected]")
+      .should("have.value", "[email protected]");
+    cy.get("body").click();
+    cy.getByDataTestId("label", "email-error").should("not.exist");
+  });
+});

cypress/integration/InputAsync.spec.js

@@ -0,0 +1,45 @@
+// Note : InputAsync is used here for testing is used in SimpleFormWithAsync
+describe("Tests for InputAsync", () => {
+  beforeEach(() => {
+    cy.visit("");
+  });
+
+  it("test for typing and checking input value", () => {
+    cy.getByDataTestId("input", "simpleFormWithAsyncInput1").clear();
+    cy.getByDataTestId("input", "simpleFormWithAsyncInput1").should(
+      "have.value",
+      ""
+    );
+    cy.getByDataTestId("input", "simpleFormWithAsyncInput1")
+      .type("Hello World")
+      .should("have.value", "Hello World");
+  });
+
+  it("test for checking default input value", () => {
+    cy.getByDataTestId(
+      "label",
+      "asyncNotStartedYet-simpleFormWithAsyncInput1"
+    ).should("exist");
+
+    cy.getByDataTestId("input", "simpleFormWithAsyncInput1").should(
+      "have.value",
+      "Antonio"
+    );
+
+    cy.getByDataTestId(
+      "label",
+      "asyncSuccess-simpleFormWithAsyncInput1"
+    ).should("exist");
+  });
+
+  it("test for input with length less than 3", () => {
+    cy.getByDataTestId("input", "simpleFormWithAsyncInput1").clear().type("An");
+    cy.get("body").click();
+    cy.getByDataTestId("label", "asyncStart-simpleFormWithAsyncInput1")
+      .should("exist")
+      .contains("Checking...");
+    cy.getByDataTestId("label", "asyncError-simpleFormWithAsyncInput1")
+      .should("exist")
+      .contains("Error");
+  });
+});

cypress/integration/SimpleForm.spec.js

@@ -0,0 +1,48 @@
+describe("Tests for SimpleForm", () => {
+  beforeEach(() => {
+    cy.visit("");
+  });
+
+  it("testing basic setup", () => {
+    cy.getByDataTestId("label", "status-error")
+      .should("exist")
+      .contains("Mail list empty");
+    cy.getByDataTestId("button", "simpleForm-submit").should("be.disabled");
+    cy.getByDataTestId("button", "simpleForm-reset").should("be.disabled");
+  });
+
+  it("testing reset email", () => {
+    cy.getByDataTestId("input", "email2").type("John");
+    cy.getByDataTestId("button", "simpleForm-reset").should("not.be.disabled");
+    cy.getByDataTestId("label", "status-error")
+      .should("exist")
+      .contains("Some Mails not Valid");
+    cy.getByDataTestId("input", "email1").type("Sam");
+    cy.getByDataTestId("button", "simpleForm-reset")
+      .should("not.be.disabled")
+      .click();
+
+    cy.getByDataTestId("input", "email1").should("have.value", "");
+    cy.getByDataTestId("input", "email2").should("have.value", "");
+    cy.getByDataTestId("button", "simpleForm-submit").should("be.disabled");
+    cy.getByDataTestId("button", "simpleForm-reset").should("be.disabled");
+  });
+
+  it("test that first email is mandatory for submitting form", () => {
+    cy.getByDataTestId("input", "email2").type("[email protected]");
+    cy.getByDataTestId("button", "simpleForm-submit")
+      .should("not.be.disabled")
+      .click();
+    cy.getByDataTestId("label", "async-test-error")
+      .should("exist")
+      .contains("Error values not allowed");
+  });
+
+  it("test for submitting form with valid emails", () => {
+    cy.getByDataTestId("input", "email1").type("[email protected]");
+    cy.getByDataTestId("input", "email2").type("[email protected]");
+    cy.getByDataTestId("button", "simpleForm-submit")
+      .should("not.be.disabled")
+      .click();
+  });
+});

cypress/integration/SimpleFormWithAsync.spec.js

@@ -0,0 +1,64 @@
+describe("Tests for SimpleFormWithAsync", () => {
+  beforeEach(() => {
+    cy.visit("");
+  });
+
+  it("test for resetting form", () => {
+    cy.simpleFormWithAsyncSetup();
+    cy.getByDataTestId("input", "input-1-simpleFormWithAsync").should("exist");
+    cy.getByDataTestId("input", "input-2-simpleFormWithAsync").should("exist");
+    cy.getByDataTestId("button", "simpleFormWithAsync-reset").first().click();
+    cy.getByDataTestId("input", "input-1-simpleFormWithAsync").should(
+      "not.exist"
+    );
+    cy.getByDataTestId("input", "input-2-simpleFormWithAsync").should(
+      "not.exist"
+    );
+
+    cy.getByDataTestId("input", "email").first().should("have.value", "");
+    cy.getByDataTestId("input", "simpleFormWithAsyncInput1").should(
+      "have.value",
+      "Antonio"
+    );
+    cy.getByDataTestId("input", "simpleFormWithAsyncInput2").should(
+      "have.value",
+      "Milan"
+    );
+
+    cy.getByDataTestId("input", "simpleFormWithAsyncInput3").should(
+      "have.value",
+      "333"
+    );
+  });
+
+  it("test for submitting form", () => {
+    cy.simpleFormWithAsyncSetup();
+
+    cy.getByDataTestId("button", "remove-input-simpleFormWithAsync").click();
+
+    cy.getByDataTestId("button", "simpleFormWithAsync-submit").click();
+
+    cy.getByDataTestId("label", "asyncError")
+      .should("exist")
+      .contains("Add at least two Inputs");
+
+    cy.getByDataTestId("input", "simpleFormWithAsyncInput3")
+      .clear()
+      .type("333");
+
+    cy.get("body").click();
+    cy.getByDataTestId("button", "simpleFormWithAsync-submit").should(
+      "be.disabled"
+    );
+    cy.getByDataTestId("input", "simpleFormWithAsyncInput3")
+      .clear()
+      .type("Michael Davis");
+    cy.getByDataTestId("button", "simpleFormWithAsync-submit").should(
+      "not.be.disabled"
+    );
+    cy.getByDataTestId("button", "add-input-simpleFormWithAsync")
+      .first()
+      .click();
+    cy.getByDataTestId("button", "simpleFormWithAsync-submit").click();
+  });
+});

cypress/integration/formContextWithValidation.spec.js

@@ -0,0 +1,38 @@
+describe("Tests for FormContextWithValidation", () => {
+  beforeEach(() => {
+    cy.visit("");
+  });
+
+  it("testing input with email", () => {
+    cy.getByDataTestId("input", "test")
+      .type("[email protected]")
+      .should("have.value", "[email protected]");
+
+    cy.getByDataTestId("button", "submit").first().click();
+
+    cy.getByDataTestId("label", "asyncStart")
+      .should("be.visible")
+      .contains("Checking...");
+
+    cy.getByDataTestId("label", "asyncSuccess").should("be.visible");
+  });
+
+  it("testing input to submit without value", () => {
+    cy.getByDataTestId("input", "test").should("be.empty");
+
+    cy.getByDataTestId("button", "submit").first().should("be.disabled");
+  });
+
+  it("testing input with length less than 5", () => {
+    cy.getByDataTestId("input", "test")
+      .type("test")
+      .should("have.value", "test");
+
+    cy.getByDataTestId("button", "submit").first().click();
+    cy.getByDataTestId("label", "asyncStart")
+      .should("be.visible")
+      .contains("Checking...");
+
+    cy.getByDataTestId("label", "asyncError").should("be.visible");
+  });
+});

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` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

cypress/server/helpers/BigForm.js

@@ -0,0 +1,28 @@
+/* eslint-disable react/react-in-jsx-scope */
+const { default: Form, Input } = UseTheForm;
+
+const { useState } = React;
+
+var foo = new Array(100); // create an empty array with length 45
+for (var i = 0; i < foo.length; i++) {
+  foo[i] = i;
+}
+
+window.BigForm = () => {
+  const [inputs] = useState(() =>
+    foo.map((item, index) => (
+      <Input
+        type="text"
+        key={index}
+        data-testid={`bigForm-input-${index}`}
+        name={`c${index}`}
+      />
+    ))
+  );
+
+  return (
+    <div>
+      <Form data-testid="bigForm-form">{inputs}</Form>
+    </div>
+  );
+};

cypress/server/helpers/BigFormCollection.js

@@ -0,0 +1,25 @@
+/* eslint-disable react/react-in-jsx-scope */
+const { default: Form, Collection, Input } = UseTheForm;
+
+const { useState } = React;
+
+var foo = new Array(100); // create an empty array with length 45
+for (var i = 0; i < foo.length; i++) {
+  foo[i] = i;
+}
+
+window.BigFormCollection = () => {
+  const [inputs] = useState(() =>
+    foo.map((item, index) => (
+      <Collection array key={index} name={`c${index}`}>
+        <Input type="text" />
+      </Collection>
+    ))
+  );
+
+  return (
+    <div>
+      <Form>{inputs}</Form>
+    </div>
+  );
+};