Fix failing E2E tests.

Author: iamdharmesh

tests/cypress/e2e/validation/validate-required-fields.test.js

@@ -46,15 +46,41 @@ describe('Validate required fields', () => {
 		cy.mailchimpLoginIfNotAlreadyLoggedIn();
 
 		// Set all merge fields to required in the Mailchimp test user account
-		cy.setMergeFieldsRequired(true);
+		cy.setMergeFieldsRequired(true, '10up', [
+			'FNAME',
+			'LNAME',
+			'ADDRESS',
+			'BIRTHDAY',
+			'COMPANY',
+			'MMERGE8',
+			'MMERGE9',
+			'MMERGE10',
+			'MMERGE11',
+			'MMERGE7',
+			'MMERGE6',
+			'PHONE',
+		]);
 	});
 
 	after(() => {
 		// I don't know why we need to login again, but we do
 		cy.login(); // WordPress login
 
 		// Cleanup: Set all merge fields to not required in the Mailchimp test user account
-		cy.setMergeFieldsRequired(false);
+		cy.setMergeFieldsRequired(false, '10up', [
+			'FNAME',
+			'LNAME',
+			'ADDRESS',
+			'BIRTHDAY',
+			'COMPANY',
+			'MMERGE8',
+			'MMERGE9',
+			'MMERGE10',
+			'MMERGE11',
+			'MMERGE7',
+			'MMERGE6',
+			'PHONE',
+		]);
 
 		// Cleanup: Uncheck all optional merge fields
 		cy.toggleMergeFields('uncheck');
@@ -66,7 +92,14 @@ describe('Validate required fields', () => {
 		cy.get('#mc_mv_EMAIL').clear().type(email); // Email is always required
 
 		requiredFields.forEach((field) => {
-			cy.get(field.selector).clear().type(field.input);
+			if (field.selector === '#mc_mv_PHONE') {
+				const phone = field.input.split('-');
+				cy.get('#mc_mv_PHONE-area').clear().type(phone[0]);
+				cy.get('#mc_mv_PHONE-detail1').clear().type(phone[1]);
+				cy.get('#mc_mv_PHONE-detail2').clear().type(phone[2]);
+			} else {
+				cy.get(field.selector).clear().type(field.input);
+			}
 			cy.get('body').click(0, 0); // Click outside the field to clear the datepicker modal
 		});
 
@@ -88,13 +121,19 @@ describe('Validate required fields', () => {
 		// Ensure the form exists
 		cy.get('#mc_signup').should('exist');
 
+		// Fill out entire form everytime so we can narrow tests to one input at a time
+		fillOutAllFields();
+
 		// Test validation for each required field
 		requiredFields.forEach((field) => {
-			// Fill out entire form everytime so we can narrow tests to one input at a time
-			fillOutAllFields();
-
 			// Submit the form without input to trigger validation
-			cy.get(field.selector).clear(); // Ensure field is empty
+			if (field.selector === '#mc_mv_PHONE') {
+				cy.get('#mc_mv_PHONE-area').clear();
+				cy.get('#mc_mv_PHONE-detail1').clear();
+				cy.get('#mc_mv_PHONE-detail2').clear();
+			} else {
+				cy.get(field.selector).clear(); // Ensure field is empty
+			}
 			cy.get('body').click(0, 0); // Click outside the field to clear the datepicker modal
 			cy.get('#mc_signup_submit').click();
 
@@ -103,7 +142,15 @@ describe('Validate required fields', () => {
 			cy.get('.mc_error_msg').should('include.text', field.errorMessage);
 
 			// Fill in the field
-			cy.get(field.selector).type(field.input);
+			if (field.selector === '#mc_mv_PHONE') {
+				const phone = field.input.split('-');
+				cy.get('#mc_mv_PHONE-area').clear().type(phone[0]);
+				cy.get('#mc_mv_PHONE-detail1').clear().type(phone[1]);
+				cy.get('#mc_mv_PHONE-detail2').clear().type(phone[2]);
+			} else {
+				cy.get(field.selector).type(field.input);
+			}
+			cy.get('body').click(0, 0); // Click outside the field to clear the datepicker modal
 		});
 	});
 });

tests/cypress/support/commands/mailchimpApi.js

@@ -148,10 +148,15 @@ function getContactFromList(email, listName = '10up') {
  * @returns {Promise} - A promise that resolves when all merge fields are updated
  */
 Cypress.Commands.add('updateMergeFieldsByList', updateMergeFieldsByList);
-async function updateMergeFieldsByList(listId, data) {
+async function updateMergeFieldsByList(listId, data, fields = []) {
   const mergeFields = await getMergeFields(listId);
   const updatedMergeFields = mergeFields.map((field) => {
-    return updateMergeField(listId, field.merge_id, field.name, data);
+		// If fields are provided, check if the field is in the list
+		if (fields.length > 0 && !fields.includes(field.tag)) {
+			return Promise.resolve(); // Skip this field
+		} else {
+			return updateMergeField(listId, field.merge_id, field.name, data);
+		}
   });
 
   return await Promise.all(updatedMergeFields);

tests/cypress/support/commands/settings.js

@@ -13,7 +13,7 @@
  */
 Cypress.Commands.add('selectList', (listName) => {
 	cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options');
-	cy.get('#mc_list_id').select(listName, {force: true});
+	cy.get('#mc_list_id').select(listName, { force: true });
 	cy.get('input[value="Update List"]').click();
 });
 
@@ -114,11 +114,11 @@ function toggleMergeFields(action) {
  * // Set merge fields for a specific list
  * cy.setMergeFieldsRequired(true, 'Custom List');
  */
-Cypress.Commands.add('setMergeFieldsRequired', (required, listName = '10up') => {
+Cypress.Commands.add('setMergeFieldsRequired', (required, listName = '10up', fields = []) => {
 	// Set all merge fields to required in the Mailchimp test user account
 	cy.getListId(listName).then((listId) => {
-		cy.updateMergeFieldsByList(listId, { required: required }).then(() => {
+		cy.updateMergeFieldsByList(listId, { required }, fields).then(() => {
 			cy.selectList(listName); // Ensure list is selected, refreshes Mailchimp data with WP
 		});
 	});
-})
+});