Protect: Add E2E Tests (#42197)

Author: nateweller

.github/files/e2e-tests/e2e-matrix.js

@@ -122,6 +122,14 @@ const projects = [
 		suite: '',
 		buildGroup: 'jetpack-social',
 	},
+	{
+		project: 'Protect',
+		path: 'projects/plugins/protect/tests/e2e',
+		testArgs: [],
+		targets: [ 'plugins/protect' ],
+		suite: '',
+		buildGroup: 'jetpack-protect',
+	},
 ];
 
 const matrix = [];

pnpm-lock.yaml

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add E2E tests.

projects/plugins/protect/changelog/add-protect-e2e-tests

@@ -0,0 +1,10 @@
+/node_modules
+/config/local*
+/config/tmp/*
+/output
+plan-data.txt
+e2e_tunnels.txt
+jetpack-private-options.txt
+/allure-results
+storage.json
+/tmp

projects/plugins/protect/tests/e2e/.gitignore

@@ -0,0 +1 @@
+module.exports = require( '_jetpack-e2e-commons/config/default.cjs' );

projects/plugins/protect/tests/e2e/config/default.cjs

@@ -0,0 +1,3 @@
+import { makeE2eConfig } from '_jetpack-e2e-commons/eslint.config.mjs';
+
+export default [ ...makeE2eConfig( import.meta.url ) ];

projects/plugins/protect/tests/e2e/eslint.config.mjs

@@ -0,0 +1,45 @@
+{
+	"private": true,
+	"type": "module",
+	"description": "Security tools that keep your site safe and sound, from posts to plugins.",
+	"homepage": "https://jetpack.com",
+	"bugs": {
+		"url": "https://github.com/Automattic/jetpack/labels/[Plugin] Protect"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Automattic/jetpack.git",
+		"directory": "projects/plugins/protect"
+	},
+	"license": "GPL-2.0-or-later",
+	"author": "Automattic",
+	"scripts": {
+		"build": "pnpm jetpack build packages/assets packages/connection plugins/protect plugins/jetpack -v --no-pnpm-install --production",
+		"clean": "rm -rf output",
+		"config:decrypt": "openssl enc -md sha1 -aes-256-cbc -d -pass env:CONFIG_KEY -in ./node_modules/_jetpack-e2e-commons/config/encrypted.enc -out ./config/local.cjs",
+		"distclean": "rm -rf node_modules",
+		"env:up": "e2e-env start --activate-plugins protect",
+		"env:down": "e2e-env stop",
+		"env:reset": "e2e-env reset --activate-plugins protect",
+		"tunnel:up": "tunnel up",
+		"tunnel:reset": "tunnel reset",
+		"tunnel:down": "tunnel down",
+		"pretest:run": "pnpm run clean",
+		"test:run": ". ./node_modules/_jetpack-e2e-commons/bin/app-password.sh && playwright install --with-deps chromium && NODE_CONFIG_DIR='./config' ALLURE_RESULTS_DIR=./output/allure-results NODE_PATH=\"$PWD/node_modules\" playwright test --config=./playwright.config.mjs"
+	},
+	"devDependencies": {
+		"@playwright/test": "1.48.2",
+		"allure-playwright": "2.9.2",
+		"config": "3.3.12",
+		"_jetpack-e2e-commons": "workspace:*"
+	},
+	"browserslist": [],
+	"ci": {
+		"targets": [
+			"plugins/protect",
+			"tools/e2e-commons"
+		],
+		"pluginSlug": "protect",
+		"mirrorName": "jetpack-protect-plugin"
+	}
+}

projects/plugins/protect/tests/e2e/package.json

@@ -0,0 +1 @@
+export { default } from '_jetpack-e2e-commons/config/playwright.config.default.mjs';

projects/plugins/protect/tests/e2e/playwright.config.mjs

@@ -0,0 +1,37 @@
+import { prerequisitesBuilder } from '_jetpack-e2e-commons/env/prerequisites.js';
+import { expect, test } from '_jetpack-e2e-commons/fixtures/base-test.js';
+import logger from '_jetpack-e2e-commons/logger.js';
+
+test.describe( 'Jetpack Protect plugin', () => {
+	test.beforeEach( async ( { page } ) => {
+		await prerequisitesBuilder( page )
+			.withCleanEnv()
+			.withActivePlugins( [ 'protect' ] )
+			.withLoggedIn( true )
+			.build();
+	} );
+
+	test( 'Jetpack Protect admin page', async ( { page, admin } ) => {
+		logger.action( 'Visit the Jetpack Protect admin page and start for free' );
+
+		await admin.visitAdminPage( 'admin.php', 'page=jetpack-protect' );
+
+		logger.action( 'Checking for button "Get Jetpack Protect"' );
+		const getJetpackProtectButton = page.getByRole( 'button', { name: 'Get Jetpack Protect' } );
+		await expect( getJetpackProtectButton ).toBeVisible();
+		await expect( getJetpackProtectButton ).toBeEnabled();
+
+		logger.action( 'Checking for button "Start for free"' );
+		const startForFreeButton = page.getByRole( 'button', { name: 'Start for free' } );
+		await expect( startForFreeButton ).toBeVisible();
+		await expect( startForFreeButton ).toBeEnabled();
+
+		logger.action( 'Click the start for free button' );
+		await startForFreeButton.click();
+
+		logger.action( 'Checking for heading "Stay one step ahead of threats"' );
+		await expect(
+			page.getByRole( 'heading', { name: 'Stay one step ahead of threats' } )
+		).toBeVisible();
+	} );
+} );

projects/plugins/protect/tests/e2e/specs/start.test.js

@@ -47,11 +47,22 @@ Update `tests/e2e/package.json` to match your plugin description. Also, review `
 
 ### Update PNPM workspace definitions
 
-For monorepo to pick up additional dependencies in `e2e` folder, it should be added into `pnpm-workspace.yaml` definitions. Add `'projects/plugins/YOUR-PLUGIN/tests/e2e'` into the file.
+For monorepo to pick up additional dependencies in `e2e` folder, ensure that it is included in `pnpm-workspace.yaml` package definitions. By default, the workspace file will automatically include your project if it follows the `'projects/plugins/YOUR-PLUGIN/tests/e2e'` naming convention.
 
 ### Add your plugin tests into CI pipeline
 
-In `.github/files/create-e2e-projects-matrix.sh` we define list of E2E projects to run tests for. Add your plugin into `PROJECTS` list as follows: `'{"project":"PLUGIN NAME","path":"projects/plugins/YOUR-PLUGIN/tests/e2e","testArgs":[],"slackArgs":[]}`. Be aware of spaces between entries.
+In `.github/files/e2e-tests/e2e-matrix.js` we define list of E2E projects to run tests for. Add your plugin into `projects` list as follows: 
+
+```javascript
+{
+		project: 'PLUGIN NAME',
+		path: 'projects/plugins/YOUR-PLUGIN/tests/e2e',
+		testArgs: [],
+		targets: [ 'plugins/jetpack' ],
+		suite: '',
+		buildGroup: 'jetpack-core',
+}
+```
 
 ### Run the tests