mirror of
https://github.com/theoludwig/react-component-form.git
synced 2024-07-17 07:30:13 +02:00
66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
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 {}
|