From 296d76755297947a07e4bee807b4498ab78cd2f6 Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphael.kabo@theguardian.com>
Date: Wed, 17 Jul 2024 12:03:23 +0100
Subject: [PATCH] fix: flaky cypress tests to use data-cy

---
 .../identity/__snapshots__/NewsletterPreference.test.tsx.snap | 2 ++
 client/components/mma/identity/MarketingCheckbox.tsx          | 1 +
 client/components/mma/identity/MarketingToggle.tsx            | 1 +
 client/components/mma/identity/NewsletterPreference.tsx       | 1 +
 client/fixtures/consents.ts                                   | 2 +-
 cypress/tests/e2e/e2e.cy.ts                                   | 4 ++--
 cypress/tests/mocked/parallel-6/emailAndMarketing.cy.ts       | 4 ++--
 7 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap b/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap
index 7ee785491..995ba4453 100644
--- a/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap
+++ b/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap
@@ -114,6 +114,7 @@ exports[`NewsletterPreference component renders correctly and displays marketing
 
 <div
   className="emotion-0"
+  data-cy="13"
   onClick={[Function]}
 >
   <div
@@ -292,6 +293,7 @@ exports[`NewsletterPreference component will select the checkbox when the select
 
 <div
   className="emotion-0"
+  data-cy="13"
   onClick={[Function]}
 >
   <div
diff --git a/client/components/mma/identity/MarketingCheckbox.tsx b/client/components/mma/identity/MarketingCheckbox.tsx
index 63f7948c0..eeb61de5b 100644
--- a/client/components/mma/identity/MarketingCheckbox.tsx
+++ b/client/components/mma/identity/MarketingCheckbox.tsx
@@ -40,6 +40,7 @@ export const MarketingCheckbox: FC<MarketingCheckboxProps> = (props) => {
 	const { id, description, selected, title, onClick } = props;
 	return (
 		<div
+			data-cy={id}
 			onClick={(e) => {
 				// Checkboxes inside labels will trigger click events twice.
 				// Ignore the input click event
diff --git a/client/components/mma/identity/MarketingToggle.tsx b/client/components/mma/identity/MarketingToggle.tsx
index 4cb6e89ac..44a639110 100644
--- a/client/components/mma/identity/MarketingToggle.tsx
+++ b/client/components/mma/identity/MarketingToggle.tsx
@@ -21,6 +21,7 @@ export const MarketingToggle: FC<MarketingToggleProps> = (props) => {
 	const { id, description, selected, title, onClick } = props;
 	return (
 		<div
+			data-cy={id}
 			css={[
 				standardSansText,
 				props.divCss ??
diff --git a/client/components/mma/identity/NewsletterPreference.tsx b/client/components/mma/identity/NewsletterPreference.tsx
index a08466f74..25d69edea 100644
--- a/client/components/mma/identity/NewsletterPreference.tsx
+++ b/client/components/mma/identity/NewsletterPreference.tsx
@@ -93,6 +93,7 @@ export const NewsletterPreference: FC<NewsletterPreferenceProps> = (props) => {
 	} = props;
 	return (
 		<div
+			data-cy={id}
 			onClick={(e) => {
 				// Checkboxes inside labels will trigger click events twice.
 				// Ignore the input click event
diff --git a/client/fixtures/consents.ts b/client/fixtures/consents.ts
index a41f62ad4..b00c15085 100644
--- a/client/fixtures/consents.ts
+++ b/client/fixtures/consents.ts
@@ -63,7 +63,7 @@ export const consents = [
 		isOptOut: false,
 		isChannel: false,
 		isProduct: false,
-		name: 'Guardian products and support',
+		name: 'Similar Guardian products',
 		description:
 			'Information on our products and ways to support and enjoy our independent journalism.',
 	},
diff --git a/cypress/tests/e2e/e2e.cy.ts b/cypress/tests/e2e/e2e.cy.ts
index 89b0df6d6..72811dbba 100644
--- a/cypress/tests/e2e/e2e.cy.ts
+++ b/cypress/tests/e2e/e2e.cy.ts
@@ -34,9 +34,9 @@ describe('E2E with Okta', () => {
 	context('emails tab', () => {
 		it('should allow the user to update their email preferences', () => {
 			cy.visit('/email-prefs');
-			cy.findByText('Guardian products and support').click();
+			cy.get('[data-cy="similar_guardian_products"]').click();
 			cy.visit('/email-prefs');
-			cy.findByText('Guardian products and support')
+			cy.get('[data-cy="similar_guardian_products"]')
 				.parents('div')
 				.get('input[type="checkbox"]')
 				.should('be.checked');
diff --git a/cypress/tests/mocked/parallel-6/emailAndMarketing.cy.ts b/cypress/tests/mocked/parallel-6/emailAndMarketing.cy.ts
index 01d547771..5e71b5c70 100644
--- a/cypress/tests/mocked/parallel-6/emailAndMarketing.cy.ts
+++ b/cypress/tests/mocked/parallel-6/emailAndMarketing.cy.ts
@@ -63,7 +63,7 @@ describe('Email and Marketing page', () => {
 		cy.wait('@consents');
 		cy.wait('@reminders');
 
-		cy.findByText('Guardian products and support');
+		cy.get('[data-cy="similar_guardian_products"]');
 		cy.findByText('Your subscription/support');
 		cy.findByText('Supporter newsletter');
 	});
@@ -90,7 +90,7 @@ describe('Email and Marketing page', () => {
 		cy.wait('@consents');
 		cy.wait('@reminders');
 
-		cy.findByText('Guardian products and support');
+		cy.get('[data-cy="similar_guardian_products"]');
 		cy.findByText('Your subscription/support');
 		cy.findByText('Supporter newsletter');
 	});