theoludwig/react-component-form
Archived
1
1
Fork 0
Code Issues Pull Requests Releases Activity

chore: better Prettier config for easier reviews

Browse Source
This commit is contained in:
Théo LUDWIG
2023-10-23 23:26:27 +02:00
parent 1224ece116
commit a49e844c70
50 changed files with 4642 additions and 3862 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
example/cypress/e2e/Form.cy.ts
View File

@ -1,63 +1,63 @@
describe('Form', () => {
describe("Form", () => {
beforeEach(() => {
cy.visit('/')
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("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)', () => {
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 🙈.'
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)
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 (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 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 🤔.'
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 🤔.",
)
})
})

68
example/cypress/e2e/Header.cy.ts
View File

@ -1,47 +1,47 @@
describe('Header', () => {
beforeEach(() => cy.visit('/'))
describe("Header", () => {
beforeEach(() => cy.visit("/"))
describe('Switch theme color (dark/light)', () => {
it('should switch theme from `dark` (default) to `light`', () => {
cy.get('[data-cy=switch-theme-dark]').should('be.visible')
cy.get('[data-cy=switch-theme-light]').should('not.be.visible')
cy.get('body').should(
'not.have.css',
'background-color',
'rgb(255, 255, 255)'
describe("Switch theme color (dark/light)", () => {
it("should switch theme from `dark` (default) to `light`", () => {
cy.get("[data-cy=switch-theme-dark]").should("be.visible")
cy.get("[data-cy=switch-theme-light]").should("not.be.visible")
cy.get("body").should(
"not.have.css",
"background-color",
"rgb(255, 255, 255)",
)
cy.get('[data-cy=switch-theme-click]').click()
cy.get("[data-cy=switch-theme-click]").click()
cy.get('[data-cy=switch-theme-dark]').should('not.be.visible')
cy.get('[data-cy=switch-theme-light]').should('be.visible')
cy.get('body').should(
'have.css',
'background-color',
'rgb(255, 255, 255)'
cy.get("[data-cy=switch-theme-dark]").should("not.be.visible")
cy.get("[data-cy=switch-theme-light]").should("be.visible")
cy.get("body").should(
"have.css",
"background-color",
"rgb(255, 255, 255)",
)
})
})
describe('Switch Language', () => {
it('should switch language from EN (default) to FR', () => {
cy.get('[data-cy=main-description]').contains('This is an example')
cy.get('[data-cy=language-flag-text]').contains('EN')
cy.get('[data-cy=languages-list]').should('not.be.visible')
cy.get('[data-cy=language-click]').click()
cy.get('[data-cy=languages-list]').should('be.visible')
cy.get('[data-cy=languages-list] > li:first-child').contains('FR').click()
cy.get('[data-cy=languages-list]').should('not.be.visible')
cy.get('[data-cy=language-flag-text]').contains('FR')
cy.get('[data-cy=main-description]').contains('Ceci est un exemple')
describe("Switch Language", () => {
it("should switch language from EN (default) to FR", () => {
cy.get("[data-cy=main-description]").contains("This is an example")
cy.get("[data-cy=language-flag-text]").contains("EN")
cy.get("[data-cy=languages-list]").should("not.be.visible")
cy.get("[data-cy=language-click]").click()
cy.get("[data-cy=languages-list]").should("be.visible")
cy.get("[data-cy=languages-list] > li:first-child").contains("FR").click()
cy.get("[data-cy=languages-list]").should("not.be.visible")
cy.get("[data-cy=language-flag-text]").contains("FR")
cy.get("[data-cy=main-description]").contains("Ceci est un exemple")
})
it('should close the language list menu when clicking outside', () => {
cy.get('[data-cy=languages-list]').should('not.be.visible')
cy.get('[data-cy=language-click]').click()
cy.get('[data-cy=languages-list]').should('be.visible')
cy.get('[data-cy=main-description]').click()
cy.get('[data-cy=languages-list]').should('not.be.visible')
it("should close the language list menu when clicking outside", () => {
cy.get("[data-cy=languages-list]").should("not.be.visible")
cy.get("[data-cy=language-click]").click()
cy.get("[data-cy=languages-list]").should("be.visible")
cy.get("[data-cy=main-description]").click()
cy.get("[data-cy=languages-list]").should("not.be.visible")
})
})
})