From add7148349027ff338f9d02e4a22e26e87d8faac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Girault?= Date: Thu, 10 Oct 2024 15:53:08 +0200 Subject: [PATCH] Added end-to-end tests --- e2e/orejime.spec.ts | 217 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 217 insertions(+) create mode 100644 e2e/orejime.spec.ts diff --git a/e2e/orejime.spec.ts b/e2e/orejime.spec.ts new file mode 100644 index 00000000..7914a8ab --- /dev/null +++ b/e2e/orejime.spec.ts @@ -0,0 +1,217 @@ +import {test, expect, type BrowserContext} from '@playwright/test'; + +test.describe('Orejime', () => { + const getConsentsFromCookies = async (context: BrowserContext) => { + const cookies = await context.cookies(); + const orejimeCookie = cookies.find(({name}) => name === 'eu-consent'); + + // `js-cookie` encodes cookie values + const decodedValue = orejimeCookie!.value + .replace(/%22/gi, '"') + .replace(/%2C/gi, ','); + + return JSON.parse(decodedValue); + }; + + test.beforeEach(async ({page}) => { + await page.goto('/'); + }); + + test('should show a notice', async ({page}) => { + const notice = page.locator('.orejime-Banner'); + await expect(notice).toBeVisible(); + }); + + test('should navigate to the notice first', async ({page}) => { + await page.keyboard.press('Tab'); + const firstButton = page.locator('.orejime-Banner-saveButton'); + await expect(firstButton).toBeVisible(); + }); + + test('should accept all purposes from the notice', async ({ + page, + context + }) => { + await page.locator('.orejime-Banner-saveButton').click(); + const notice = page.locator('.orejime-Banner'); + await expect(notice).not.toBeVisible(); + + const consents = await getConsentsFromCookies(context); + + expect(consents).toEqual( + expect.objectContaining({ + 'mandatory': true, + 'inline-tracker': true, + 'external-tracker': true + }) + ); + }); + + test('should decline all purposes from the notice', async ({ + page, + context + }) => { + await page.locator('.orejime-Banner-declineButton').click(); + const notice = page.locator('.orejime-Banner'); + await expect(notice).not.toBeVisible(); + + const consents = await getConsentsFromCookies(context); + + expect(consents).toEqual( + expect.objectContaining({ + 'mandatory': true, + 'inline-tracker': false, + 'external-tracker': false + }) + ); + }); + + test('should open a modal', async ({page}) => { + await page.locator('.orejime-Banner-learnMoreButton').click(); + const notice = page.locator('.orejime-Banner'); + await expect(notice).toBeVisible(); + + const modal = page.locator('.orejime-Modal'); + await expect(modal).toBeVisible(); + await expect(notice).toBeVisible(); + }); + + test('should close the modal via the close button', async ({page}) => { + await page.locator('.orejime-Banner-learnMoreButton').click(); + const modal = page.locator('.orejime-Modal'); + await expect(modal).toBeVisible(); + + await page.locator('.orejime-Modal-closeButton').click(); + await expect(modal).toHaveCount(0); + + const notice = page.locator('.orejime-Banner'); + await expect(notice).toBeVisible(); + }); + + test('should close the modal via the overlay', async ({page}) => { + await page.locator('.orejime-Banner-learnMoreButton').click(); + const modal = page.locator('.orejime-Modal'); + await expect(modal).toBeVisible(); + + // We're clicking in a corner to avoid clicking on the + // modal itself, which has no effect. + await page.locator('.orejime-ModalOverlay').click({ + position: { + x: 1, + y: 1 + } + }); + + await expect(modal).toHaveCount(0); + + const notice = page.locator('.orejime-Banner'); + await expect(notice).toBeVisible(); + }); + + test('should close the modal via `Escape` key', async ({page}) => { + await page.locator('.orejime-Banner-learnMoreButton').click(); + const modal = page.locator('.orejime-Modal'); + await expect(modal).toBeVisible(); + + await page.keyboard.press('Escape'); + await expect(modal).toHaveCount(0); + + const notice = page.locator('.orejime-Banner'); + await expect(notice).toBeVisible(); + }); + + test('should move focus after closing the modal', async ({page}) => { + const openModalButton = page.locator('.orejime-Banner-learnMoreButton'); + openModalButton.click(); + + const modal = page.locator('.orejime-Modal'); + await expect(modal).toBeVisible(); + + await page.keyboard.press('Escape'); + await expect(openModalButton).toBeFocused(); + }); + + test('should accept all purposes from the modal', async ({ + page, + context + }) => { + await page.locator('.orejime-Banner-learnMoreButton').click(); + await page.locator('.orejime-PurposeToggles-enableAll').click(); + + const checkbox = page.locator('#orejime-purpose-inline-tracker'); + await expect(checkbox).toBeChecked(); + + const mandatoryCheckbox = page.locator('#orejime-purpose-mandatory'); + await expect(mandatoryCheckbox).toBeChecked(); + + await page.locator('.orejime-Modal-saveButton').click(); + const consents = await getConsentsFromCookies(context); + + expect(consents).toEqual( + expect.objectContaining({ + 'mandatory': true, + 'inline-tracker': true, + 'external-tracker': true + }) + ); + + const notice = page.locator('.orejime-Banner'); + await expect(notice).not.toBeVisible(); + }); + + test('should decline all purposes from the modal', async ({ + page, + context + }) => { + await page.locator('.orejime-Banner-learnMoreButton').click(); + await page.locator('.orejime-PurposeToggles-enableAll').click(); + await page.locator('.orejime-PurposeToggles-disableAll').click(); + + const checkbox = page.locator('#orejime-purpose-inline-tracker'); + await expect(checkbox).not.toBeChecked(); + + const mandatoryCheckbox = page.locator('#orejime-purpose-mandatory'); + await expect(mandatoryCheckbox).toBeChecked(); + + await page.locator('.orejime-Modal-saveButton').click(); + const consents = await getConsentsFromCookies(context); + + expect(consents).toEqual( + expect.objectContaining({ + 'mandatory': true, + 'inline-tracker': false, + 'external-tracker': false + }) + ); + + const notice = page.locator('.orejime-Banner'); + await expect(notice).not.toBeVisible(); + }); + + test('should sync grouped purposes', async ({page}) => { + await page.locator('.orejime-Banner-learnMoreButton').click(); + + const checkbox = page.locator('#orejime-purpose-inline-tracker'); + await expect(checkbox).not.toBeChecked(); + + const checkbox2 = page.locator('#orejime-purpose-external-tracker'); + await expect(checkbox2).not.toBeChecked(); + + const groupCheckbox = page.locator('#orejime-purpose-group'); + await groupCheckbox.check(); + await expect(groupCheckbox).toBeChecked(); + await expect(checkbox).toBeChecked(); + await expect(checkbox2).toBeChecked(); + + await checkbox.uncheck(); + await expect(groupCheckbox).not.toBeChecked(); + await expect(groupCheckbox).toHaveJSProperty('indeterminate', true); + await expect(checkbox).not.toBeChecked(); + await expect(checkbox2).toBeChecked(); + + await checkbox2.uncheck(); + await expect(groupCheckbox).not.toBeChecked(); + await expect(checkbox).not.toBeChecked(); + await expect(checkbox2).not.toBeChecked(); + }); +});