From d13c6f3c3f4c6eb826cc770d903921b805c34144 Mon Sep 17 00:00:00 2001 From: Sergio Eduardo Castro Ceballos <72516762+SergioCasCeb@users.noreply.github.com> Date: Wed, 1 May 2024 06:14:47 +0200 Subject: [PATCH] Fixed the failing tests and added the new respective test for the banner --- packages/web/playwright.config.js | 2 +- packages/web/tests/test.spec.js | 95 ++++++++++++++++++++++++++++++- 2 files changed, 95 insertions(+), 2 deletions(-) diff --git a/packages/web/playwright.config.js b/packages/web/playwright.config.js index 03f3d145..4f1d74e4 100644 --- a/packages/web/playwright.config.js +++ b/packages/web/playwright.config.js @@ -39,7 +39,7 @@ module.exports = defineConfig({ /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', }, - + timeout: 60000, /* Configure projects for major browsers */ projects: [ { diff --git a/packages/web/tests/test.spec.js b/packages/web/tests/test.spec.js index e6110f30..97e448f8 100644 --- a/packages/web/tests/test.spec.js +++ b/packages/web/tests/test.spec.js @@ -19,6 +19,50 @@ test.beforeEach(async ({ page }) => { await page.goto('/') }); +//Check the initial state of the consent banner and close it to allow the other tests to run +test.beforeEach(async ({ page }) => { + + // Before the user sets any preferences the local storage should be empty + const localStorageBefore = await page.evaluate(() => { + return JSON.stringify(localStorage); + }); + + expect(localStorageBefore).toEqual("{}") + + //If the user hasn't set any preference (local storage is empty) then the default value for the gtag should all be set to denied + const gtagDefaultValue = await page.evaluate(() => { + return window.dataLayer[0]['2']; + }); + + expect(gtagDefaultValue).toEqual({ + 'ad_storage': 'denied', + 'analytics_storage': 'denied', + 'ad_user_data': 'denied', + 'ad_personalization': 'denied', + 'personalization_storage': 'denied', + 'functionality_storage': 'denied', + 'security_storage': 'denied' + }) + + //If no preferences set, then the banner should always be shown to the user + const consentBanner = page.locator('#analytics-banner') + await expect(consentBanner).toHaveClass("analytics-banner") + + //After setting the preferences the banner should be hidden + const declineAnalyticsBtn = page.locator('#decline-analytics-btn') + await declineAnalyticsBtn.click() + + await expect(consentBanner).toHaveClass("analytics-banner hidden") + + // If the user declined the consent, the new preference is saved in the local storage with every tags set to denied + const localStorageAfter = await page.evaluate(() => { + return JSON.stringify(localStorage); + }); + + const declinedObject = { "consentMode": "{\"ad_storage\":\"denied\",\"analytics_storage\":\"denied\",\"ad_user_data\":\"denied\",\"ad_personalization\":\"denied\",\"personalization_storage\":\"denied\",\"functionality_storage\":\"denied\",\"security_storage\":\"denied\"}" } + expect(localStorageAfter).toEqual(JSON.stringify(declinedObject)) +}); + test.describe("Load initial state", () => { test('Has title', async ({ page }) => { await expect(page).toHaveTitle("TD Playground") @@ -129,6 +173,55 @@ test.describe("Check all links", () => { }) }) +test.describe("Consent banner interactions", () => { + test("Open consent banner and accept analytics", async ({ page }) => { + // Check for the user preferences in the local storage + const localStorageBefore = await page.evaluate(() => { + return JSON.stringify(localStorage); + }); + + //Since before all the tests start the consent banner has already been declined the default consent object in the localStorage should already be set to deny all + const declinedObject = { "consentMode": "{\"ad_storage\":\"denied\",\"analytics_storage\":\"denied\",\"ad_user_data\":\"denied\",\"ad_personalization\":\"denied\",\"personalization_storage\":\"denied\",\"functionality_storage\":\"denied\",\"security_storage\":\"denied\"}" } + expect(localStorageBefore).toEqual(JSON.stringify(declinedObject)) + + //Check that the banner is hidden + const consentBanner = page.locator('#analytics-banner') + await expect(consentBanner).toHaveClass("analytics-banner hidden") + + // Open settings to access the consent management link and open the consent banner + await page.locator('#settings-btn').click() + await page.locator('#consent-link').click() + await expect(consentBanner).toHaveClass("analytics-banner") + + //Accept analytics and hide banner + const acceptAnalyticsBtn = page.locator('#accept-analytics-btn') + await acceptAnalyticsBtn.click() + await expect(consentBanner).toHaveClass("analytics-banner hidden") + + //After accepting analytics, the preference should be saved in the local storage as well as updated in the gtag from the window dataLayer + const allowedObject = { "consentMode": "{\"ad_storage\":\"denied\",\"analytics_storage\":\"granted\",\"ad_user_data\":\"denied\",\"ad_personalization\":\"denied\",\"personalization_storage\":\"denied\",\"functionality_storage\":\"denied\",\"security_storage\":\"denied\"}" } + const localStorageAfter = await page.evaluate(() => { + return JSON.stringify(localStorage); + }); + + expect(localStorageAfter).toEqual(JSON.stringify(allowedObject)) + + const gtagUpdatedValue = await page.evaluate(() => { + return window.dataLayer[8]["2"]; + }); + + expect(gtagUpdatedValue).toEqual({ + 'ad_storage': 'denied', + 'analytics_storage': 'granted', + 'ad_user_data': 'denied', + 'ad_personalization': 'denied', + 'personalization_storage': 'denied', + 'functionality_storage': 'denied', + 'security_storage': 'denied' + }) + }) +}) + test.describe("Editors and Tabs creation and deletion", () => { test("Adding a new editor and closing it", async ({ page }) => { const editorTabs = page.locator("#tab") @@ -665,7 +758,7 @@ test.describe("Settings menu functionality", () => { const fontSizeSlider = page.locator('#font-size') await fontSizeSlider.click() - await expect(editorFontSize).toHaveText("23") + await expect(editorFontSize).toHaveText("23") await page.reload({ waitUntil: 'domcontentloaded' })