From ea6ec5e69dbdbd958636a65884c31e9baf9a4865 Mon Sep 17 00:00:00 2001
From: Richard Bangay <richard.bangay@guardian.co.uk>
Date: Mon, 14 Oct 2024 14:26:00 +0100
Subject: [PATCH] update cypress e2e test css selectors .. the checkboxes now
 don't have the css class that was being targeted

---
 .../NewsletterPreference.test.tsx.snap            |  4 ++--
 .../mma/identity/NewsletterPreference.tsx         |  2 +-
 client/components/mma/identity/PageSection.tsx    |  4 +++-
 .../emailAndMarketing/NewsletterSection.tsx       |  1 +
 cypress/tests/e2e/e2e.cy.ts                       | 15 ++++++++-------
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap b/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap
index 061a6d7ed..aff1bc555 100644
--- a/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap
+++ b/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap
@@ -234,7 +234,6 @@ html:not(.src-focus-disabled) .emotion-2:focus {
 
 <div
   className="emotion-0"
-  data-cy="13"
 >
   <div
     className="emotion-1"
@@ -244,6 +243,7 @@ html:not(.src-focus-disabled) .emotion-2:focus {
       aria-label="Test title (Test frequency)"
       checked={false}
       className="emotion-2"
+      data-cy="13"
       id=":r0:"
       onChange={[Function]}
       type="checkbox"
@@ -535,7 +535,6 @@ html:not(.src-focus-disabled) .emotion-2:focus {
 
 <div
   className="emotion-0"
-  data-cy="13"
 >
   <div
     className="emotion-1"
@@ -545,6 +544,7 @@ html:not(.src-focus-disabled) .emotion-2:focus {
       aria-label="Test title (Test frequency)"
       checked={true}
       className="emotion-2"
+      data-cy="13"
       id=":r1:"
       onChange={[Function]}
       type="checkbox"
diff --git a/client/components/mma/identity/NewsletterPreference.tsx b/client/components/mma/identity/NewsletterPreference.tsx
index 1d848914a..5c40a5aaa 100644
--- a/client/components/mma/identity/NewsletterPreference.tsx
+++ b/client/components/mma/identity/NewsletterPreference.tsx
@@ -115,7 +115,6 @@ export const NewsletterPreference: FC<NewsletterPreferenceProps> = (props) => {
 	return (
 		<div
 			key={id}
-			data-cy={id}
 			css={[
 				standardText,
 				{
@@ -126,6 +125,7 @@ export const NewsletterPreference: FC<NewsletterPreferenceProps> = (props) => {
 			]}
 		>
 			<Checkbox
+				data-cy={id}
 				checked={!!selected}
 				onChange={interact}
 				label={title && getTitle(title)}
diff --git a/client/components/mma/identity/PageSection.tsx b/client/components/mma/identity/PageSection.tsx
index a9a2e35f6..533294105 100644
--- a/client/components/mma/identity/PageSection.tsx
+++ b/client/components/mma/identity/PageSection.tsx
@@ -7,6 +7,7 @@ interface PageSectionProps {
 	title?: string;
 	description?: string | ReactNode;
 	subtext?: string;
+	testSelector?: string;
 }
 
 const getTitle = (title: PageSectionProps['title']) => (
@@ -50,9 +51,10 @@ const getSubtext = (subtext: PageSectionProps['subtext']) => (
 );
 
 export const PageSection: FC<PageSectionProps> = (props) => {
-	const { children, description, title, subtext } = props;
+	const { children, description, title, subtext, testSelector } = props;
 	return (
 		<div
+			data-cy={testSelector}
 			css={{
 				[from.desktop]: {
 					display: 'flex',
diff --git a/client/components/mma/identity/emailAndMarketing/NewsletterSection.tsx b/client/components/mma/identity/emailAndMarketing/NewsletterSection.tsx
index dba39f30c..8e737cc24 100644
--- a/client/components/mma/identity/emailAndMarketing/NewsletterSection.tsx
+++ b/client/components/mma/identity/emailAndMarketing/NewsletterSection.tsx
@@ -82,6 +82,7 @@ export const NewsletterSection: FC<NewsletterSectionProps> = (props) => {
 	const { newsletters, clickHandler } = props;
 	return (
 		<PageSection
+			testSelector="your_newsletters"
 			title="Your newsletters"
 			description={`
         Our regular newsletters help you get closer to our quality,
diff --git a/cypress/tests/e2e/e2e.cy.ts b/cypress/tests/e2e/e2e.cy.ts
index 664cf336e..d71c1c593 100644
--- a/cypress/tests/e2e/e2e.cy.ts
+++ b/cypress/tests/e2e/e2e.cy.ts
@@ -37,19 +37,20 @@ describe('E2E with Okta', () => {
 			cy.get('[data-cy="similar_guardian_products"]').click();
 			cy.visit('/email-prefs');
 			cy.get('[data-cy="similar_guardian_products"]')
-				.parents('div')
-				.get('.checkbox')
-				.should('have.attr', 'aria-checked')
-				.and('eq', 'true');
+				.find('input[type=checkbox]')
+				.should('be.checked');
 		});
 
 		it('should allow the user to unsubscribe from all emails', () => {
 			cy.visit('/email-prefs');
 			cy.findByText('Unsubscribe from all emails').click();
 			cy.visit('/email-prefs');
-			cy.get('.checkbox')
-				.should('have.attr', 'aria-checked')
-				.and('eq', 'false');
+			cy.get('[data-cy="similar_guardian_products"]')
+				.find('input[type=checkbox]')
+				.should('not.be.checked');
+			cy.get('[data-cy="your_newsletters"]')
+				.find('input[type=checkbox]')
+				.should('not.be.checked');
 		});
 	});