test(e2e): add settings form test

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