Enhancement/add mailchimp api client

.env.test.sample

@@ -0,0 +1,6 @@
+CYPRESS_MAILCHIMP_USERNAME="your mailchimp username"
+CYPRESS_MAILCHIMP_PASSWORD="your mailchimp password"
+
+# Generate API Key: https://mailchimp.com/help/about-api-keys/
+CYPRESS_MAILCHIMP_API_KEY="generate an API key from your mailchimp account and paste here" # e.g. "1234567890abcdef1234567890abcdef-us19"
+CYPRESS_MAILCHIMP_API_SERVER_PREFIX="" # e.g "us19" - your server prefix may be different

.gitignore

@@ -7,6 +7,7 @@ dist/*
 docs-built
 .phpunit.result.cache
 /.wp-env.override.json
+.env.test
 
 tests/cypress/videos
 tests/cypress/screenshots

README.md

@@ -99,20 +99,14 @@ The `tests` directory contains end-to-end tests for the project, utilizing Cypre
 1. Run `npm install`.
 2. Run `npm run build`.
 3. Run `npm run env:start`.
-4. Set Mailchimp credentials as environment variables:
-    - run `export CYPRESS_MAILCHIMP_USERNAME="your mailchimp username"`
-	- run `export CYPRESS_MAILCHIMP_PASSWORD="your mailchimp password"`
-      - Do not forget to escape any special characters with `\`. `echo $CYPRESS_MAILCHIMP_PASSWORD` to ensure the password is set correctly.
+4. Duplicate the `.env.test.sample` file and rename `.env.test`. Populate this file with your own Mailchimp account credentials.
     - **NOTE:** Use a test account that does not require 2FA. 2FA will fail some of the tests.
 5. Set your Mailchimp account up
   - Name the audience in your Mailchimp test account "10up". Required for `settings.test.js`.
   - Enable all merge fields. From your Mailchimp account home page -> `/audience/settings/` -> Edit merge fields/tags -> Set all merge fields to "visible". Required for `settings.test.js`.
 
 6. Run `npm run cypress:run`. You can also run `npm run cypress:open` to run tests in UI mode.
 
-#### E2E tests notes
-- You must run `connect.test.js` before `settings.test.js` in order to log the user in. Otherwise, all settings tests will fail.
-
 ## Support Level
 
 **Active:** Mailchimp is actively working on this, and we expect to continue work for the foreseeable future including keeping tested up to the most recent version of WordPress.  Bug reports, feature requests, questions, and pull requests are welcome.

package.json

@@ -32,9 +32,11 @@
   },
   "devDependencies": {
     "@10up/cypress-wp-utils": "^0.4.0",
+    "@mailchimp/mailchimp_marketing": "^3.0.80",
     "@wordpress/env": "^10.2.0",
     "10up-toolkit": "^6.2.0",
     "cypress": "^13.13.2",
+    "cypress-dotenv": "^3.0.1",
     "cypress-mochawesome-reporter": "^3.8.2",
     "mochawesome-json-to-md": "^1.3.5"
   },

tests/cypress/config.js

@@ -1,6 +1,7 @@
 const { defineConfig } = require( 'cypress' );
 const { loadConfig } = require( '@wordpress/env/lib/config' );
 const getCacheDirectory = require( '@wordpress/env/lib/config/get-cache-directory' );
+const dotenvPlugin = require('cypress-dotenv');
 
 module.exports = defineConfig( {
 	chromeWebSecurity: false,
@@ -19,6 +20,7 @@ module.exports = defineConfig( {
 	},
 	e2e: {
 		setupNodeEvents( on, config ) {
+			config = dotenvPlugin(config, { path: '../../.env.test' }); // Load .env variables into Cypress
 			return setBaseUrl( on, config );
 		},
 		specPattern: 'tests/cypress/e2e/**/*.test.{js,jsx,ts,tsx}',

tests/cypress/e2e/settings.test.js

@@ -18,11 +18,31 @@ describe('Admin can update plugin settings', () => {
 
 		cy.login(); // WP
         cy.mailchimpLoginIfNotAlreadyLoggedIn();
+
+		// Call mailchimpLists once and store the result in the alias 'mailchimpLists'
+		cy.getMailchimpLists().then((mailchimpLists) => {
+			Cypress.env('mailchimpLists', mailchimpLists); // Save globally
+		});
+	});
+
+	it('All lists from user\'s account populate the WP admin dropdown list', () => {
+		cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options');
+		const $wpLists = cy.get('#mc_list_id'); // Lists from the WP admin dropdown
+		const mailchimpLists = Cypress.env('mailchimpLists');
+
+		// Verify that the same number of lists exist in the dropdown as in the Mailchimp account
+		$wpLists.should('have.length', mailchimpLists.length);
+
+		mailchimpLists.forEach((list) => {
+			// Verify that all Mailchimp account lists exist in dropdown
+			cy.get('#mc_list_id').should('contain', list.name);
+		});
 	});
 
 	it('Admin can see list and save it', () => {
 		cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options');
 
+		// Verify that list can be saved
 		cy.get('.mc-h2').contains('Your Lists');
 		cy.get('#mc_list_id').select('10up');
 		cy.get('input[value="Update List"]').click();
@@ -56,7 +76,15 @@ describe('Admin can update plugin settings', () => {
 		// Test here...
 	});
 
-	it('Admin can create a Signup form using the shortcode', () => {
+	/**
+	 * - Test form creation
+	 * - Test form display (basic)
+	 * - Test form error handling (basic)
+	 * - Test form submission
+	 * - Test that the contact was added to the Mailchimp account via the Mailchimp API
+	 */
+	it('Admin can create and submit a Signup form using the shortcode', () => {
+		// Step 1: Set up the post with the shortcode
 		const postTitle = 'Mailchimp signup form - shortcode';
 		const beforeSave = () => {
 			cy.insertBlock('core/shortcode').then((id) => {
@@ -66,18 +94,43 @@ describe('Admin can update plugin settings', () => {
 					.type('[mailchimpsf_form]');
 			});
 		};
+
+		// Step 2: Create the post
 		cy.createPost({ title: postTitle, content: '', beforeSave }).then((post) => {
 			if (post) {
 				shortcodePostURL = `/?p=${post.id}`;
 				cy.visit(shortcodePostURL);
+
+				// Step 3: Verify the form is displayed
 				cy.get('#mc_signup').should('exist');
 				cy.get('#mc_mv_EMAIL').should('exist');
 				cy.get('#mc_signup_submit').should('exist');
 
-				// Test error handling
+				// Step 4: Test error handling
 				cy.get('#mc_signup_submit').click();
 				cy.get('.mc_error_msg').should('exist');
 				cy.get('.mc_error_msg').contains('Email Address: This value should not be blank.');
+
+				// Step 5: Test that the form can be submitted
+				// TODO: Is this email address name a security hazard? "@example.com" emails will not pass validation.
+				const email = '[email protected]';
+				cy.get('#mc_mv_EMAIL').type(email);
+				cy.get('#mc_signup_submit').click();
+
+				// Step 6: Verify that the form was submitted successfully
+				cy.get('.mc_success_msg').should('exist');
+
+				// // TODO: This is failing because we need to confirm the test email address subscription
+				// // Step 7: Verify that the contact was added to the Mailchimp account via the Mailchimp API
+				// const mailchimpLists = Cypress.env('mailchimpLists');
+				// const listId = mailchimpLists.find((list) => list.name === '10up').id;
+				// // Get the contacts from the list
+				// cy.getContactsFromAList(listId).then((contacts) => {
+				// 	console.log('Contacts:', contacts);
+				// 	// Verify that the contact was added to the list
+				// 	const contactJustRegistered = contacts.find((c) => c.email_address === email);
+				// 	expect(contactJustRegistered).to.exist;
+				// });
 			}
 		});
 	});