Add E2E tests

.github/workflows/e2e.yml

@@ -10,9 +10,16 @@ on:
       - develop
 
 jobs:
+  build:
+    uses: mailchimp/wordpress/.github/workflows/build-release-zip.yml@develop
+
   cypress:
+    needs: build
     name: ${{ matrix.core.name }}
     runs-on: ubuntu-latest
+    env:
+      CYPRESS_MAILCHIMP_USERNAME: ${{ secrets.MAILCHIMP_USERNAME }}
+      CYPRESS_MAILCHIMP_PASSWORD: ${{ secrets.MAILCHIMP_PASSWORD }}
     strategy:
       matrix:
         core:
@@ -24,15 +31,25 @@ jobs:
     - name: Checkout
       uses: actions/checkout@v4
 
+    - name: Download build zip
+      uses: actions/download-artifact@v4
+      with:
+        name: ${{ github.event.repository.name }}
+        path: ${{ github.event.repository.name }}
+
+    - name: Display structure of downloaded files
+      run: ls -R
+      working-directory: ${{ github.event.repository.name }}
+
     - uses: actions/setup-node@v4
       with:
         node-version-file: '.nvmrc'
 
     - name: Install dependencies
       run: npm ci
 
-    - name: Set the core version
-      run: ./tests/bin/set-core-version.js ${{ matrix.core.version }}
+    - name: Set the core version and plugins config
+      run: ./tests/bin/set-core-version.js --core=${{ matrix.core.version }} --plugins=./${{ github.event.repository.name }}
 
     - name: Set up WP environment
       run: npm run env:start
@@ -41,6 +58,7 @@ jobs:
       run: npm run cypress:run
 
     - name: Update summary
+      if: always()
       run: |
         npx mochawesome-merge ./tests/cypress/reports/*.json -o tests/cypress/reports/mochawesome.json
         rm -rf ./tests/cypress/reports/mochawesome-*.json

README.md

@@ -104,6 +104,23 @@ Currently we have the plugin configured so it can be translated and the followin
 * sv_SE - Swedish in Sweden (thanks to [Sebastian Johnsson](http://www.agiley.se/) for contributing)
 * tr_TR - Turkish in Turkey (thanks to [Hakan E.](http://kazancexpert.com/) for contributing)
 
+## E2E tests
+The `tests` directory contains end-to-end tests for the project, utilizing Cypress to run tests in an environment created using wp-env.
+
+### Pre-requisites
+- Node.js v20
+- Docker
+- Create an account in [Mailchimp](https://mailchimp.com/)
+
+### Run E2E tests in local
+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.
+
 ## 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

@@ -19,7 +19,7 @@
   },
   "scripts": {
     "cypress:open": "cypress open --config-file tests/cypress/config.js --e2e --browser chrome",
-    "cypress:run": "cypress run --config-file tests/cypress/config.js",
+    "cypress:run": "cypress run --config-file tests/cypress/config.js --e2e --browser chrome",
     "env": "wp-env",
     "env:start": "wp-env start",
     "env:stop": "wp-env stop",
@@ -31,10 +31,10 @@
     "build": "10up-toolkit build"
   },
   "devDependencies": {
-    "@10up/cypress-wp-utils": "^0.3.0",
+    "@10up/cypress-wp-utils": "^0.4.0",
     "@wordpress/env": "^10.2.0",
     "10up-toolkit": "^6.2.0",
-    "cypress": "^13.12.0",
+    "cypress": "^13.13.2",
     "cypress-mochawesome-reporter": "^3.8.2",
     "mochawesome-json-to-md": "^1.3.5"
   },

tests/bin/set-core-version.js

@@ -1,34 +1,46 @@
 #!/usr/bin/env node
 
 const fs = require( 'fs' );
-const { exit } = require( 'process' );
 
-const path = `${ process.cwd() }/.wp-env.override.json`;
+const path = `${ process.cwd() }/.wp-env.json`;
 
-// eslint-disable-next-line import/no-dynamic-require
-const config = fs.existsSync( path ) ? require( path ) : {};
+let config = fs.existsSync( path ) ? require( path ) : { plugins: [ '.' ] };
 
-const args = process.argv.slice( 2 );
+const args = {};
+process.argv
+    .slice(2, process.argv.length)
+    .forEach( arg => {
+        if (arg.slice(0,2) === '--') {
+            const param = arg.split('=');
+            const paramName = param[0].slice(2,param[0].length);
+            const paramValue = param.length > 1 ? param[1] : true;
+            args[paramName] = paramValue;
+        }
+    });
 
-if ( args.length === 0 ) exit( 0 );
+if ( ! args.core && ! args.plugins ) {
+	return;
+}
+
+if ( 'latest' === args.core ) {
+    delete args.core;
+}
 
-if ( args[ 0 ] === 'latest' ) {
-	if ( fs.existsSync( path ) ) {
-		fs.unlinkSync( path );
-	}
-	exit( 0 );
+if( Object.keys(args).length === 0 ) {
+    return;
 }
 
-config.core = args[ 0 ];
+if ( args.plugins ) {
+    args.plugins = args.plugins.split(',');
+}
 
-// eslint-disable-next-line no-useless-escape
-if ( ! config.core.match( /^WordPress\/WordPress\#/ ) ) {
-	config.core = `WordPress/WordPress#${ config.core }`;
+config = {
+    ...config,
+    ...args,
 }
 
 try {
-	fs.writeFileSync( path, JSON.stringify( config ) );
+   fs.writeFileSync( path, JSON.stringify( config ) );
 } catch ( err ) {
-	// eslint-disable-next-line no-console
-	console.error( err );
+    console.error( err );
 }

tests/cypress/config.js

@@ -25,6 +25,10 @@ module.exports = defineConfig( {
 		supportFile: 'tests/cypress/support/index.js',
 		defaultCommandTimeout: 20000,
 	},
+	retries: {
+		runMode: 2,
+		openMode: 0,
+	},
 } );
 
 /**

tests/cypress/e2e/admin.test.js

@@ -1,10 +1,22 @@
-describe( 'Admin can login and make sure plugin is activated', () => {
-	before( () => {
+/* eslint-disable no-undef */
+describe('Admin can login and make sure plugin is activated', () => {
+	before(() => {
 		cy.login();
-	} );
+	});
 
-	it( 'Can deactivate and activate plugin?', () => {
-		cy.deactivatePlugin( 'mailchimp' );
-		cy.activatePlugin( 'mailchimp' );
-	} );
-} );
+	it('Can deactivate and activate plugin?', () => {
+		cy.deactivatePlugin('mailchimp');
+		cy.activatePlugin('mailchimp');
+	});
+
+	it('Can see "Mailchimp" menu and Can visit "Mailchimp" settings page.', () => {
+		cy.visit('/wp-admin/');
+
+		// Check Mailchimp menu.
+		cy.get('#adminmenu li#toplevel_page_mailchimp_sf_options').contains('Mailchimp');
+
+		// Check Heading
+		cy.get('#adminmenu li#toplevel_page_mailchimp_sf_options').click();
+		cy.get('#wpbody .mailchimp-header h1').contains('Mailchimp List Subscribe Form');
+	});
+});

tests/cypress/e2e/connect.test.js

@@ -0,0 +1,43 @@
+/* eslint-disable no-undef */
+describe('Admin can connect to "Mailchimp" Account', () => {
+	before(() => {
+		cy.login();
+	});
+
+	it('Can connect to "Mailchimp" using OAuth flow.', () => {
+		cy.visit('/wp-admin/admin.php?page=mailchimp_sf_options');
+
+		// Logout if already connected.
+		cy.get('body').then(($body) => {
+			if ($body.find('input[value="Logout"]').length > 0) {
+				cy.get('input[value="Logout"]').click();
+			}
+		});
+
+		// 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.
+
+		cy.get('.mc-user h3').contains('Logged in as: ');
+		cy.get('input[value="Logout"]').should('exist');
+	});
+});