Added end-to-end tests

e2e/orejime.spec.ts

@@ -0,0 +1,161 @@
+import {test, expect} from '@playwright/test';
+
+test.describe('Orejime', () => {
+	test.beforeEach(async ({page}) => {
+		await page.goto('/');
+	});
+
+	test('should show a notice', async ({page}) => {
+		const notice = await page.locator('.orejime-Notice');
+		await expect(notice).toBeVisible();
+	});
+
+	test('should navigate to the notice first', async ({page}) => {
+		await page.keyboard.press('Tab');
+		const firstButton = await page.locator('.orejime-Notice-saveButton');
+		await expect(firstButton).toBeVisible();
+	});
+
+	test('should accept all cookies from the notice', async ({page, context}) => {
+		await page.locator('.orejime-Notice-saveButton').click();
+		const notice = await page.locator('.orejime-Notice');
+		await expect(notice).not.toBeVisible();
+
+		const cookies = await context.cookies();
+		const orejimeCookie = cookies.find(({name}) => name === 'orejime');
+		const consents = JSON.parse(orejimeCookie!.value);
+
+		expect(consents).toEqual(expect.objectContaining({
+			'inline-tracker': true,
+			'external-tracker': true,
+			'disabled-by-default': true,
+			'always-on': true
+		}));
+	});
+
+	test('should reject all cookies from the notice', async ({page, context}) => {
+		await page.locator('.orejime-Notice-declineButton').click();
+		const notice = await page.locator('.orejime-Notice');
+		await expect(notice).not.toBeVisible();
+
+		const cookies = await context.cookies();
+		const orejimeCookie = cookies.find(({name}) => name === 'orejime');
+		const consents = JSON.parse(orejimeCookie!.value);
+
+		expect(consents).toEqual(expect.objectContaining({
+			'inline-tracker': false,
+			'external-tracker': false,
+			'disabled-by-default': false,
+			'always-on': true
+		}));
+	});
+
+	test('should open a modal', async ({page}) => {
+		await page.locator('.orejime-Notice-learnMoreButton').click();
+		const notice = await page.locator('.orejime-Notice');
+		await expect(notice).toBeVisible();
+
+		const modal = await 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-Notice-learnMoreButton').click();
+		const modal = await page.locator('.orejime-Modal');
+		await expect(modal).toBeVisible();
+
+		await page.locator('.orejime-Modal-closeButton').click();
+		await expect(modal).not.toBeVisible();
+
+		const notice = await page.locator('.orejime-Notice');
+		await expect(notice).toBeVisible();
+	});
+
+	test('should close the modal via the overlay', async ({page}) => {
+		await page.locator('.orejime-Notice-learnMoreButton').click();
+		const modal = await page.locator('.orejime-Modal');
+		await expect(modal).toBeVisible();
+
+		await page.locator('.orejime-ModalOverlay').click();
+		await expect(modal).not.toBeVisible();
+
+		const notice = await page.locator('.orejime-Notice');
+		await expect(notice).toBeVisible();
+	});
+
+	test('should close the modal via `Escape` key', async ({page}) => {
+		await page.locator('.orejime-Notice-learnMoreButton').click();
+		const modal = await page.locator('.orejime-Modal');
+		await expect(modal).toBeVisible();
+
+		await page.keyboard.press('Escape');
+		await expect(modal).not.toBeVisible();
+
+		const notice = await page.locator('.orejime-Notice');
+		await expect(notice).toBeVisible();
+	});
+
+	test('should move focus after closing the modal', async ({page}) => {
+		const openModalButton = await page.locator('.orejime-Notice-learnMoreButton');
+		openModalButton.click();
+
+		const modal = await page.locator('.orejime-Modal');
+		await expect(modal).toBeVisible();
+
+		await page.keyboard.press('Escape');
+		await expect(openModalButton).toBeFocused();
+	});
+
+	test('should accept all cookies from the modal', async ({page, context}) => {
+		await page.locator('.orejime-Notice-learnMoreButton').click();
+		await page.locator('.orejime-AppToggles-enableAll').click();
+
+		const checkbox = await page.locator('#orejime-app-item-disabled-by-default');
+		await expect(checkbox).toBeChecked();
+
+		const mandatoryCheckbox = await page.locator('#orejime-app-item-always-on');
+		await expect(mandatoryCheckbox).toBeChecked();
+
+		await page.locator('.orejime-Modal-saveButton').click();
+		const cookies = await context.cookies();
+		const orejimeCookie = cookies.find(({name}) => name === 'orejime');
+		const consents = JSON.parse(orejimeCookie!.value);
+
+		expect(consents).toEqual(expect.objectContaining({
+			'inline-tracker': true,
+			'external-tracker': true,
+			'disabled-by-default': true,
+			'always-on': true
+		}));
+
+		const notice = await page.locator('.orejime-Notice');
+		await expect(notice).not.toBeVisible();
+	});
+
+	test('should reject all cookies from the modal', async ({page, context}) => {
+		await page.locator('.orejime-Notice-learnMoreButton').click();
+		await page.locator('.orejime-AppToggles-disableAll').click();
+
+		const checkbox = await page.locator('#orejime-app-item-disabled-by-default');
+		await expect(checkbox).not.toBeChecked();
+
+		const mandatoryCheckbox = await page.locator('#orejime-app-item-always-on');
+		await expect(mandatoryCheckbox).toBeChecked();
+
+		await page.locator('.orejime-Modal-saveButton').click();
+		const cookies = await context.cookies();
+		const orejimeCookie = cookies.find(({name}) => name === 'orejime');
+		const consents = JSON.parse(orejimeCookie!.value);
+
+		expect(consents).toEqual(expect.objectContaining({
+			'inline-tracker': false,
+			'external-tracker': false,
+			'disabled-by-default': false,
+			'always-on': true
+		}));
+
+		const notice = await page.locator('.orejime-Notice');
+		await expect(notice).not.toBeVisible();
+	});
+});