Enable E2E tests

.github/workflows/pr-checks.yml

@@ -101,3 +101,60 @@ jobs:
 
       - name: Bundle
         run: pnpm bundle:all
+
+  e2e:
+    name: "E2E Tests"
+    if: github.repository == 'wpsocio/wp-projects'
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout this repo
+        uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.ACCESS_TOKEN_IR }}
+
+      - name: Remote refs
+        uses: ./actions/upstream-refs
+        id: remote-refs
+
+      - name: Checkout premium projects repo
+        uses: actions/checkout@v4
+        with:
+          path: premium
+          token: ${{ secrets.ACCESS_TOKEN_IR }}
+          repository: ${{ secrets.PREMIUM_PROJECTS_REPO }}
+          ref: ${{ fromJSON(steps.remote-refs.outputs.result).premium || 'main' }}
+
+      - name: Setup Environment
+        uses: ./actions/setup
+        with:
+          enable-wireit-cache: true
+
+      - name: Build
+        run: pnpm build
+
+      - name: Install Playwright dependencies
+        run: |
+          npx playwright install chromium firefox webkit --with-deps
+
+      - name: Start WordPress Environment
+        run: |
+          pnpm env-start
+
+      - name: Run tests
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+        run: pnpm test:e2e
+
+      - name: Upload debug artifacts
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: failures-artifacts
+          path: artifacts/test-results
+          if-no-files-found: ignore
+
+      - name: Stop WordPress Environment
+        run: |
+          pnpm env-stop

.gitignore

@@ -35,7 +35,6 @@ tsconfig.tsbuildinfo
 .turbo/
 .wireit/
 .phpunit.result.cache
-/test/e2e/artifacts/
 
 # Misc
 build/

.wp-env.json

@@ -1,4 +1,6 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/wp-env.json",
+	"core": "WordPress/WordPress",
 	"config": {
 		"WP_DEBUG_LOG": true
 	},
@@ -13,7 +15,9 @@
 		"tests": {
 			"mappings": {
 				"wp-content/plugins/classic-editor": "WordPress/classic-editor",
-				"wp-content/mu-plugins": "./test/e2e-mu-plugins"
+				"wp-content/mu-plugins": "./test/e2e-mu-plugins",
+				"wp-content/themes/gutenberg-test-themes/twentytwentyone": "https://downloads.wordpress.org/theme/twentytwentyone.2.3.zip",
+				"wp-content/themes/gutenberg-test-themes/twentytwentyfour": "https://downloads.wordpress.org/theme/twentytwentyfour.1.2.zip"
 			}
 		}
 	}

test/e2e-mu-plugins/e2e-wp-rest.php

@@ -1,15 +1,12 @@
 <?php
 /**
- * The plugin main file.
+ * Plugin Name: E2E WP REST: Adds some custom REST API endpoints.
+ * Plugin URI: https://github.com/WPSocio/wp-projects
+ * Author: WP Socio Team
  *
  * @package e2e-wp-rest
  */
 
-// If this file is called directly, abort.
-if ( ! defined( 'WPINC' ) ) {
-	die;
-}
-
 add_action(
 	'rest_api_init',
 	function () {

test/e2e/playwright.config.ts

@@ -6,20 +6,21 @@ import baseConfig from '@wordpress/scripts/config/playwright.config.js';
 
 const config = defineConfig({
 	...baseConfig,
+	reporter: [['list']],
 	workers: 1,
 	globalSetup: fileURLToPath(
 		new URL('./config/global-setup.ts', import.meta.url).href,
 	),
 	projects: [
-		{
+		/* {
 			name: 'site-setup',
 			testMatch: /site-setup\.ts/,
-		},
+		}, */
 		{
 			name: 'chromium',
 			use: { ...devices['Desktop Chrome'] },
 			grepInvert: /-chromium/,
-			dependencies: ['site-setup'],
+			// dependencies: ['site-setup'],
 		},
 		{
 			name: 'webkit',
@@ -29,14 +30,14 @@ const config = defineConfig({
 			},
 			grep: /@webkit/,
 			grepInvert: /-webkit/,
-			dependencies: ['site-setup'],
+			// dependencies: ['site-setup'],
 		},
 		{
 			name: 'firefox',
 			use: { ...devices['Desktop Firefox'] },
 			grep: /@firefox/,
 			grepInvert: /-firefox/,
-			dependencies: ['site-setup'],
+			// dependencies: ['site-setup'],
 		},
 	],
 });

test/e2e/specs/wptelegram-comments/public-ui.spec.ts

@@ -21,7 +21,7 @@ test.describe('Public UI', () => {
 		await rest.deleteOption('wptelegram_comments');
 	});
 
-	test('Should render the widget ', async ({
+	test('Should render the comments widget ', async ({
 		requestUtils,
 		page,
 		editor,
@@ -65,7 +65,7 @@ test.describe('Public UI', () => {
 					);
 
 					await actions.saveChangesAndWait({
-						apiPath: 'wp-json/wptelegram-comments/v1/settings',
+						apiPath: '/wptelegram-comments/v1/settings',
 					});
 				});
 
@@ -91,7 +91,7 @@ test.describe('Public UI', () => {
 				await page.keyboard.type(`${postId}`);
 
 				await actions.saveChangesAndWait({
-					apiPath: 'wp-json/wptelegram-comments/v1/settings',
+					apiPath: '/wptelegram-comments/v1/settings',
 				});
 
 				await page.goto(`/?p=${postId}`);
@@ -110,7 +110,7 @@ test.describe('Public UI', () => {
 				await page.getByLabel('Exclude').clear();
 
 				await actions.saveChangesAndWait({
-					apiPath: 'wp-json/wptelegram-comments/v1/settings',
+					apiPath: '/wptelegram-comments/v1/settings',
 				});
 
 				await page.goto(`/?p=${postId}`);

test/e2e/specs/wptelegram-comments/settings-page.spec.ts

@@ -69,7 +69,7 @@ test.describe('Settings', () => {
 		await page.keyboard.type('<script async></script>');
 
 		await actions.saveChangesAndWait({
-			apiPath: 'wp-json/wptelegram-comments/v1/settings',
+			apiPath: '/wptelegram-comments/v1/settings',
 			assertSaved: true,
 		});
 
@@ -95,7 +95,7 @@ test.describe('Settings', () => {
 		await page.keyboard.type('1, 2, 3,invalid,');
 
 		await actions.saveChangesAndWait({
-			apiPath: 'wp-json/wptelegram-comments/v1/settings',
+			apiPath: '/wptelegram-comments/v1/settings',
 		});
 
 		expect(await page.getByLabel('Code').inputValue()).toBe(

test/e2e/specs/wptelegram-login/public-ui.spec.ts

@@ -35,7 +35,7 @@ test.describe('Public UI', () => {
 		await botUsernameField.fill('E2ETestBot');
 
 		await actions.saveChangesAndWait({
-			apiPath: 'wp-json/wptelegram-login/v1/settings',
+			apiPath: '/wptelegram-login/v1/settings',
 		});
 	});
 

test/e2e/specs/wptelegram-login/settings-page.spec.ts

@@ -162,7 +162,7 @@ test.describe('Settings', () => {
 		await page.keyboard.type('E2ETestBot');
 
 		await actions.saveChangesAndWait({
-			apiPath: 'wp-json/wptelegram-login/v1/settings',
+			apiPath: '/wptelegram-login/v1/settings',
 			assertSaved: true,
 		});
 

test/e2e/utils/actions.ts

@@ -19,7 +19,15 @@ export class Actions {
 
 		await Promise.all([
 			saveButton.click(),
-			this.page.waitForResponse((resp) => resp.url().includes(apiPath)),
+			this.page.waitForResponse((resp) => {
+				const url = resp.url();
+
+				return (
+					url.includes(apiPath) ||
+					// API path can be encoded in the URL as `rest_route`.
+					url.includes(encodeURIComponent(apiPath))
+				);
+			}),
 		]);
 
 		if (assertSaved) {