fix: flaky cypress tests to use data-cy

guardian · Jul 17, 2024 · 21c69fe · 21c69fe
1 parent a5f8581
commit 21c69fe
Show file tree

Hide file tree

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