diff options
Diffstat (limited to 'tests')
| -rw-r--r-- | tests/cypress/e2e/settings.cy.ts | 177 | 
1 files changed, 177 insertions, 0 deletions
| diff --git a/tests/cypress/e2e/settings.cy.ts b/tests/cypress/e2e/settings.cy.ts new file mode 100644 index 0000000..abdbcdf --- /dev/null +++ b/tests/cypress/e2e/settings.cy.ts @@ -0,0 +1,177 @@ +describe('Settings', () => { +  beforeEach(() => { +    cy.visit('/'); +  }); + +  it('should open and close a settings menu by clicking on a button', () => { +    cy.findByLabelText(/Fermer les réglages/i).should('not.exist'); +    cy.findByLabelText(/Ouvrir les réglages/i).click(); +    cy.findByLabelText(/Ouvrir les réglages/i).should('not.exist'); +    cy.findByLabelText(/Fermer les réglages/i).click(); +    cy.findByLabelText(/Fermer les réglages/i).should('not.exist'); +    cy.findByLabelText(/Ouvrir les réglages/i).should('exist'); +  }); + +  it('should open and close a tooltip by clicking on a button', () => { +    cy.findByLabelText(/Ouvrir les réglages/i).click(); +    cy.findByText(/Ackee/).should('not.be.visible'); +    cy.findByRole('button', { name: /Aide/i }).click(); +    cy.findByText(/Ackee/).should('be.visible'); +    cy.findByRole('button', { name: /Aide/i }).click(); +    cy.findByText(/Ackee/).should('not.be.visible'); +  }); + +  it('should change the current theme', () => { +    cy.findByLabelText(/Ouvrir les réglages/i).click(); +    cy.findByRole('document') +      .parent() +      .then(($html) => { +        const initialTheme = $html.attr('data-theme'); + +        if (initialTheme === 'light') { +          cy.findByRole('radiogroup', { name: /Thème/i }) +            .findByRole('radio', { name: /Thème clair/i }) +            .should('be.checked'); +          cy.findByRole('radiogroup', { name: /Thème/i }) +            .findByRole('radio', { name: /Thème sombre/i }) +            .should('not.be.checked') +            .check({ force: true }) // because of label +            .should('be.checked'); +          cy.findByRole('radiogroup', { name: /Thème/i }) +            .findByRole('radio', { name: /Thème clair/i }) +            .should('not.be.checked'); +          cy.findByRole('document') +            .parent() +            .should('have.attr', 'data-theme', 'dark') +            .then(() => { +              expect(localStorage.getItem('theme')).to.eq('dark'); +            }); +        } else { +          cy.findByRole('radiogroup', { name: /Thème/i }) +            .findByRole('radio', { name: /Thème sombre/i }) +            .should('be.checked'); +          cy.findByRole('radiogroup', { name: /Thème/i }) +            .findByRole('radio', { name: /Thème clair/i }) +            .should('not.be.checked') +            .check({ force: true }) // because of label +            .should('be.checked'); +          cy.findByRole('radiogroup', { name: /Thème/i }) +            .findByRole('radio', { name: /Thème sombre/i }) +            .should('not.be.checked'); +          cy.findByRole('document') +            .parent() +            .should('have.attr', 'data-theme', 'light') +            .then(() => { +              expect(localStorage.getItem('theme')).to.eq('light'); +            }); +        } +      }); +  }); + +  it('should change the Prism theme', () => { +    cy.findByLabelText(/Ouvrir les réglages/i).click(); +    // We assume that the default theme is light theme. +    cy.findByRole('radiogroup', { name: /Blocs de code/i }) +      .findByRole('radio', { name: /Thème sombre/i }) +      .check({ force: true }) // because of label +      .should('be.checked') +      .then(() => { +        expect(localStorage.getItem('prismjs-color-scheme')).to.eq('"dark"'); +      }); +    cy.findByRole('radiogroup', { name: /Blocs de code/i }) +      .findByRole('radio', { name: /Thème clair/i }) +      .check({ force: true }) // because of label +      .should('be.checked') +      .then(() => { +        expect(localStorage.getItem('prismjs-color-scheme')).to.eq('"light"'); +      }); +  }); + +  it('should change the motion setting', () => { +    cy.findByLabelText(/Ouvrir les réglages/i).click(); +    cy.findByRole('document') +      .parent() +      .then(($html) => { +        const initialValue = $html.attr('data-reduced-motion'); + +        if (initialValue === 'false') { +          cy.findByRole('radiogroup', { name: /Animations/i }) +            .findByRole('radio', { name: /Marche/i }) +            .should('be.checked'); +          cy.findByRole('radiogroup', { name: /Animations/i }) +            .findByRole('radio', { name: /Arrêt/i }) +            .should('not.be.checked') +            .check({ force: true }) // because of label +            .should('be.checked'); +          cy.findByRole('radiogroup', { name: /Animations/i }) +            .findByRole('radio', { name: /Marche/i }) +            .should('not.be.checked'); +          cy.findByRole('document') +            .parent() +            .should('have.attr', 'data-reduced-motion', 'true') +            .then(() => { +              expect(localStorage.getItem('reduced-motion')).to.eq('true'); +            }); +        } else { +          cy.findByRole('radiogroup', { name: /Animations/i }) +            .findByRole('radio', { name: /Arrêt/i }) +            .should('be.checked'); +          cy.findByRole('radiogroup', { name: /Animations/i }) +            .findByRole('radio', { name: /Marche/i }) +            .should('not.be.checked') +            .check({ force: true }) // because of label +            .should('be.checked'); +          cy.findByRole('radiogroup', { name: /Animations/i }) +            .findByRole('radio', { name: /Arrêt/i }) +            .should('not.be.checked'); +          cy.findByRole('document') +            .parent() +            .should('have.attr', 'data-reduced-motion', 'true') +            .then(() => { +              expect(localStorage.getItem('reduced-motion')).to.eq('true'); +            }); +        } +      }); +  }); + +  it('should change the Ackee setting', () => { +    cy.findByLabelText(/Ouvrir les réglages/i) +      .click() +      .then(() => { +        const storedValue = localStorage.getItem('ackee-tracking'); +        const parsedStoredValue = storedValue ? JSON.parse(storedValue) : ''; + +        if (parsedStoredValue === 'full') { +          cy.findByRole('radio', { name: /Complet/i }).should('be.checked'); +          cy.findByRole('radio', { name: /Partiel/i }) +            .should('not.be.checked') +            .check({ force: true }) // because of label +            .should('be.checked'); +          cy.findByRole('radio', { name: /Complet/i }) +            .should('not.be.checked') +            .then(() => { +              const newStoredValue = localStorage.getItem('ackee-tracking'); +              const parsedNewStoredValue = newStoredValue +                ? JSON.parse(newStoredValue) +                : ''; +              expect(parsedNewStoredValue).to.eq('partial'); +            }); +        } else { +          cy.findByRole('radio', { name: /Partiel/i }).should('be.checked'); +          cy.findByRole('radio', { name: /Complet/i }) +            .should('not.be.checked') +            .check({ force: true }) // because of label +            .should('be.checked'); +          cy.findByRole('radio', { name: /Partiel/i }) +            .should('not.be.checked') +            .then(() => { +              const newStoredValue = localStorage.getItem('ackee-tracking'); +              const parsedNewStoredValue = newStoredValue +                ? JSON.parse(newStoredValue) +                : ''; +              expect(parsedNewStoredValue).to.eq('full'); +            }); +        } +      }); +  }); +}); | 
