Merge pull request #87 from mailchimp/enhancement/update-critical-flows-with-e2e-test-coverage

Enhancement/update critical flows with e2e test coverage

Author: vikrampm1

.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,6 +7,7 @@ dist/*
 docs-built
 .phpunit.result.cache
 /.wp-env.override.json
+.env.test
 
 tests/cypress/videos
 tests/cypress/screenshots
@@ -16,4 +17,4 @@ tests/cypress/downloads
 mailchimp.zip
 
 # IDE
-.vscode
+.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
 

package-lock.json

@@ -32,9 +32,11 @@
   },
   "devDependencies": {
     "@10up/cypress-wp-utils": "^0.5.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

@@ -3,3 +3,6 @@ set -e
 
 npm run env run tests-wordpress chmod -- -c ugo+w /var/www/html
 npm run env run tests-cli wp rewrite structure '/%postname%/' -- --hard
+
+wp-env run tests-cli wp post create --post_title='Mailchimp signup form – shortcode' --post_type=page --post_status=publish --post_author=1 --post_content='<!-- wp:shortcode -->[mailchimpsf_form]<!-- /wp:shortcode -->'
+wp-env run tests-cli wp post create --post_title='Mailchimp signup form - Block' --post_type=page --post_status=publish --post_author=1 --post_content='<!-- wp:mailchimp/mailchimp /-->'

tests/bin/initialize.sh

@@ -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: [
@@ -30,6 +32,7 @@ module.exports = defineConfig( {
 		],
 		supportFile: 'tests/cypress/support/index.js',
 		defaultCommandTimeout: 20000,
+		experimentalRunAllSpecs: true,
 	},
 	retries: {
 		runMode: 2,

tests/cypress/config.js

@@ -14,42 +14,15 @@ 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);
-
-		// Accept cookie consent popup window (if present)
-		cy.popup().then(($popup) => {
-			const acceptButtonSelector = '#onetrust-accept-btn-handler';
-
-			// Check if the accept button is visible and click it
-			if ($popup.find(acceptButtonSelector).length > 0 && $popup.find(acceptButtonSelector).is(':visible')) {
-				$popup.find(acceptButtonSelector).click();
-			} else {
-				cy.log('Cookie consent popup not found or not visible.');
-			}
-		});
-
-		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
 	});
 });

tests/cypress/e2e/connect.test.js

@@ -23,6 +23,9 @@ describe('Admin can login and make sure plugin is activated', () => {
 	it('Admin can see "Create account" button and Can visit "Create account" settings page.', () => {
 		cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options');
 
+		// If logged in then log out
+		cy.mailchimpLogout();
+
 		// Check Create account button.
 		cy.get('.button.mailchimp-sf-button.button-secondary').should('be.visible');
 		cy.get('.button.mailchimp-sf-button.button-secondary').contains('Create an account');
@@ -35,6 +38,9 @@ describe('Admin can login and make sure plugin is activated', () => {
 	it("Admin shouldn't be able to submit create account form with invalid data", () => {
 		cy.visit('/wp-admin/admin.php?page=mailchimp_sf_create_account');
 
+		// If logged in then log out
+		cy.mailchimpLogout();
+
 		// Submit form without filling any data.
 		cy.get('#mailchimp-sf-create-activate-account').click();