update cypress e2e test css selectors .. the checkboxes now don't hav…

…e the css class that was being targeted
guardian · Oct 14, 2024 · ea6ec5e · ea6ec5e
1 parent e5b2273
commit ea6ec5e
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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');
 		});
 	});