Enhancement/update critical flows with e2e test coverage

.env.test.sample

@@ -0,0 +1,11 @@
+##
+## Users
+##
+
+# Main user for testing
+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,10 +7,14 @@ dist/*
 docs-built
 .phpunit.result.cache
 /.wp-env.override.json
+.env.test
 
 tests/cypress/videos
 tests/cypress/screenshots
 tests/cypress/reports
 tests/cypress/downloads
 
 mailchimp.zip
+
+# IDE
+/.vscode

README.md

@@ -99,10 +99,13 @@ 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"`
-5. Run `npm run cypress:run`. You can also run `npm run cypress:open` to run tests in UI mode.
+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.
 
 ## Support Level
 

assets/js/mailchimp.js → assets/js/js-submission.js

@@ -15,12 +15,14 @@
 		// See if we're successful, if so, wipe the fields
 		const reg = /class="|'mc_success_msg"|'/i;
 
+		// TODO: Bug: The form data is always cleared regardless of JS or no JS support
 		if (reg.test(data)) {
 			$('#mc_signup_form').each(function () {
 				this.reset();
 			});
 			$('#mc_submit_type').val('js');
 		}
+
 		window.scrollTo({
 			top: document.getElementById('mc_signup').offsetTop - 28,
 			behavior: 'smooth',

mailchimp.php

@@ -112,7 +112,7 @@ function mailchimp_sf_load_resources() {
 	// JS
 	if ( get_option( 'mc_use_javascript' ) === 'on' ) {
 		if ( ! is_admin() ) {
-			wp_enqueue_script( 'mailchimp_sf_main_js', MCSF_URL . 'assets/js/mailchimp.js', array( 'jquery', 'jquery-form' ), MCSF_VER, true );
+			wp_enqueue_script( 'mailchimp_sf_main_js', MCSF_URL . 'assets/js/js-submission.js', array( 'jquery', 'jquery-form' ), MCSF_VER, true );
 			// some javascript to get ajax version submitting to the proper location
 			global $wp_scripts;
 			$wp_scripts->localize(

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,11 +20,13 @@ 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}',
 		supportFile: 'tests/cypress/support/index.js',
 		defaultCommandTimeout: 20000,
+		experimentalRunAllSpecs: true,
 	},
 	retries: {
 		runMode: 2,

tests/cypress/e2e/connect.test.js

@@ -14,30 +14,17 @@ describe('Admin can connect to "Mailchimp" Account', () => {
 			}
 		});
 
-		// Check Mailchimp menu.
-		cy.get('#mailchimp_sf_oauth_connect').should('exist');
-
-		// Enable popup capture.
-		cy.capturePopup();
-
-		cy.get('#mailchimp_sf_oauth_connect').click();
-		cy.wait(6000);
-
-		cy.popup()
-			.find('input#username')
-			.clear()
-			.type(Cypress.env('MAILCHIMP_USERNAME'), { force: true });
-		cy.popup()
-			.find('input#password')
-			.clear()
-			.type(Cypress.env('MAILCHIMP_PASSWORD'), { force: true });
-		cy.popup().find('button[type="submit"]').click({ force: true });
-		cy.wait(10000); // Not a best practice, but did not find a better way to handle this.
-
-		cy.popup().find('input#submitButton').click({ force: true });
-		cy.wait(10000); // Not a best practice, but did not find a better way to handle this.
+		// Mailchimp connection login as a command in order to be reusable
+		cy.mailchimpLogin();
 
+		// Logout exists
 		cy.get('.mc-user h3').contains('Logged in as: ');
 		cy.get('input[value="Logout"]').should('exist');
+
+		// Mailchimp lists exists and has at least one audience
+		cy.get('#mc_list_id').should('exist');
+		cy.get('#mc_list_id')
+		.children()
+		.should('have.length.greaterThan', 1); // The " — Select A List — " default option will always be present
 	});
 });