Enhancement/add mailchimp api client (#99)

Highlights
- Add a FE Mailchimp client to Cypress tests to verify Mailchimp account interactions. Ensures successful form submission and full integration testing.
- Use .env.test for env variables
- Add health check for tests if Mailchimp client is unable to make requests
- Modularize Cypress commands

‼️ Environment changes needed ‼️
- Need to generate an API key for the test Mailchimp user in the CI/CD pipeline.
- Need to attach that API key to CYPRESS_MAILCHIMP_API_KEY as a Github secret
- Need to attach the server prefix to CYPRESS_MAILCHIMP_API_SERVER_PREFIX as a Github secret

Commits

* Add Mailchimp API package

* Add cypress-dotenv

* Add Mailchimp API client to Cypress

Necessary to interact with the test user account to verify contacts, make deletions, etc.

* Update documentation for env setup

* Remove outdated E2E notes

* Remove log to fix bug. Skip unfinished tests.

* Remove outdated readme note

* Add test to verify lists in WP admin match lists in Mailchimp account

* Add assertion that contacts in Mailchimp account match email submitted

* Simplify mailchimp commands

* Add mailchimp commands to command folder

* Organize commands into modular files

* Rename mailchimpApiConfig to more clearly state purpose

* Fix grammar mistake

* Add scaffolding for gmail api

* Switch to gabi-script for FE requests

* Update .env.test.sample with example of google creds

* Remove gmail api client

Too complicated to set up for our purposes. We're better off with Mailhog

* Remove gapi-script

Author: MaxwellGarceau

.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-lock.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"
   },

package.json

@@ -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/config.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;
+				// });
 			}
 		});
 	});