remove data-cy attribute used in marketing e2e test and replace with …

…test/copy selector small fix to marketing checkbox left padding
guardian · Oct 16, 2024 · 586fb4a · 586fb4a
1 parent eacaf0a
commit 586fb4a
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 9 deletions.
diff --git a/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap b/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`NewsletterPreference component renders correctly and displays marketing
   font-family: "Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
   line-height: 1.333;
   margin-top: 12px;
-  padding-left: 30px;
 }
 
 .emotion-1 {
@@ -307,7 +306,6 @@ exports[`NewsletterPreference component will select the checkbox when the select
   font-family: "Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
   line-height: 1.333;
   margin-top: 12px;
-  padding-left: 30px;
 }
 
 .emotion-1 {

diff --git a/client/components/mma/identity/NewsletterPreference.tsx b/client/components/mma/identity/NewsletterPreference.tsx
@@ -120,7 +120,6 @@ export const NewsletterPreference: FC<NewsletterPreferenceProps> = (props) => {
 				{
 					lineHeight: '1.333',
 					marginTop: '12px',
-					paddingLeft: '30px',
 				},
 			]}
 		>

diff --git a/client/components/mma/identity/PageSection.tsx b/client/components/mma/identity/PageSection.tsx
@@ -7,7 +7,6 @@ interface PageSectionProps {
 	title?: string;
 	description?: string | ReactNode;
 	subtext?: string;
-	testSelector?: string;
 }
 
 const getTitle = (title: PageSectionProps['title']) => (
@@ -51,10 +50,9 @@ const getSubtext = (subtext: PageSectionProps['subtext']) => (
 );
 
 export const PageSection: FC<PageSectionProps> = (props) => {
-	const { children, description, title, subtext, testSelector } = props;
+	const { children, description, title, subtext } = 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,7 +82,6 @@ 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
@@ -50,11 +50,15 @@ describe('E2E with Okta', () => {
 				.find('input[type=checkbox]')
 				.should('not.be.checked');
 
-			cy.get('[data-cy="your_newsletters"]')
+			cy.findByText('Your newsletters')
+				.parent()
+				.parent()
 				.find('a')
 				.click({ multiple: true });
 
-			cy.get('[data-cy="your_newsletters"]')
+			cy.findByText('Your newsletters')
+				.parent()
+				.parent()
 				.find('input[type=checkbox]')
 				.should('not.be.checked');
 		});