Improve dev/test setup; Update docs; Tests: Use shared server instance to support testing plugin zip archive before publish; Run tests for framework and template system

Author: eliot-akira

.wp-env.json

@@ -1,13 +1,12 @@
 {
   "core": "WordPress/WordPress",
   "phpVersion": "8.2",
-  "plugins": ["."],
   "mappings": {
     "wp-content/tangible": "./vendor/tangible",
     "wp-content/plugins/advanced-custom-fields": "./vendor/tangible-dev/advanced-custom-fields",
     "wp-content/plugins/beaver-builder-lite-version": "./vendor/tangible-dev/beaver-builder-lite-version",
     "wp-content/plugins/elementor": "./vendor/tangible-dev/elementor",
-    "wp-content/plugins/tangible-e2e-plugin": "./vendor/tangible/framework/env/e2e-plugin",
+    "wp-content/plugins/tangible-loops-and-logic": ".",
     "wp-content/themes/empty-block-theme": "./vendor/tangible/framework/empty-block-theme"
   }
 }

blueprint.dev.json

@@ -18,10 +18,6 @@
     {
       "step": "login",
       "username": "admin"
-    },
-    {
-      "step": "activatePlugin",
-      "pluginPath": "/var/www/html/wp-content/plugins/tangible-e2e-plugin"
     }
   ]
 }

package.json

@@ -7,53 +7,49 @@
     "url": "git+ssh://git@github.com/tangibleinc/loops-and-logic.git"
   },
   "scripts": {
-    "start": "wp-now start --blueprint=blueprint.dev.json",
-    "dev": "concurrently --raw 'roll dev' 'npm run start'",
+    "start": "wp-env start",
+    "start:update": "wp-env start --update",
+    "stop": "wp-env stop",
+    "dev": "roll dev",
     "build": "roll build",
     "format": "roll format",
     "postinstall": "roll install",
     "update": "roll update",
     "install:dev": "roll install --dev",
     "update:dev": "roll update --dev",
-    "archive": "roll archive && rm -rf publish/tangible-loops-and-logic && unzip publish/tangible-loops-and-logic.zip -d publish/ && npm run test:archive",
-    "// Test": "",
-    "test": "roll run tests/index.ts",
-    "test:all": "npm run test:7.4 && npm run test:8.4 && npm run e2e",
-    "test:7.4": "roll run tests/index.ts PHP_VERSION=7.4",
-    "test:8.4": "roll run tests/index.ts PHP_VERSION=8.4",
-    "test:archive": "roll run tests/index.ts TEST_ARCHIVE=1",
+    "archive": "FOLDER=tangible-loops-and-logic; roll archive && rm -rf publish/$FOLDER && unzip publish/$FOLDER.zip -d publish/ && npm run now:test:archive",
+    "now": "wp-now start --blueprint=blueprint.dev.json",
+    "now:dev": "concurrently --raw 'roll dev' 'npm run now'",
+    "now:test": "roll run tests/now/index.ts",
+    "now:test:archive": "roll run tests/now/index.ts TEST_ARCHIVE=1",
     "-- Local environment --": "https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env",
     "env": "wp-env",
-    "env:start": "wp-env start",
-    "env:update": "wp-env start --update",
-    "env:stop": "wp-env stop",
-    "env:composer": "FOLDER=`basename $(realpath $PWD)`; wp-env run cli --env-cwd=wp-content/plugins/$FOLDER composer",
-    "env:composer:install": "wp-env run cli sudo apk add git && npm run env:composer install",
-    "env:composer:update": "npm run env:composer update",
-    "env:test": "FOLDER=`basename $(realpath $PWD)`; wp-env run tests-wordpress /var/www/html/wp-content/plugins/$FOLDER/vendor/bin/phpunit --testdox -c /var/www/html/wp-content/plugins/$FOLDER/phpunit.xml --verbose",
-    "env:test:7.4": "WP_ENV_PHP_VERSION=7.4 wp-env start && npm run env:test",
-    "env:test:8.2": "WP_ENV_PHP_VERSION=8.2 wp-env start && npm run env:test",
+    "composer": "FOLDER=`basename $(realpath $PWD)`; wp-env run cli --env-cwd=wp-content/plugins/$FOLDER composer",
+    "composer:install": "wp-env run cli sudo apk add git && npm run composer install",
+    "composer:update": "npm run composer update",
+    "test": "FOLDER=`basename $(realpath $PWD)`; wp-env run tests-wordpress /var/www/html/wp-content/plugins/$FOLDER/vendor/bin/phpunit --testdox -c /var/www/html/wp-content/plugins/$FOLDER/phpunit.xml --verbose",
+    "test:7.4": "WP_ENV_PHP_VERSION=7.4 wp-env start && npm run test",
+    "test:8.2": "WP_ENV_PHP_VERSION=8.2 wp-env start && npm run test",
+    "test:all": "npm run test:7.4 && npm run test:8.2 && npm run e2e",
     "env:destroy": "wp-env destroy",
     "env:clean": "wp-env clean all",
     "-- End-to-end testing --": "https://playwright.dev/",
-    "e2e": "playwright test --config tests/playwright.config.js",
+    "e2e": "playwright test --config playwright.config.js",
     "e2e:install": "playwright install chromium",
     "e2e:debug": "npm run e2e -- --debug",
     "e2e:ui": "npm run e2e -- --ui",
     "e2e:watch": "chokidar 'tests/e2e/**/*.js' --initial -c 'npm run e2e -- --retries=0'"
   },
-  "dependencies": {
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@playwright/test": "^1.50.1",
-    "@tangible/env": "^2025.1.31",
-    "@tangible/now": "^2.0.4",
+    "@playwright/test": "^1.52.0",
+    "@tangible/now": "^3.0.2",
     "@tangible/roller": "^2.1.4",
-    "@wordpress/e2e-test-utils-playwright": "^1.18.0",
-    "@wordpress/env": "^10.18.0",
+    "@wordpress/e2e-test-utils-playwright": "^1.22.0",
+    "@wordpress/env": "^10.22.0",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^9.1.2",
-    "testra": "^2.1.4"
+    "testra": "^2.1.5"
   },
   "author": "Team Tangible",
   "license": "MIT",

playwright.config.js

@@ -0,0 +1,95 @@
+/**
+ * Playwright configuration
+ * Based on https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/config/playwright.config.js
+ * @see https://playwright.dev/docs/test-configuration
+ */
+import path, { dirname } from 'node:path'
+import fs from 'node:fs'
+import { fileURLToPath } from 'url'
+import { defineConfig, devices } from '@playwright/test'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const readJson = (f) => JSON.parse(fs.readFileSync(f, 'utf8'))
+
+export default (function createConfig() {
+  const cwd = process.cwd()
+  const testDir = path.join(cwd, 'tests')
+  const testMatch = 'e2e/**/*.js'
+  const timeout = parseInt(process.env.TIMEOUT || '', 10) || 100_000 // Defaults to 100 seconds
+  const artifactsPath = (process.env.WP_ARTIFACTS_PATH ??= path.join(
+    cwd,
+    'artifacts',
+  ))
+  const storageStatePath = (process.env.STORAGE_STATE_PATH ??= path.join(
+    artifactsPath,
+    'storage-states',
+    'admin.json',
+  ))
+
+  // https://playwright.dev/docs/test-global-setup-teardown
+  const globalSetup = path.join(__dirname, 'playwright.setup.js')
+
+  let testSitePort = readJson('.wp-env.json').testsPort || 8889
+  try {
+    testSitePort = readJson('.wp-env.override.json').testsPort || testSitePort
+  } catch (e) {}
+
+  // Env variable used by @wordpress/e2e-test-utils-playwright
+  let testSiteUrl =
+    process.env.WP_BASE_URL ||
+    (process.env.WP_BASE_URL = `http://localhost:${testSitePort}`)
+
+  const config = {
+    reporter: process.env.CI ? [['github']] : [['list']],
+    forbidOnly: !!process.env.CI,
+    fullyParallel: false,
+    workers: 1,
+    retries: process.env.CI ? 2 : 0,
+    timeout,
+    // Don't report slow test "files", as we will be running our tests in serial.
+    reportSlowTests: null,
+    outputDir: path.join(artifactsPath, 'test-results'),
+    snapshotPathTemplate:
+      '{testDir}/{testFileDir}/__snapshots__/{arg}-{projectName}{ext}',
+    use: {
+      baseURL: testSiteUrl,
+      headless: true,
+      viewport: {
+        width: 960,
+        height: 700,
+      },
+      ignoreHTTPSErrors: true,
+      locale: 'en-US',
+      contextOptions: {
+        reducedMotion: 'reduce',
+        strictSelectors: true,
+      },
+      storageState: storageStatePath,
+      actionTimeout: 10_000, // 10 seconds
+      trace: 'retain-on-failure',
+      screenshot: 'only-on-failure',
+      video: 'on-first-retry',
+    },
+    projects: [
+      {
+        name: 'chromium',
+        use: { ...devices['Desktop Chrome'] },
+      },
+    ],
+
+    // Custom
+
+    testDir,
+    testMatch,
+    testIgnore: ['playwright.*.js'],
+    globalSetup,
+    webServer: {
+      command: `wp-env start`,
+      url: testSiteUrl,
+      timeout: 120_000, // 120 seconds.
+      reuseExistingServer: true,
+    },
+  }
+
+  return defineConfig(config)
+})()

playwright.setup.js

@@ -0,0 +1,32 @@
+/**
+ * Based on https://github.com/WordPress/gutenberg/blob/trunk/packages/scripts/config/playwright/global-setup.js
+ */
+import { request } from '@playwright/test'
+import { RequestUtils } from '@wordpress/e2e-test-utils-playwright'
+
+/**
+ * @param {import('@playwright/test').FullConfig} config
+ * @return {Promise<void>}
+ */
+async function globalSetup(config) {
+
+  const { storageState, baseURL } = config.projects[0].use
+  const storageStatePath =
+    typeof storageState === 'string' ? storageState : undefined
+
+  const requestContext = await request.newContext({
+    baseURL,
+  })
+
+  const requestUtils = new RequestUtils(requestContext, {
+    storageStatePath,
+    baseURL,
+  })
+
+  // Authenticate and save the storageState to disk.
+  await requestUtils.setupRest()
+
+  await requestContext.dispose()
+}
+
+export default globalSetup

readme.md

@@ -43,12 +43,10 @@ npm run format
 Start a local dev site using [`wp-now`](https://github.com/WordPress/playground-tools/blob/trunk/packages/wp-now/README.md).
 
 ```sh
-npm run start
+npm run now
 ```
 
-The default user is `admin` with `password`.
-
-Press CTRL + C to stop.
+The default user is `admin` with `password`. Press CTRL + C to stop.
 
 #### Dev dependencies
 
@@ -85,7 +83,7 @@ This plugin comes with a suite of unit and integration tests.
 The test environment is started by running:
 
 ```sh
-npm run env:start
+npm run start
 ```
 
 This uses [`wp-env`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) to quickly spin up a local dev and test environment, optionally switching between multiple PHP versions. It requires **Docker** to be installed. There are instructions available for installing Docker on [Windows](https://docs.docker.com/desktop/install/windows-install/), [macOS](https://docs.docker.com/desktop/install/mac-install/), and [Linux](https://docs.docker.com/desktop/install/linux-install/).
@@ -95,30 +93,36 @@ Visit [http://localhost:8888](http://localhost:8888) to see the dev site, and [h
 Before running tests, install PHPUnit as a dev dependency using Composer inside the container.
 
 ```sh
-npm run env:composer:install
+npm run composer:install
 ```
 
 Composer will add and remove folders in the `vendor` folder, based on `composer.json` and `composer.lock`. If you have any existing Git repositories, ensure they don't have any work in progress before running the above command.
 
 Run the tests:
 
 ```sh
-npm run env:test
+npm run test
 ```
 
 For each PHP version:
 
 ```sh
-npm run env:test:7.4
-npm run env:test:8.2
+npm run test:7.4
+npm run test:8.2
 ```
 
-The version-specific commands take a while to start, but afterwards you can run `npm run env:test` to re-run tests in the same environment.
+The version-specific commands take a while to start, but afterwards you can run `npm run test` to re-run tests in the same environment.
+
+Run tests for all PHP versions and end-to-end tests (see below).
+
+```sh
+npm run test:all
+```
 
 To stop the Docker process:
 
 ```sh
-npm run env:stop
+npm run stop
 ```
 
 To remove Docker containers, volumes, images associated with the test environment.

tests/.wp-env.json

@@ -1,4 +1,6 @@
-import { describe, test, expect } from '@tangible/env/playwright'
+import { test, expect } from '@wordpress/e2e-test-utils-playwright'
+
+const { describe } = test
 
 /**
  * Tests to exercise the frontend and admin features of Tangible Blocks.
@@ -23,7 +25,6 @@ describe('Admin', () => {
 
   const plugins = [
     ['Tangible Loops & Logic', 'tangible-loops-and-logic/tangible-loops-and-logic'],
-    ['Tangible E2E', 'tangible-e2e-plugin/index'],
     ['Elementor', 'elementor/elementor'],
     ['Beaver Builder', 'beaver-builder-lite-version/fl-builder'],
   ]

tests/e2e/index.js

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.wp-env.json"
+}

tests/now/.wp-env.json

@@ -1,5 +1,5 @@
 import { test, is, ok, run } from 'testra'
-import { getServer } from '@tangible/env'
+import { getServer } from './server.ts'
 
 async function ensurePlugin({ wpx }) {
   return wpx/* php */ `
@@ -43,7 +43,8 @@ export default run(async () => {
     phpVersion: process.env.PHP_VERSION || '8.2',
     mappings: process.env.TEST_ARCHIVE
       ? {
-          'wp-content/plugins/tangible-loops-and-logic': '../publish/tangible-loops-and-logic',
+          'wp-content/plugins/tangible-loops-and-logic':
+            '../../publish/tangible-loops-and-logic',
         }
       : {},
     reset: true,
@@ -54,6 +55,9 @@ export default run(async () => {
   test('Plugin - Activate', async () => {
     let result = await ensurePlugin({ wpx })
     is(true, result, 'activate plugin')
+
+    result = await wpx/* php */ `return function_exists('tangible_template');`
+    is(true, result, 'tangible_template() exists')
   })
 
   test('Frontend', async () => {
@@ -63,4 +67,15 @@ export default run(async () => {
     // console.log(result)
     is(200, result.status, 'returns status 200 OK')
   })
+
+  await import(`../../vendor/tangible/framework/tests/index.ts`)
+
+  for (const key of [
+    'loop',
+    'logic',
+    'language',
+    'admin',
+  ]) {
+    await import(`../../vendor/tangible/template-system/tests/${key}/index.ts`)
+  }
 })