Merge pull request #9899 from guardian/ravi/playwright-braze

Migrate `braze` to Playwright

dotcom-rendering/playwright/lib/network.ts

@@ -1,13 +1,26 @@
 import type { Page, Route } from '@playwright/test';
 
+/**
+ * Stubs a network response for a given URL
+ *
+ * @param page
+ * @param url The URL to stub can be a string, glob or a regex
+ * @param fulfill The route fulfill object: https://playwright.dev/docs/api/class-route#route-fulfill
+ * @param times The number of times the route should be stubbed
+ */
 const stubResponse = async (
 	page: Page,
 	url: string | RegExp,
 	fulfill: Parameters<Route['fulfill']>[0],
+	times = 1,
 ): Promise<void> => {
-	await page.route(url, async (route) => {
-		await route.fulfill(fulfill);
-	});
+	await page.route(
+		url,
+		async (route) => {
+			await route.fulfill(fulfill);
+		},
+		{ times },
+	);
 };
 
 export { stubResponse };

dotcom-rendering/playwright/tests/parallel-2/braze.e2e.spec.ts

@@ -0,0 +1,142 @@
+import type { Page } from '@playwright/test';
+import { test } from '@playwright/test';
+import { cmpAcceptAll } from 'playwright/lib/cmp';
+import { addCookie, clearCookie } from 'playwright/lib/cookies';
+import { loadPageNoOkta } from 'playwright/lib/load-page';
+import { stubResponse } from 'playwright/lib/network';
+import { Standard as standardArticle } from '../../../fixtures/generated/articles/Standard';
+
+const idapiIdentifiersResponse = {
+	id: '000000000',
+	brazeUuid: 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa',
+	puzzleUuid: 'aaaaaaaaaaaa',
+	googleTagId: 'aaaaaaaaaaaa',
+};
+
+const expectLocalStorageItem = (
+	page: Page,
+	key: string,
+	value: string | null,
+) => {
+	return page.waitForFunction(
+		(args) => {
+			const itemValue = window.localStorage.getItem(args.key);
+			// eslint-disable-next-line no-console -- test
+			console.log(
+				`localstorage item ${args.key} is ${String(itemValue)}`,
+			);
+			return itemValue === args.value;
+		},
+		{ key, value },
+		{ polling: 250, timeout: 30_000 },
+	);
+};
+
+test.describe('Braze messaging', () => {
+	test('records in local storage that the Braze SDK was loaded', async ({
+		context,
+		page,
+	}) => {
+		// Become logged in
+		await addCookie(context, { name: 'GU_U', value: 'true' });
+
+		await addCookie(context, {
+			name: 'gu_hide_support_messaging',
+			value: 'true',
+		});
+
+		// Mock call to '/user/me/identifiers'
+		const idapiReponseProfile = stubResponse(
+			page,
+			'**/user/me/identifiers',
+			{
+				json: idapiIdentifiersResponse,
+			},
+		);
+
+		// Set browser id
+		await addCookie(context, { name: 'bwid', value: 'myBrowserId' });
+
+		const choiceGdprRequestPromise =
+			page.waitForRequest('**/choice/gdpr/**');
+
+		await loadPageNoOkta(page, standardArticle);
+
+		await cmpAcceptAll(page);
+
+		await idapiReponseProfile;
+		await choiceGdprRequestPromise;
+
+		await loadPageNoOkta(page, standardArticle);
+
+		// Wait for the gu.brazeUserSet flag to be set in localStorage
+		await expectLocalStorageItem(page, 'gu.brazeUserSet', 'true');
+	});
+
+	test('clears Braze data when a user logs out', async ({
+		context,
+		page,
+	}) => {
+		// Become logged in
+		await addCookie(context, { name: 'GU_U', value: 'true' });
+
+		await addCookie(context, {
+			name: 'gu_hide_support_messaging',
+			value: 'true',
+		});
+
+		// Mock call to '/user/me/identifiers'
+		const idapiReponseProfile = stubResponse(
+			page,
+			'**/user/me/identifiers',
+			{
+				json: idapiIdentifiersResponse,
+			},
+		);
+
+		// Set browser id
+		await addCookie(context, { name: 'bwid', value: 'myBrowserId' });
+
+		const choiceGdprRequestPromise =
+			page.waitForRequest('**/choice/gdpr/**');
+
+		await loadPageNoOkta(page, standardArticle);
+
+		await cmpAcceptAll(page);
+
+		await idapiReponseProfile;
+		await choiceGdprRequestPromise;
+
+		await loadPageNoOkta(page, standardArticle);
+
+		await expectLocalStorageItem(page, 'gu.brazeUserSet', 'true');
+
+		// Set cache data in localStorage so we can check it's cleared below
+		await page.evaluate(() => {
+			window.localStorage.setItem(
+				'gu.brazeMessageCache.EndOfArticle',
+				'[]',
+			);
+			window.localStorage.setItem('gu.brazeMessageCache.Banner', '[]');
+		});
+
+		// User no longer logged in
+		await clearCookie(context, 'GU_U');
+
+		// Make a third call when logged out
+		await loadPageNoOkta(page, standardArticle);
+
+		// Wait for the gu.brazeUserSet flag to NOT be set in localStorage
+		await expectLocalStorageItem(page, 'gu.brazeUserSet', null);
+
+		// Wait for the gu.brazeMessageCache.EndOfArticle flag to NOT be set in localStorage
+		await expectLocalStorageItem(
+			page,
+			'gu.brazeMessageCache.EndOfArticle',
+			null,
+		);
+
+		// Wait for the gu.brazeMessageCache.Banner flag to NOT be set in localStorage
+		await expectLocalStorageItem(page, 'gu.brazeMessageCache.Banner', null);
+	});
+});