Bump @guardian/ophan-tracker-js to 2.8.0

package.json

@@ -112,7 +112,7 @@
 		"@faire/mjml-react": "3.5.4",
 		"@guardian/ab-core": "9.0.0",
 		"@guardian/libs": "32.0.0",
-		"@guardian/ophan-tracker-js": "2.0.3",
+		"@guardian/ophan-tracker-js": "3.1.0",
 		"@guardian/source": "12.2.1",
 		"@guardian/source-development-kitchen": "28.0.0",
 		"@okta/jwt-verifier": "4.0.2",

playwright/fixtures/e2eFixture.ts

@@ -0,0 +1,14 @@
+/* eslint-disable no-empty-pattern -- needed to setup the mockApi function */
+/* eslint-disable react-hooks/rules-of-hooks -- stop eslint from complaining about react hooks in a non react file */
+import { test as base, Page } from '@playwright/test';
+
+type CustomFixtures = {
+	page: Page;
+};
+
+export const test = base.extend<CustomFixtures>({
+	page: async ({ page }, use) => {
+		await page.route('**://ophan.theguardian.com/**', (route) => route.abort());
+		await use(page);
+	},
+});

playwright/fixtures/mockedApiRequest.ts

@@ -4,10 +4,12 @@ import {
 	test as base,
 	request as playwrightRequest,
 	APIRequestContext,
+	Page,
 } from '@playwright/test';
 
 type CustomFixtures = {
 	mockApi: APIRequestContext;
+	page: Page;
 };
 
 export const test = base.extend<CustomFixtures>({

playwright/helpers/load-page.ts

@@ -0,0 +1,19 @@
+import { Page } from '@playwright/test';
+
+/**
+ * Loads a page and waits for the specified event to occur.
+ * By default, it waits for the 'load' event, which means the page has fully loaded.
+ * You can specify 'domcontentloaded' to wait for the DOM to be ready,
+ * or 'networkidle' to wait until there are no more network connections for at least 500 ms.
+ *
+ * @param {Page} page
+ * @param {string} url
+ * @param {('load' | 'domcontentloaded' | 'networkidle')} [waitUntil='load']
+ */
+export const loadPage = async (
+	page: Page,
+	url: string,
+	waitUntil: 'load' | 'domcontentloaded' | 'networkidle' = 'load',
+) => {
+	await page.goto(url, { waitUntil });
+};

playwright/tests/e2e/change_email.spec.ts

@@ -1,7 +1,8 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { randomMailosaurEmail } from '../../helpers/api/idapi';
 import { createTestUser, updateTestUser } from '../../helpers/api/idapi';
 import { checkForEmailAndGetDetails } from '../../helpers/api/mailosaur';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Change email', () => {
 	test.describe('successful and unsuccesful flows', () => {

playwright/tests/e2e/consent_token.spec.ts

@@ -1,6 +1,7 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { createTestUser, sendConsentEmail } from '../../helpers/api/idapi';
 import { checkForEmailAndGetDetails } from '../../helpers/api/mailosaur';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Consent token flow', () => {
 	test('shows the success page when supplied a valid token by a logged in user', async ({

playwright/tests/e2e/delete.spec.ts

@@ -1,7 +1,8 @@
-import { test, expect, Page } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
 import { randomPassword, createTestUser } from '../../helpers/api/idapi';
 import { checkForEmailAndGetDetails } from '../../helpers/api/mailosaur';
 import { mockClientRecaptcha } from '../../helpers/network/recaptcha';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Delete my account flow in Okta', () => {
 	const signInAndVisitDeletePage = async (

playwright/tests/e2e/jobs_terms.spec.ts

@@ -1,11 +1,12 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { createTestUser } from '../../helpers/api/idapi';
 import {
 	getTestOktaUser,
 	updateOktaTestUserProfile,
 } from '../../helpers/api/okta';
 import { JOBS_TOS_URI } from '@/shared/model/Configuration';
 import { escapeRegExp } from '../../helpers/utils';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Jobs terms and conditions flow in Okta', () => {
 	test.describe('Shows the terms and conditions page on Sign In', () => {

playwright/tests/e2e/new_account_review.spec.ts

@@ -1,8 +1,9 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { randomMailosaurEmail } from '../../helpers/api/idapi';
 import { checkForEmailAndGetDetails } from '../../helpers/api/mailosaur';
 import { JOBS_TOS_URI } from '@/shared/model/Configuration';
 import { escapeRegExp } from '../../helpers/utils';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('New account newsletters page', () => {
 	['GB', 'FR', 'AU', 'US'].forEach((geoLocation) => {

playwright/tests/e2e/reauthenticate.spec.ts

@@ -1,7 +1,8 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { createTestUser } from '../../helpers/api/idapi';
 import { checkForEmailAndGetDetails } from '../../helpers/api/mailosaur';
 import { getCurrentOktaSession } from '../../helpers/api/okta';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Reauthenticate flow, Okta enabled, password default', () => {
 	test('keeps User A signed in when User A attempts to reauthenticate', async ({

playwright/tests/e2e/registration_1.spec.ts

@@ -1,11 +1,12 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { Status } from '../../../src/server/models/okta/User';
 import { randomMailosaurEmail, randomPassword } from '../../helpers/api/idapi';
 import { checkForEmailAndGetDetails } from '../../helpers/api/mailosaur';
 import { getTestOktaUser } from '../../helpers/api/okta';
 import { JOBS_TOS_URI } from '@/shared/model/Configuration';
 import { escapeRegExp, incrementPasscode } from '../../helpers/utils';
 import { mockClientRecaptcha } from '../../helpers/network/recaptcha';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Registration flow - Split 1/4', () => {
 	test.describe('Registering with Okta', () => {

playwright/tests/e2e/registration_2.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { Status } from '../../../src/server/models/okta/User';
 import {
 	randomMailosaurEmail,
@@ -13,6 +13,7 @@ import {
 	getTestOktaUser,
 } from '../../helpers/api/okta';
 import { existingUserSendEmailAndValidatePasscode } from '../../helpers/register';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Registration flow - Split 2/4', () => {
 	test.describe('existing user going through registration flow', () => {

playwright/tests/e2e/registration_3.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { Status } from '../../../src/server/models/okta/User';
 import { randomMailosaurEmail, createTestUser } from '../../helpers/api/idapi';
 import { checkForEmailAndGetDetails } from '../../helpers/api/mailosaur';
@@ -9,6 +9,7 @@ import {
 	getTestOktaUser,
 } from '../../helpers/api/okta';
 import { escapeRegExp } from '../../helpers/utils';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Registration flow - Split 3/4', () => {
 	test.describe('Existing users asking for an email to be resent after attempting to register with Okta - useOktaClassic', () => {

playwright/tests/e2e/registration_4.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { Status } from '../../../src/server/models/okta/User';
 import {
 	randomMailosaurEmail,
@@ -14,6 +14,7 @@ import {
 	getTestOktaUser,
 } from '../../helpers/api/okta';
 import { escapeRegExp } from '../../helpers/utils';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Registration flow - Split 4/4', () => {
 	// a few tests to check if the Okta Classic flow is still working using the useOktaClassic flag

playwright/tests/e2e/registration_newsletter.spec.ts

@@ -1,6 +1,7 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { createTestUser } from '../../helpers/api/idapi';
 import { oktaGetApps } from '../../helpers/api/okta-apps';
+import { test } from '../../fixtures/e2eFixture';
 
 // Newsletter descriptions
 const RegistrationNewsletterDescriptions = {

playwright/tests/e2e/reset_password.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect, Request } from '@playwright/test';
+import { expect, Request } from '@playwright/test';
 import {
 	randomMailosaurEmail,
 	randomPassword,
@@ -12,6 +12,7 @@ import {
 	expireOktaUserPassword,
 } from '../../helpers/api/okta';
 import { escapeRegExp } from '../../helpers/utils';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Password reset recovery flows', () => {
 	test.describe('Passcode limbo state - user does not set password after using passcode', () => {

playwright/tests/e2e/reset_password_passcode.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { Status } from '../../../src/server/models/okta/User';
 import {
 	randomMailosaurEmail,
@@ -11,6 +11,7 @@ import {
 	resetOktaUserPassword,
 	expireOktaUserPassword,
 } from '../../helpers/api/okta';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Password reset recovery flows - with Passcodes', () => {
 	test.describe('RECOVERY user', () => {

playwright/tests/e2e/reset_password_passcode_active_user.spec.ts

@@ -1,11 +1,12 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import {
 	randomMailosaurEmail,
 	randomPassword,
 	createTestUser,
 } from '../../helpers/api/idapi';
 import { checkForEmailAndGetDetails } from '../../helpers/api/mailosaur';
 import { escapeRegExp, incrementPasscode } from '../../helpers/utils';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Password reset recovery flows - with Passcodes', () => {
 	test.describe('ACTIVE user with password', () => {

playwright/tests/e2e/reset_password_passcode_remaining_users.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { Status } from '../../../src/server/models/okta/User';
 import {
 	randomMailosaurEmail,
@@ -11,6 +11,7 @@ import {
 	resetOktaUserPassword,
 	expireOktaUserPassword,
 } from '../../helpers/api/okta';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Password reset recovery flows - with Passcodes', () => {
 	test.describe('RECOVERY user', () => {

playwright/tests/e2e/reset_password_passcode_staged_provisioned_users.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { Status } from '../../../src/server/models/okta/User';
 import {
 	randomMailosaurEmail,
@@ -7,6 +7,7 @@ import {
 } from '../../helpers/api/idapi';
 import { checkForEmailAndGetDetails } from '../../helpers/api/mailosaur';
 import { getTestOktaUser, activateTestOktaUser } from '../../helpers/api/okta';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Password reset recovery flows - with Passcodes', () => {
 	test.describe('STAGED user', () => {

playwright/tests/e2e/sign_in_1.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import {
 	randomMailosaurEmail,
 	randomPassword,
@@ -12,6 +12,7 @@ import {
 	findEmailValidatedOktaGroupId,
 } from '../../helpers/api/okta';
 import { escapeRegExp } from '../../helpers/utils';
+import { test } from '../../fixtures/e2eFixture';
 
 const returnUrl =
 	'https://www.theguardian.com/world/2013/jun/09/edward-snowden-nsa-whistleblower-surveillance';

playwright/tests/e2e/sign_in_2.spec.ts

@@ -1,11 +1,12 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { createTestUser } from '../../helpers/api/idapi';
 import {
 	getTestOktaUser,
 	updateOktaTestUserProfile,
 	closeCurrentOktaSession,
 } from '../../helpers/api/okta';
 import { JOBS_TOS_URI } from '@/shared/model/Configuration';
+import { test } from '../../fixtures/e2eFixture';
 
 const returnUrl =
 	'https://www.theguardian.com/world/2013/jun/09/edward-snowden-nsa-whistleblower-surveillance';

playwright/tests/e2e/sign_in_passcode_active_user.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import {
 	randomMailosaurEmail,
 	randomPassword,
@@ -8,6 +8,7 @@ import { checkForEmailAndGetDetails } from '../../helpers/api/mailosaur';
 import { getTestOktaUser } from '../../helpers/api/okta';
 import { mockClientRecaptcha } from '../../helpers/network/recaptcha';
 import { escapeRegExp, incrementPasscode } from '../../helpers/utils';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Sign In flow, with passcode', () => {
 	// set up useful variables

playwright/tests/e2e/sign_in_passcode_non_active_user.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { Status } from '../../../src/server/models/okta/User';
 import { createTestUser } from '../../helpers/api/idapi';
 import {
@@ -8,6 +8,7 @@ import {
 	getTestOktaUser,
 } from '../../helpers/api/okta';
 import { checkForEmailAndGetDetails } from '../../helpers/api/mailosaur';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Sign In flow, with passcode (part 1)', () => {
 	const returnUrl =

playwright/tests/e2e/sign_out.spec.ts

@@ -1,5 +1,6 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
 import { createTestUser } from '../../helpers/api/idapi';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Sign out flow', () => {
 	const DotComCookies = [

playwright/tests/e2e/subscription.spec.ts

@@ -1,6 +1,7 @@
-import { test, expect, Page } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
 import crypto from 'crypto';
 import { createTestUser } from '../../helpers/api/idapi';
+import { test } from '../../fixtures/e2eFixture';
 
 test.describe('Unsubscribe newsletter/marketing email', () => {
 	const newsletterId = 'today-uk';

playwright/tests/mocked/email_input.spec.ts

@@ -1,18 +1,19 @@
 import { test, expect } from '@playwright/test';
+import { loadPage } from '../../helpers/load-page';
 
 test.describe('Email input component', () => {
 	test('should show an error message when nothing submitted', async ({
 		page,
 	}) => {
-		await page.goto('/register/email');
+		await loadPage(page, '/register/email');
 		await page.locator('[data-cy=main-form-submit-button]').click();
 		await expect(page.getByText('Please enter your email.')).toBeVisible();
 	});
 
 	test('should show an error message when an invalid email is submitted', async ({
 		page,
 	}) => {
-		await page.goto('/register/email');
+		await loadPage(page, '/register/email');
 		await page.locator('input[name="email"]').fill('invalid.email.com');
 		await page.locator('[data-cy=main-form-submit-button]').click();
 		await expect(
@@ -23,7 +24,7 @@ test.describe('Email input component', () => {
 	test('does not show an error message when a valid email is submitted', async ({
 		page,
 	}) => {
-		await page.goto('/register/email');
+		await loadPage(page, '/register/email');
 		await page.locator('input[name="email"]').fill('test@email.com');
 		await page.locator('[data-cy=main-form-submit-button]').focus();
 		await expect(
@@ -35,7 +36,7 @@ test.describe('Email input component', () => {
 	test('should correct error once a valid email is submitted', async ({
 		page,
 	}) => {
-		await page.goto('/register/email');
+		await loadPage(page, '/register/email');
 		await page.locator('input[name="email"]').fill('invalid.email.com');
 		await page.locator('[data-cy=main-form-submit-button]').click();
 		await expect(