feat(dev): replace docker with wp-env

HardeepAsrani · HardeepAsrani · commit 4da8097d0509 · 2026-05-05T14:15:10.000+05:30
diff --git a/.distignore b/.distignore
@@ -24,7 +24,6 @@ vendor/openspout/openspout/README.md
 .idea
 .wordpress-org
 .releaserc.yml
-docker-compose.ci.yml
 CONTRIBUTING.md
 artifacts
 phpstan.neon
diff --git a/.github/ISSUE_TEMPLATE/agent_task.yml b/.github/ISSUE_TEMPLATE/agent_task.yml
@@ -7,7 +7,7 @@ body:
     attributes:
       label: Goal / Acceptance Criteria
       description: "What does 'done' look like? Be specific."
-      placeholder: "Example: Update E2E docs to use npm run env:up/env:down and ensure credentials match bin/cli-setup.sh."
+      placeholder: "Example: Update E2E docs to use npm run env:up/env:down and ensure credentials match .wp-env.json."
     validations:
       required: true
 
diff --git a/.github/agents/visualizer.agent.md b/.github/agents/visualizer.agent.md
@@ -28,5 +28,5 @@ You are the Visualizer plugin agent. Follow repository conventions and prioritiz
 
 ## Notes
 
-- E2E uses Docker via `docker-compose.ci.yml` and the default URL `http://localhost:8889`.
+- E2E uses `@wordpress/env` (config in `.wp-env.json`) and the default URL `http://localhost:8889`.
 - If the task is doc-only or non-code, explain why tests were skipped.
diff --git a/.github/workflows/copilot-setup-steps.yml b/.github/workflows/copilot-setup-steps.yml
@@ -51,13 +51,8 @@ jobs:
       - name: Install PHP dependencies
         run: composer install --prefer-dist --no-progress
 
-      - name: Pre-pull E2E Docker images
-        run: docker compose -f docker-compose.ci.yml pull
-
-      - name: Bootstrap E2E environment
-        env:
-          DOCKER_FILE: docker-compose.ci.yml
-        run: bash bin/wp-init.sh
+      - name: Bootstrap E2E environment (wp-env)
+        run: npx wp-env start
 
       - name: Install WordPress test suite
         run: bash bin/install-wp-tests.sh wordpress_test root root 127.0.0.1:3306
diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml
@@ -10,8 +10,6 @@ concurrency:
 jobs:
   e2e:
     name: Playwright E2E tests
-    env:
-      DOCKER_FILE: docker-compose.ci.yml
     strategy:
       fail-fast: false
     runs-on: ubuntu-22.04
@@ -31,9 +29,8 @@ jobs:
           npx playwright install --with-deps chromium
       - name: Install composer deps
         run: composer install --no-dev
-      - name: Install environment
-        run: |
-          npm run env:up
+      - name: Start wp-env
+        run: npx wp-env start
       - name: Run the tests
         run: |
           npm run test:e2e:playwright
diff --git a/.wp-env.json b/.wp-env.json
@@ -1,11 +1,18 @@
 {
   "core": null,
   "phpVersion": "7.4",
-  "plugins": ["."],
+  "plugins": [
+    "."
+  ],
   "themes": [],
   "config": {
     "WP_DEBUG": true,
     "WP_DEBUG_LOG": true,
-    "SCRIPT_DEBUG": true
+    "WP_DEBUG_DISPLAY": false,
+    "SCRIPT_DEBUG": true,
+    "TI_E2E_TESTING": true
+  },
+  "lifecycleScripts": {
+    "afterStart": "npx wp-env run tests-cli wp plugin install classic-editor elementor --activate && npx wp-env run tests-cli wp theme install twentytwentyone --activate && npx wp-env run tests-cli wp rewrite structure '/%postname%/' --hard && npx wp-env run tests-cli wp option update visualizer_fresh_install 1"
   }
 }
diff --git a/AGENTS.md b/AGENTS.md
@@ -57,8 +57,9 @@ This repo includes `.github/workflows/copilot-setup-steps.yml` to preinstall dep
 10. `npm run env:down`
 
 ### E2E Environment
-- Default: Docker via `npm run env:up` / `npm run env:down` (uses `docker-compose.ci.yml`).
-- Optional: `wp-env` is supported, but Docker is the default for agents.
+- Managed by `@wordpress/env`: `npm run env:up` / `npm run env:down` (configured via `.wp-env.json`).
+- Tests instance runs on `http://localhost:8889` with credentials `admin` / `password`.
+- Run wp-cli against the tests instance via `npx wp-env run tests-cli wp <command>`.
 
 ### Build Outputs
 If you change anything under `classes/Visualizer/**/src`, you must run the corresponding build and commit the output:
diff --git a/bin/cli-setup.sh b/bin/cli-setup.sh
diff --git a/bin/mysql/init-db.sql b/bin/mysql/init-db.sql
diff --git a/bin/run-e2e-tests-default.sh b/bin/run-e2e-tests-default.sh
@@ -1,8 +1,6 @@
 #!/usr/bin/env bash
 set -euo pipefail
 
-export DOCKER_FILE=${DOCKER_FILE:-docker-compose.ci.yml}
-
 npm run env:up
 npm run test:e2e:playwright
 npm run env:down
diff --git a/bin/run-e2e-tests-gutenberg-datatable.sh b/bin/run-e2e-tests-gutenberg-datatable.sh
@@ -4,8 +4,4 @@
 # Requires the environment to be up.
 set -euo pipefail
 
-export DOCKER_FILE=${DOCKER_FILE:-docker-compose.ci.yml}
-docker compose -f $DOCKER_FILE run --rm -u root cli bash -c "wp --allow-root plugin deactivate classic-editor"
-
-
-
+npx wp-env run tests-cli wp plugin deactivate classic-editor.latest-stable
diff --git a/bin/run-e2e-tests-gutenberg.sh b/bin/run-e2e-tests-gutenberg.sh
@@ -4,5 +4,4 @@
 # Requires the environment to be up.
 set -euo pipefail
 
-export DOCKER_FILE=${DOCKER_FILE:-docker-compose.ci.yml}
-docker compose -f $DOCKER_FILE run --rm -u root cli bash -c "wp --allow-root plugin deactivate classic-editor"
+npx wp-env run tests-cli wp plugin deactivate classic-editor.latest-stable
diff --git a/bin/wp-down.sh b/bin/wp-down.sh
diff --git a/bin/wp-init.sh b/bin/wp-init.sh
diff --git a/classes/Visualizer/Module/Chart.php b/classes/Visualizer/Module/Chart.php
@@ -296,7 +296,7 @@ public function setJsonData() {
 		$render->series = json_encode( $source->getSeries() );
 		$render->render();
 
-		defined( 'WP_TESTS_DOMAIN' ) ? wp_die() : exit();
+		( defined( 'WP_TESTS_DOMAIN' ) && function_exists( 'tests_add_filter' ) ) ? wp_die() : exit();
 	}
 
 
@@ -432,7 +432,7 @@ public static function _sendResponse( $results ) {
 		header( 'Content-type: application/json' );
 		nocache_headers();
 		echo json_encode( $results );
-		defined( 'WP_TESTS_DOMAIN' ) ? wp_die() : exit();
+		( defined( 'WP_TESTS_DOMAIN' ) && function_exists( 'tests_add_filter' ) ) ? wp_die() : exit();
 	}
 
 	/**
@@ -614,7 +614,7 @@ public function renderChartPages() {
 			}
 			wp_redirect( esc_url_raw( add_query_arg( 'chart', (int) $chart_id ) ) );
 
-			if ( defined( 'WP_TESTS_DOMAIN' ) ) {
+			if ( defined( 'WP_TESTS_DOMAIN' ) && function_exists( 'tests_add_filter' ) ) {
 				wp_die();
 			}
 			exit();
@@ -712,7 +712,7 @@ public function renderChartPages() {
 				// this should never happen.
 				break;
 		}
-		defined( 'WP_TESTS_DOMAIN' ) ? wp_die() : exit();
+		( defined( 'WP_TESTS_DOMAIN' ) && function_exists( 'tests_add_filter' ) ) ? wp_die() : exit();
 	}
 
 	/**
@@ -1382,7 +1382,7 @@ public function uploadData() {
 		if ( ! $can_die ) {
 			return;
 		}
-		defined( 'WP_TESTS_DOMAIN' ) ? wp_die() : exit();
+		( defined( 'WP_TESTS_DOMAIN' ) && function_exists( 'tests_add_filter' ) ) ? wp_die() : exit();
 	}
 
 	/**
@@ -1438,7 +1438,7 @@ public function cloneChart() {
 			}
 		}
 
-		if ( defined( 'WP_TESTS_DOMAIN' ) ) {
+		if ( defined( 'WP_TESTS_DOMAIN' ) && function_exists( 'tests_add_filter' ) ) {
 			wp_die();
 		}
 		wp_redirect( $redirect );
@@ -1473,7 +1473,7 @@ public function exportData() {
 			}
 		}
 
-		defined( 'WP_TESTS_DOMAIN' ) ? wp_die() : exit();
+		( defined( 'WP_TESTS_DOMAIN' ) && function_exists( 'tests_add_filter' ) ) ? wp_die() : exit();
 	}
 
 	/**
@@ -1638,7 +1638,7 @@ public function saveQuery() {
 		}
 		$render->render();
 		if ( ! ( defined( 'VISUALIZER_DO_NOT_DIE' ) && VISUALIZER_DO_NOT_DIE ) ) {
-			defined( 'WP_TESTS_DOMAIN' ) ? wp_die() : exit();
+			( defined( 'WP_TESTS_DOMAIN' ) && function_exists( 'tests_add_filter' ) ) ? wp_die() : exit();
 		}
 	}
 
@@ -1681,7 +1681,7 @@ public function saveFilter() {
 		do_action( 'visualizer_save_filter', $chart_id, $hours );
 
 		if ( ! ( defined( 'VISUALIZER_DO_NOT_DIE' ) && VISUALIZER_DO_NOT_DIE ) ) {
-			defined( 'WP_TESTS_DOMAIN' ) ? wp_die() : exit();
+			( defined( 'WP_TESTS_DOMAIN' ) && function_exists( 'tests_add_filter' ) ) ? wp_die() : exit();
 		}
 	}
 
diff --git a/classes/Visualizer/Render/Layout.php b/classes/Visualizer/Render/Layout.php
@@ -531,7 +531,7 @@ private static function _renderPermissions( $args ) {
 		$chart_id = $args[1];
 
 		// ignore for unit tests because Travis throws the error "Indirect modification of overloaded property Visualizer_Render_Page_Data::$permissions has no effect".
-		if ( defined( 'WP_TESTS_DOMAIN' ) ) {
+		if ( defined( 'WP_TESTS_DOMAIN' ) && function_exists( 'tests_add_filter' ) ) {
 			return;
 		}
 
diff --git a/docker-compose.ci.yml b/docker-compose.ci.yml
diff --git a/package.json b/package.json
@@ -19,8 +19,9 @@
   "scripts": {
     "dist": "bash bin/dist.sh",
     "release": "semantic-release --debug",
-    "env:up": "export DOCKER_FILE=docker-compose.ci.yml && bash bin/wp-init.sh",
-    "env:down": "export DOCKER_FILE=docker-compose.ci.yml && bash bin/wp-down.sh",
+    "env:up": "wp-env start",
+    "env:down": "wp-env stop",
+    "env:clean": "wp-env clean",
     "wp-env": "wp-env",
     "grunt": "grunt",
     "test:env:start": "wp-env start",
diff --git a/skills/e2e.md b/skills/e2e.md
@@ -1,11 +1,11 @@
 # Run E2E Tests (Visualizer Free)
 
-Run the Playwright end-to-end test suite for the Visualizer free plugin. The environment uses Docker (MariaDB + WordPress on port 8889).
+Run the Playwright end-to-end test suite for the Visualizer free plugin. The environment is managed by [`@wordpress/env`](https://www.npmjs.com/package/@wordpress/env) (Docker under the hood) and serves the test instance on port 8889.
 
 ## Pre-flight checks
 
 1. Make sure Docker is running: `docker info`
-2. Check for port conflicts on 8889 and 3306 — if anything is using them, stop those services first (e.g. `brew services stop mariadb`).
+2. Check for port conflicts on 8888 and 8889 — if anything is using them, stop those services first.
 
 ## Commands
 
@@ -15,8 +15,8 @@ npm ci
 npx playwright install --with-deps chromium
 composer install --no-dev
 
-# 2. Boot WordPress environment (Docker + WP install + plugin activation)
-DOCKER_FILE=docker-compose.ci.yml bash bin/wp-init.sh
+# 2. Boot WordPress environment (wp-env: WP install, plugin/theme activation, constants)
+npm run env:up
 
 # 3a. Run the full Playwright suite
 npm run test:e2e:playwright
@@ -25,19 +25,20 @@ npm run test:e2e:playwright
 # npx wp-scripts test-playwright --config tests/e2e/playwright.config.js tests/e2e/specs/gutenberg-editor.spec.js
 
 # 4. Tear down when done
-DOCKER_FILE=docker-compose.ci.yml bash bin/wp-down.sh
+npm run env:down
 ```
 
 ## Environment
 
-- WordPress: http://localhost:8889
+- WordPress (tests instance): http://localhost:8889
 - Credentials: `admin` / `password`
-- `TI_E2E_TESTING=true` is set in `wp-config.php` by the setup script
+- `TI_E2E_TESTING=true` is set via `.wp-env.json` so the plugin loads E2E-specific hooks
+- Run wp-cli against the test instance with: `npx wp-env run tests-cli wp <command>`
 
 ## Instructions
 
 1. Run the pre-flight checks.
-2. If `wp-init.sh` fails due to a port conflict, identify and stop the conflicting service, then retry.
+2. If `npm run env:up` fails due to a port conflict, identify and stop the conflicting service, then retry.
 3. Run the tests. Show output as it streams.
 4. After tests complete (pass or fail), always run the tear-down command.
 5. Report a summary: how many tests passed, failed, and any error messages from failures.
diff --git a/tests/e2e/README.md b/tests/e2e/README.md
