diff options
| -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'); + }); + } + }); + }); +}); |