Adds playwright e2e setup

.github/workflows/e2e.yml

@@ -0,0 +1,52 @@
+name: E2E Tests
+on: [push]
+
+jobs:
+    test:
+        timeout-minutes: 60
+        runs-on: ubuntu-latest
+        strategy:
+            fail-fast: false
+            matrix:
+                php-versions: ['8.3']
+        env:
+            WP_BASE_URL: 'http://localhost:8888'
+            WP_USERNAME: 'admin'
+            WP_PASSWORD: 'password'
+            WP_AUTH_STORAGE: '.auth/wordpress.json'
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '20.11'
+
+            - name: Cache Composer dependencies
+              uses: actions/cache@v4
+              with:
+                  path: /tmp/composer-cache
+                  key: ${{ runner.os }}-${{ hashFiles('**/composer.lock') }}
+
+            - name: Setup composer
+              uses: php-actions/composer@v6
+              with:
+                  php_version: ${{ matrix.php-versions }}
+                  dev: no
+
+            - name: Install packages
+              run: yarn install --immutable
+
+            - name: Playwright install
+              run: yarn playwright install
+
+            - name: Start wp-env
+              run: yarn wp-env
+
+            - name: Run Playwright tests
+              run: npx playwright test --reporter=github
+
+            - uses: actions/upload-artifact@v4
+              if: always()
+              with:
+                  name: playwright-report
+                  path: playwright-report/
+                  retention-days: 30

.github/workflows/js.yml

@@ -1,27 +1,23 @@
-name: JS
+name: JS lint & test
 on: [push]
 
 jobs:
-  build:
-    name: Lint & Test
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
+    build:
+        name: Lint & Test
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
 
-      - name: Set Node.js 20.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 20.x
+            - name: Setup Node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20.11
 
-      - name: Run install
-        uses: borales/actions-yarn@v4
-        with:
-          cmd: install # will run `yarn install` command
-      - name: JS Lint
-        uses: borales/actions-yarn@v4
-        with:
-          cmd: lint:js
-      - name: Test the app
-        uses: borales/actions-yarn@v4
-        with:
-          cmd: test:js # will run `yarn test` command
+            - name: Install packages
+              run: yarn install --immutable
+
+            - name: JS lint
+              run: yarn lint:js
+
+            - name: JS test
+              run: yarn test:js

.github/workflows/php.yml

@@ -1,36 +1,36 @@
-name: PHP
+name: PHP lint & test
 on: [push]
 
 jobs:
-  lint-test:
-    name: ${{ matrix.php-versions }} Lint & Test
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        php-versions: ['8.3']
+    lint-test:
+        name: ${{ matrix.php-versions }} Lint & Test
+        runs-on: ubuntu-latest
+        strategy:
+            fail-fast: false
+            matrix:
+                php-versions: ['8.3']
 
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
 
-      - name: Cache Composer dependencies
-        uses: actions/cache@v3
-        with:
-          path: /tmp/composer-cache
-          key: ${{ runner.os }}-${{ hashFiles('**/composer.lock') }}
+            - name: Cache Composer dependencies
+              uses: actions/cache@v4
+              with:
+                  path: /tmp/composer-cache
+                  key: ${{ runner.os }}-${{ hashFiles('**/composer.lock') }}
 
-      - name: Setup PHP
-        uses: php-actions/composer@v6
-        with:
-          php_version: ${{ matrix.php-versions }}
-          command: update
+            - name: Setup PHP
+              uses: php-actions/composer@v6
+              with:
+                  php_version: ${{ matrix.php-versions }}
+                  command: update
 
-      - name: Validate Composer
-        run: composer validate --strict
+            - name: Validate Composer
+              run: composer validate --strict
 
-      - name: PHP Lint
-        run: composer lint
+            - name: PHP Lint
+              run: composer lint
 
-      - name: PHP test
-        run: composer test:unit
+            - name: PHP test
+              run: composer test:unit

.gitignore

@@ -1,9 +1,15 @@
 node_modules
-build
 vendor
 yarn-error.log
 .phpunit.result.cache
 .DS_Store
 testingdb
 .vscode
-.env
+.env
+.auth/
+artifacts/
+tests-examples/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.wp-env.json

@@ -0,0 +1,4 @@
+{
+	"core": null,
+	"plugins": ["."]
+}

build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '385a3bc35227dd8c6db4');

build/settings.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices'), 'version' => 'ea1e4914b928d6c2fdee');

jest.config.js

@@ -5,4 +5,5 @@ module.exports = {
 	},
 	modulePathIgnorePatterns: ['<rootDir>/vendor/'],
 	testEnvironment: 'jsdom',
+	testPathIgnorePatterns: ['<rootDir>/tests/e2e/'],
 };

package.json

@@ -1,46 +1,54 @@
 {
-  "name": "mr-feature-flags",
-  "version": "1.0.0",
-  "description": "Allows developers to enable / disable features based on flags.",
-  "scripts": {
-    "start": "wp-scripts start",
-    "build": "wp-scripts build",
-    "lint:js": "wp-scripts lint-js",
-    "test:js": "wp-scripts test-unit-js",
-    "test:watch": "wp-scripts test-unit-js --watch",
-    "prepare": "husky install"
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.2.1",
-    "@testing-library/react": "14.1.2",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.11.5",
-    "@types/react-syntax-highlighter": "^15.5.11",
-    "@types/wordpress__components": "^23.0.11",
-    "@wordpress/eslint-plugin": "^17.6.0",
-    "@wordpress/scripts": "^27.0.0",
-    "eslint": "^8.56.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-import": "^2.29.1",
-    "husky": "^8.0.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.2.4"
-  },
-  "keywords": [],
-  "author": "Mohan Raj <https://mohanraj.dev>",
-  "license": "ISC",
-  "dependencies": {
-    "@wordpress/api-fetch": "^6.46.0",
-    "@wordpress/components": "^25.15.0",
-    "@wordpress/data": "^9.19.0",
-    "@wordpress/i18n": "^4.49.0",
-    "@wordpress/notices": "^4.17.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-syntax-highlighter": "^15.5.0",
-    "react-test-renderer": "^18.2.0",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3"
-  }
+	"name": "mr-feature-flags",
+	"version": "1.0.0",
+	"description": "Allows developers to enable / disable features based on flags.",
+	"scripts": {
+		"start": "wp-scripts start",
+		"build": "wp-scripts build",
+		"lint:js": "wp-scripts lint-js",
+		"test:js": "wp-scripts test-unit-js",
+		"test:watch": "wp-scripts test-unit-js --watch",
+		"prepare": "husky install",
+		"wp-env": "wp-env start",
+		"test:e2e": "npx playwright test --reporter=list"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.41.2",
+		"@testing-library/jest-dom": "^6.4.2",
+		"@testing-library/react": "14.2.1",
+		"@types/jest": "^29.5.12",
+		"@types/node": "^20.11.17",
+		"@types/react-syntax-highlighter": "^15.5.11",
+		"@types/wordpress__components": "^23.0.11",
+		"@wordpress/e2e-test-utils-playwright": "^0.19.0",
+		"@wordpress/env": "^9.3.0",
+		"@wordpress/eslint-plugin": "^17.8.0",
+		"@wordpress/scripts": "^27.2.0",
+		"eslint": "^8.56.0",
+		"eslint-import-resolver-alias": "^1.1.2",
+		"eslint-plugin-cypress": "^2.15.1",
+		"eslint-plugin-import": "^2.29.1",
+		"husky": "^9.0.11",
+		"jest-environment-jsdom": "^29.7.0",
+		"prettier": "^3.2.5"
+	},
+	"keywords": [],
+	"author": "Mohan Raj <https://mohanraj.dev>",
+	"license": "ISC",
+	"dependencies": {
+		"@wordpress/api-fetch": "^6.48.0",
+		"@wordpress/components": "^26.0.1",
+		"@wordpress/data": "^9.21.0",
+		"@wordpress/dom-ready": "^3.51.0",
+		"@wordpress/hooks": "^3.51.0",
+		"@wordpress/i18n": "^4.51.0",
+		"@wordpress/notices": "^4.19.0",
+		"dotenv": "^16.4.4",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-syntax-highlighter": "^15.5.0",
+		"react-test-renderer": "^18.2.0",
+		"ts-loader": "^9.5.1",
+		"typescript": "^5.3.3"
+	}
 }

playwright.config.ts

@@ -0,0 +1,81 @@
+import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: 'tests/e2e',
+	globalSetup: 'tests/e2e/global-setup.ts',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: 'html',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: process.env.WP_BASE_URL,
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices['Desktop Chrome'] },
+		},
+
+		// {
+		// 	name: 'firefox',
+		// 	use: { ...devices['Desktop Firefox'] },
+		// },
+
+		// {
+		// 	name: 'webkit',
+		// 	use: { ...devices['Desktop Safari'] },
+		// },
+
+		/* Test against mobile viewports. */
+		// {
+		//   name: 'Mobile Chrome',
+		//   use: { ...devices['Pixel 5'] },
+		// },
+		// {
+		//   name: 'Mobile Safari',
+		//   use: { ...devices['iPhone 12'] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	// webServer: {
+	//   command: 'npm run start',
+	//   url: 'http://127.0.0.1:3000',
+	//   reuseExistingServer: !process.env.CI,
+	// },
+});