react-component-form/example/cypress/e2e/Form.cy.ts

describe("Form", () => {
  beforeEach(() => {
    cy.visit("/")
  })

  it("succeeds, reset input values and display the global success message", () => {
    cy.get("[data-cy=input-name]").type("John")
    cy.get("[data-cy=input-email]").type("john@john.com")
    cy.get("#error-name").should("not.exist")
    cy.get("#error-email").should("not.exist")
    cy.get("[data-cy=submit]").click()
    cy.get("[data-cy=input-name]").should("have.value", "")
    cy.get("[data-cy=input-email]").should("have.value", "")
    cy.get("#message").should(
      "have.text",
      "Success: The form has been submitted.",
    )
  })

  it("fails with all inputs as required with error messages and update error messages when updating language (translation)", () => {
    const requiredErrorMessage = {
      en: "Error: Oops, this field is required 🙈.",
      fr: "Erreur: Oups, ce champ est obligatoire 🙈.",
    }
    cy.get("#error-name").should("not.exist")
    cy.get("#error-email").should("not.exist")
    cy.get("[data-cy=submit]").click()
    cy.get("#error-name").should("have.text", requiredErrorMessage.en)
    cy.get("#error-email").should("have.text", requiredErrorMessage.en)
    cy.get("[data-cy=language-click]").click()
    cy.get("[data-cy=languages-list] > li:first-child").contains("FR").click()
    cy.get("#error-name").should("have.text", requiredErrorMessage.fr)
    cy.get("#error-email").should("have.text", requiredErrorMessage.fr)
  })

  it("fails with invalid name (less than 3 characters)", () => {
    cy.get("[data-cy=input-name]").type("a")
    cy.get("[data-cy=submit]").click()
    cy.get("#error-name").should(
      "have.text",
      "Error: The field must contain at least 3 characters.",
    )
  })

  it("fails with invalid name (more than 10 characters)", () => {
    cy.get("[data-cy=input-name]").type("12345678910aaaa")
    cy.get("[data-cy=submit]").click()
    cy.get("#error-name").should(
      "have.text",
      "Error: The field must contain at most 10 characters.",
    )
  })

  it("fails with wrong email format", () => {
    cy.get("#error-email").should("not.exist")
    cy.get("[data-cy=input-email]").type("test")
    cy.get("[data-cy=submit]").click()
    cy.get("#error-email").should(
      "have.text",
      "Error: Mmm… It seems that this email is not valid 🤔.",
    )
  })
})

export {}