E2E: Added tests for the form previewer.

Author: iamdharmesh

assets/css/admin.css

@@ -887,6 +887,10 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover {
 	margin-left: auto;
 }
 
+#mailchimp-sf-settings-page .user-profile-wrapper form {
+	margin: 0px;
+}
+
 #mailchimp-sf-settings-page .user-profile {
 	display: flex;
 	flex-direction: row;

includes/admin/templates/header.php

@@ -23,7 +23,7 @@
 				if ( ! empty( $user['avatar_url'] ) ) {
 					?>
 					<div class="user-profile-avatar">
-						<img src="<?php echo esc_url( $user['avatar_url'] ); ?>" alt="">
+						<img src="<?php echo esc_url( $user['avatar_url'] ); ?>" alt="<?php echo esc_attr( $user['first_name'] ); ?>">
 					</div>
 					<?php
 				}

tests/cypress/e2e/settings/list.test.js

@@ -38,7 +38,6 @@ describe('Mailchimp lists ', () => {
 
 		// Verify that list can be saved
 		cy.selectList('10up');
-		cy.get('.notice.notice-success.is-dismissible').first().contains('Success!');
 
 		// Verify that the settings are visible if a list is saved
 		cy.get('h2.mailchimp-sf-settings-table-title')

tests/cypress/e2e/settings/settings.test.js

@@ -293,4 +293,66 @@ describe('Admin can update plugin settings', () => {
 			});
 		});
 	});
+
+	it('Admin can view form preview on the settings page', () => {
+		cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options');
+		cy.get('h2.mailchimp-sf-settings-table-title')
+			.contains('Form preview')
+			.should('be.visible');
+	});
+
+	it('Form preview should reflect changes made on the settings page', () => {
+		cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options');
+		cy.get('#mc_header_content').clear().type('My Custom Header');
+		cy.wait(1000);
+		cy.get('.mailchimp-sf-form-preview .mc_custom_border_hdr').should(
+			'have.text',
+			'My Custom Header',
+		);
+
+		cy.get('#mc_subheader_content').clear().type('My Custom Subheader');
+		cy.wait(1000);
+		cy.get('.mailchimp-sf-form-preview #mc_subheader').contains('My Custom Subheader');
+
+		cy.get('#mc_submit_text').clear().type('My Custom Button');
+		cy.wait(1000);
+		cy.get('.mailchimp-sf-form-preview #mc_signup_submit').contains('My Custom Button');
+
+		// Field options
+		cy.get('#mc_mv_FNAME').uncheck();
+		cy.wait(1000);
+		cy.get('.mailchimp-sf-form-preview input#mc_mv_FNAME').should('not.exist');
+
+		cy.get('#mc_mv_LNAME').uncheck();
+		cy.wait(1000);
+		cy.get('.mailchimp-sf-form-preview input#mc_mv_LNAME').should('not.exist');
+
+		cy.get('#mc_mv_FNAME').check();
+		cy.wait(1000);
+		cy.get('.mailchimp-sf-form-preview input#mc_mv_FNAME').should('exist');
+
+		cy.get('#mc_mv_LNAME').check();
+		cy.wait(1000);
+		cy.get('.mailchimp-sf-form-preview input#mc_mv_LNAME').should('exist');
+
+		// Unsubscribe link
+		cy.get('#mc_use_unsub_link').check();
+		cy.wait(1000);
+		cy.get('.mailchimp-sf-form-preview #mc_unsub_link').should('exist');
+
+		cy.get('#mc_use_unsub_link').uncheck();
+		cy.wait(1000);
+		cy.get('.mailchimp-sf-form-preview #mc_unsub_link').should('not.exist');
+
+		// Groups
+		cy.get('input[id^="mc_show_interest_groups_"]').check();
+		cy.wait(1000);
+		cy.get('.mailchimp-sf-form-preview .mc_interests_header').should('exist');
+		cy.get('.mailchimp-sf-form-preview .mc_interest').should('exist');
+
+		cy.get('input[id^="mc_show_interest_groups_"]').uncheck();
+		cy.wait(1000);
+		cy.get('.mailchimp-sf-form-preview .mc_interests_header').should('not.exist');
+		cy.get('.mailchimp-sf-form-preview .mc_interest').should('not.exist');
+	});
 });

tests/cypress/e2e/validation/address.test.js

@@ -31,7 +31,7 @@ describe('Address Field Validation', () => {
 		// Set address fields (Addr 1 and City) as required
 		cy.getListId('10up').then((listId) => {
 			cy.updateMergeFieldByTag(listId, 'ADDRESS', { required: true }).then(() => {
-				cy.selectList('10up'); // Refresh list in WordPress
+				cy.selectList('10up', true); // Refresh list in WordPress
 			});
 		});
 	});
@@ -40,7 +40,7 @@ describe('Address Field Validation', () => {
 		// Cleanup: Reset address fields to optional
 		cy.getListId('10up').then((listId) => {
 			cy.updateMergeFieldByTag(listId, 'ADDRESS', { required: false }).then(() => {
-				cy.selectList('10up'); // Refresh list in WordPress
+				cy.selectList('10up', true); // Refresh list in WordPress
 			});
 		});
 	});

tests/cypress/support/commands/settings.js

@@ -11,12 +11,12 @@
  * // Select a Mailchimp list named "10up List"
  * cy.selectList('10up List');
  */
-Cypress.Commands.add('selectList', (listName) => {
+Cypress.Commands.add('selectList', (listName, force = false) => {
 	cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options');
 	cy.get('#mc_list_id option:selected')
 		.invoke('text')
 		.then((value) => {
-			if (value === listName) {
+			if (value === listName && !force) {
 				// Value matches, you can log or perform actions
 				cy.log('Select has the expected value');
 			} else {
@@ -130,7 +130,7 @@ Cypress.Commands.add('setMergeFieldsRequired', (required, listName = '10up', fie
 	// Set all merge fields to required in the Mailchimp test user account
 	cy.getListId(listName).then((listId) => {
 		cy.updateMergeFieldsByList(listId, { required }, fields).then(() => {
-			cy.selectList(listName); // Ensure list is selected, refreshes Mailchimp data with WP
+			cy.selectList(listName, true); // Ensure list is selected, refreshes Mailchimp data with WP
 		});
 	});
 });