Install plugins via .wp-env.json for e2e testing. (#709)

* Added .wp-env.json

* Updated WP_BASE_URL.

* Small improvement.

* Added event-espresso via wp-env json.

* Added gutenberg-test-plugin-nonce.

* Small improvement.

* Small improvement.

* Added check out event-espresso-core.

* Added token to checkout step in PR check workflow.

* Added persist-credentials

* Small improvement.

* Cloned folder renaming.

* Small improvement.

.github/workflows/pr-checks.yml

@@ -15,6 +15,7 @@ jobs:
               with:
                   # To make sure all history is fetched for jest --changedSince to work as expected
                   fetch-depth: ${{ ( matrix.task != 'test' && 1 ) || 0 }} # 0 for test, 1 otherwise
+                  token: ${{ secrets.GH_ACTIONS_ACCESS_TOKEN }}
 
             # TODO replace this when setup-node action supports LTS alias
             - name: Set up Node
@@ -66,6 +67,18 @@ jobs:
             - name: Make sure PlayWright doesn't play it wrong
               run: yarn add -WD playwright
 
+            - name: Check out event-espresso-core
+              uses: actions/checkout@v2
+              with:
+                  repository: eventespresso/event-espresso-core
+                  path: event-espresso-core
+                  persist-credentials: true
+                  ref: dev
+                  token: ${{ secrets.GH_ACTIONS_ACCESS_TOKEN }}
+
+            - name: Build event-espresso-core
+              run: cd event-espresso-core && yarn && yarn build
+
             - name: Install WordPress
               run: yarn wp-env start
 

.wp-env.json

@@ -0,0 +1,12 @@
+{
+	"core": "WordPress/WordPress",
+	"env": {
+		"tests": {
+			"mappings": {
+				"wp-content/plugins/event-espresso-core": "./event-espresso-core",
+				"wp-content/plugins/gutenberg-test-plugins": "./packages/e2e-tests/plugins"
+			}
+		}
+	},
+	"plugins": ["."]
+}

package.json

@@ -117,7 +117,6 @@
 		"@wordpress/dependency-extraction-webpack-plugin": "^3.0.0",
 		"@wordpress/env": "^3.0.2",
 		"@wordpress/eslint-plugin": "^8.0.0",
-		"@wordpress/jest-console": "^4.0.1",
 		"babel-eslint": "10.1.0",
 		"babel-jest": "^26.6.3",
 		"babel-loader": "8.2.2",
@@ -163,7 +162,7 @@
 		"mini-css-extract-plugin": "1.3.4",
 		"npm-check": "^5.9.2",
 		"optimize-css-assets-webpack-plugin": "5.0.4",
-		"playwright": "^1.8.0",
+		"playwright": "^1.7.0",
 		"pnp-webpack-plugin": "1.6.4",
 		"postcss-flexbugs-fixes": "4.2.1",
 		"postcss-loader": "3.0.0",

packages/e2e-tests/config/setup-playwright.js

@@ -164,5 +164,4 @@ beforeAll(async () => {
 	// await enablePageDialogAccept();
 	// await observeConsoleLogging();
 	// await trashExistingPosts(page);
-	// await activatePlugin('gutenberg-test-plugin-disables-the-css-animations');
 });

packages/e2e-tests/jest.playwright.config.js

@@ -1,8 +1,17 @@
 module.exports = {
 	preset: 'jest-playwright-preset',
+	globalSetup: 'jest-playwright-preset/setup.js',
+	reporters: undefined,
+	setupFilesAfterEnv: ['<rootDir>/config/setup-playwright.js'],
 	testMatch: ['**/specs/**/*.[jt]s', '**/?(*.)spec.[jt]s'],
+	testEnvironmentOptions: {
+		'jest-playwright': {
+			launchOptions: {
+				headless: process.env.CI === 'true' ? true : process.env.HEADLESS === 'true',
+				// slowMo: +process.env.SLOW_MO,
+			},
+		},
+	},
 	testPathIgnorePatterns: ['/node_modules/'],
-	reporters: undefined,
-	setupFilesAfterEnv: ['<rootDir>/config/setup-playwright.js', '@wordpress/jest-console'],
 	verbose: process.env.CI === 'true',
 };

packages/e2e-tests/plugins/disable-animations.php

@@ -0,0 +1,19 @@
+
+<?php
+/**
+ * Plugin Name: Gutenberg Test Plugin, Disables the CSS animations
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-disable-animations
+ */
+
+/**
+ * Enqueue CSS stylesheet disabling animations.
+ */
+function enqueue_disable_animations_stylesheet() {
+	$custom_css = '* { animation-duration: 0ms !important; transition-duration: 0s !important; }';
+	wp_add_inline_style( 'wp-components', $custom_css );
+}
+
+add_action( 'admin_enqueue_scripts', 'enqueue_disable_animations_stylesheet' );

packages/e2e-tests/plugins/nonce.php

@@ -0,0 +1,16 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Plugin, Nonce
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-plugin-nonce
+ */
+
+/**
+ * Returns the nonce life time.
+ */
+function gutenberg_test_plugin_nonce_life() {
+	return 5;
+}
+add_filter( 'nonce_life', 'gutenberg_test_plugin_nonce_life' );

packages/e2e-tests/specs/hello.test.ts

@@ -0,0 +1,19 @@
+/// <reference types="jest-playwright-preset" />
+/// <reference types="expect-playwright" />
+import { activatePlugin, loginUser } from '../utils';
+
+describe('hello playwright', () => {
+	it('should work', async () => {
+		await loginUser();
+
+		await activatePlugin('event-espresso');
+
+		await page.click(`.toplevel_page_espresso_events > a`);
+
+		const espressoAdmin = await page.$eval('.espresso-admin', (el) => el.innerHTML);
+
+		expect(espressoAdmin).toContain('Event Espresso&nbsp;-&nbsp;Events');
+
+		await browser.close();
+	});
+});

packages/e2e-tests/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"extends": "../../tsconfig.json",
+	"files": ["node_modules/jest-playwright-preset/types/global.d.ts", "node_modules/expect-playwright/global.d.ts"],
+	"compilerOptions": {
+		"isolatedModules": false
+	}
+}

packages/e2e-tests/utils/activate-plugin.js

@@ -10,9 +10,12 @@ import { visitAdminPage } from './visit-admin-page';
  *
  * @param {string} slug Plugin slug.
  */
-export async function activatePlugin(slug, page) {
-	// await switchUserToAdmin();
-	await visitAdminPage('plugins.php', null, page);
+export async function activatePlugin(slug) {
+	await switchUserToAdmin();
+	await visitAdminPage('plugins.php', null);
+
+	await page.screenshot({ path: `artifacts/activatePlugin-before.png` });
+
 	const disableLink = await page.$(`tr[data-slug="${slug}"] .deactivate a`);
 
 	if (disableLink) {
@@ -22,7 +25,9 @@ export async function activatePlugin(slug, page) {
 
 	await page.click(`tr[data-slug="${slug}"] .activate a`);
 
-	await page.isVisible(`tr[data-slug="${slug}"] .deactivate a`);
+	// await page.isVisible(`tr[data-slug="${slug}"] .deactivate a`);
+
+	await page.screenshot({ path: `artifacts/activatePlugin-after.png` });
 
-	// await switchUserToTest();
+	await switchUserToTest();
 }

packages/e2e-tests/utils/shared/config.js

@@ -6,7 +6,7 @@ const WP_ADMIN_USER = {
 const {
 	WP_USERNAME = WP_ADMIN_USER.username,
 	WP_PASSWORD = WP_ADMIN_USER.password,
-	WP_BASE_URL = 'http://ee.local',
+	WP_BASE_URL = process.env.CI === 'true' ? 'http://localhost:8889' : 'http://ee.local',
 } = process.env;
 
 export { WP_ADMIN_USER, WP_USERNAME, WP_PASSWORD, WP_BASE_URL };

packages/e2e-tests/utils/switch-user-to-admin.js

@@ -8,7 +8,7 @@ import { WP_USERNAME, WP_ADMIN_USER } from './shared/config';
  * Switches the current user to the admin user (if the user
  * running the test is not already the admin user).
  */
-export async function switchUserToAdmin(page) {
+export async function switchUserToAdmin() {
 	if (WP_USERNAME === WP_ADMIN_USER.username) {
 		return;
 	}

packages/e2e-tests/utils/switch-user-to-test.js

@@ -12,5 +12,6 @@ export async function switchUserToTest() {
 	if (WP_USERNAME === WP_ADMIN_USER.username) {
 		return;
 	}
+
 	await loginUser();
 }

packages/e2e-tests/utils/visit-admin-page.js

@@ -17,7 +17,7 @@ import { getPageError } from './get-page-error';
  * @param {string} adminPath String to be serialized as pathname.
  * @param {string} query String to be serialized as query portion of URL.
  */
-export async function visitAdminPage(adminPath, query, page) {
+export async function visitAdminPage(adminPath, query) {
 	const adminPage = createURL(join('wp-admin', adminPath), query);
 
 	await page.goto(adminPage);