diff --git a/e2e/orejime.spec.ts b/e2e/orejime.spec.ts index 0a15797..7914a8a 100644 --- a/e2e/orejime.spec.ts +++ b/e2e/orejime.spec.ts @@ -18,158 +18,186 @@ test.describe('Orejime', () => { }); test('should show a notice', async ({page}) => { - const notice = await page.locator('.orejime-Banner'); + 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 = await page.locator('.orejime-Banner-saveButton'); + const firstButton = page.locator('.orejime-Banner-saveButton'); await expect(firstButton).toBeVisible(); }); - test('should accept all purposes from the notice', async ({page, context}) => { + test('should accept all purposes from the notice', async ({ + page, + context + }) => { await page.locator('.orejime-Banner-saveButton').click(); - const notice = await page.locator('.orejime-Banner'); + 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 - })); + expect(consents).toEqual( + expect.objectContaining({ + 'mandatory': true, + 'inline-tracker': true, + 'external-tracker': true + }) + ); }); - test('should decline all purposes from the notice', async ({page, context}) => { + test('should decline all purposes from the notice', async ({ + page, + context + }) => { await page.locator('.orejime-Banner-declineButton').click(); - const notice = await page.locator('.orejime-Banner'); + 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 - })); + 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 = await page.locator('.orejime-Banner'); + const notice = page.locator('.orejime-Banner'); await expect(notice).toBeVisible(); - const modal = await page.locator('.orejime-Modal'); + 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 = await page.locator('.orejime-Modal'); + const modal = page.locator('.orejime-Modal'); await expect(modal).toBeVisible(); await page.locator('.orejime-Modal-closeButton').click(); await expect(modal).toHaveCount(0); - const notice = await page.locator('.orejime-Banner'); + 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 = await page.locator('.orejime-Modal'); + const modal = page.locator('.orejime-Modal'); await expect(modal).toBeVisible(); - await page.locator('.orejime-ModalOverlay').click(); + // 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 = await page.locator('.orejime-Banner'); + 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 = await page.locator('.orejime-Modal'); + const modal = page.locator('.orejime-Modal'); await expect(modal).toBeVisible(); await page.keyboard.press('Escape'); await expect(modal).toHaveCount(0); - const notice = await page.locator('.orejime-Banner'); + const notice = page.locator('.orejime-Banner'); await expect(notice).toBeVisible(); }); test('should move focus after closing the modal', async ({page}) => { - const openModalButton = await page.locator('.orejime-Banner-learnMoreButton'); + const openModalButton = page.locator('.orejime-Banner-learnMoreButton'); openModalButton.click(); - const modal = await page.locator('.orejime-Modal'); + 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}) => { + 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 = await page.locator('#orejime-purpose-inline-tracker'); + const checkbox = page.locator('#orejime-purpose-inline-tracker'); await expect(checkbox).toBeChecked(); - const mandatoryCheckbox = await page.locator('#orejime-purpose-mandatory'); + 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 - })); + expect(consents).toEqual( + expect.objectContaining({ + 'mandatory': true, + 'inline-tracker': true, + 'external-tracker': true + }) + ); - const notice = await page.locator('.orejime-Banner'); + const notice = page.locator('.orejime-Banner'); await expect(notice).not.toBeVisible(); }); - test('should decline all purposes from the modal', async ({page, context}) => { + 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 = await page.locator('#orejime-purpose-inline-tracker'); + const checkbox = page.locator('#orejime-purpose-inline-tracker'); await expect(checkbox).not.toBeChecked(); - const mandatoryCheckbox = await page.locator('#orejime-purpose-mandatory'); + 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 - })); + expect(consents).toEqual( + expect.objectContaining({ + 'mandatory': true, + 'inline-tracker': false, + 'external-tracker': false + }) + ); - const notice = await page.locator('.orejime-Banner'); + 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 = await page.locator('#orejime-purpose-inline-tracker'); + const checkbox = page.locator('#orejime-purpose-inline-tracker'); await expect(checkbox).not.toBeChecked(); - const checkbox2 = await page.locator('#orejime-purpose-external-tracker'); + const checkbox2 = page.locator('#orejime-purpose-external-tracker'); await expect(checkbox2).not.toBeChecked(); - const groupCheckbox = await page.locator('#orejime-purpose-group'); + const groupCheckbox = page.locator('#orejime-purpose-group'); await groupCheckbox.check(); await expect(groupCheckbox).toBeChecked(); await expect(checkbox).toBeChecked(); @@ -177,7 +205,7 @@ test.describe('Orejime', () => { await checkbox.uncheck(); await expect(groupCheckbox).not.toBeChecked(); - await expect(groupCheckbox).toHaveJSProperty("indeterminate", true); + await expect(groupCheckbox).toHaveJSProperty('indeterminate', true); await expect(checkbox).not.toBeChecked(); await expect(checkbox2).toBeChecked();