Fix code quality issues and GitHub Actions workflows

.eslintrc.json

@@ -14,6 +14,7 @@
     "describe": "readonly",
     "it": "readonly",
     "before": "readonly",
+    "beforeEach": "readonly",
     "module": "readonly"
   },
   "parserOptions": {

.github/workflows/playground-tests-fix.yml

@@ -2,12 +2,15 @@ name: WordPress Playground Tests Fix
 
 on:
   push:
-    branches: [ main, feature/*, bugfix/* ]
+    branches: [ main ]
   pull_request:
     branches: [ main ]
 
+permissions:
+  contents: read
+
 concurrency:
-  group: playground-tests-${{ github.ref }}
+  group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
@@ -31,10 +34,7 @@ jobs:
       run: npm install --save-dev @wp-playground/cli
 
     - name: Create plugin zip
-      run: |
-        mkdir -p dist
-        zip -r dist/plugin.zip . \
-          -x "node_modules/**" "dist/**" ".git/**" ".github/**" ".wiki/**"
+      uses: ./.github/actions/create-plugin-zip
 
     - name: Run tests with WordPress Playground
       run: |

.github/workflows/playground-tests.yml

@@ -6,6 +6,9 @@ on:
   pull_request:
     branches: [ main ]
 
+permissions:
+  contents: read
+
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
@@ -111,15 +114,15 @@ jobs:
     - name: Run tests with WordPress Playground
       run: |
         # Set base URL for Cypress
-        export CYPRESS_BASE_URL=http://localhost:80
+        export CYPRESS_BASE_URL=http://localhost:8889
 
         # Start WordPress Playground with our blueprint
-        # Use port 80 for multisite to avoid port configuration issues with WP Playground CLI
-        npx @wp-playground/cli server --blueprint playground/multisite-blueprint.json --port 80 --login &
+        # Use a different port for multisite to avoid conflicts with single site tests
+        npx @wp-playground/cli server --blueprint playground/multisite-blueprint.json --port 8889 --login &
 
         # Wait for WordPress Playground to be ready
         echo "Waiting for WordPress Playground to be ready..."
-        timeout 60 bash -c 'until curl -s http://localhost:80; do sleep 2; done'
+        timeout 60 bash -c 'until curl -s http://localhost:8889; do sleep 2; done'
 
         # Run Cypress tests against WordPress Playground
         npx cypress run --spec "cypress/e2e/playground-multisite.cy.js"

.github/workflows/wordpress-tests.yml

@@ -2,10 +2,17 @@ name: WordPress Tests
 
 on:
   push:
-    branches: [ main, feature/*, bugfix/* ]
+    branches: [ main ]
   pull_request:
     branches: [ main ]
 
+permissions:
+  contents: read
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   code-quality:
     name: Code Quality Check
@@ -61,21 +68,28 @@ jobs:
       run: npm ci
 
     - name: Install WordPress Playground CLI
-      run: npm install -g @wordpress/playground-tools
+      run: npm install --save-dev @wp-playground/cli
 
     - name: Create plugin zip
-      run: |
-        mkdir -p dist
-        zip -r dist/plugin.zip . -x "node_modules/*" "dist/*" ".git/*"
+      uses: ./.github/actions/create-plugin-zip
 
     - name: Run tests with WordPress Playground
       run: |
         # Start WordPress Playground with our blueprint
-        wp-playground start --blueprint playground/blueprint.json --port 8888 &
+        npx @wp-playground/cli server --blueprint playground/blueprint.json --port 8888 --login &
 
         # Wait for WordPress Playground to be ready
         echo "Waiting for WordPress Playground to be ready..."
         timeout 60 bash -c 'until curl -s http://localhost:8888; do sleep 2; done'
 
         # Run tests against WordPress Playground
-        npm run test:playground:single
+        npx cypress run --spec "cypress/e2e/playground-single-site.cy.js"
+
+    - name: Upload Cypress artifacts
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: cypress-results
+        path: |
+          cypress/videos
+          cypress/screenshots

.wiki/Testing.md

@@ -2,14 +2,26 @@
 
 This document explains how to use the testing framework for our plugin.
 
+## Table of Contents
+
+* [Overview](#overview)
+* [Prerequisites](#prerequisites)
+* [Testing Approaches](#testing-approaches)
+  * [wp-env Approach](#1-wp-env-approach)
+  * [WordPress Playground Approach](#2-wordpress-playground-approach)
+* [Writing Tests](#writing-tests)
+* [CI/CD Integration](#cicd-integration)
+* [Troubleshooting](#troubleshooting)
+* [Future Improvements](#future-improvements)
+
 ## Overview
 
 Our testing framework uses:
 
 See also:
 
-* [.wiki/Architecture-Overview.md](Architecture-Overview.md) – high-level design
-* [.wiki/Multisite-Development.md](Multisite-Development.md) – deeper multisite guidance
+* [Architecture Overview](Architecture-Overview.md) – high-level design
+* [Multisite Development](Multisite-Development.md) – deeper multisite guidance
 
 Components:
 
@@ -199,3 +211,4 @@ We have GitHub Actions workflows for running tests in CI/CD:
 1. **PHPUnit tests**: Add unit tests for PHP code
 2. **Performance tests**: Add performance testing
 3. **Accessibility tests**: Add accessibility testing
+

cypress/e2e/playground-multisite.cy.js

@@ -8,6 +8,8 @@ describe('WordPress Playground Multisite Tests', () => {
   it('Can access the site', () => {
     // Check if the page loaded
     cy.get('body').should('exist');
+    cy.get('h1').should('exist');
+    cy.title().should('include', 'WordPress');
   });
 
   it('Can access the network admin area', () => {
@@ -19,6 +21,8 @@ describe('WordPress Playground Multisite Tests', () => {
 
     // Check if we're logged in to the network admin
     cy.get('#wpadminbar').should('exist');
+    cy.get('#wpbody-content').should('exist');
+    cy.title().should('include', 'Network Admin');
   });
 
   it('Plugin is network activated', () => {

cypress/e2e/playground-single-site.cy.js

@@ -40,5 +40,6 @@ describe('WordPress Playground Single Site Tests', () => {
     // Check if the settings page exists
     cy.get('#wpbody-content').should('exist');
     cy.get('h1').should('be.visible');
+    cy.title().should('include', 'Settings');
   });
 });

includes/Multisite/README.md

@@ -21,4 +21,4 @@ if ( is_multisite() ) {
 
 ## Testing
 
-For information on testing your plugin in a multisite environment, see the [Testing Framework](../../.wiki/Testing-Framework.md) documentation.
+For information on testing your plugin in a multisite environment, see the [Testing Framework](../../.wiki/Testing.md) documentation.

package.json

@@ -15,8 +15,8 @@
     "test:multisite:headless": "cypress run --config specPattern=cypress/e2e/multisite.cy.js",
     "test:e2e:single": "npm run setup:single && sleep 5 && npm run test:single:headless",
     "test:e2e:multisite": "npm run setup:multisite && sleep 5 && npm run test:multisite:headless",
-    "test:playground:single": "cypress run --config specPattern=cypress/e2e/single-site.cy.js",
-    "test:playground:multisite": "cypress run --config specPattern=cypress/e2e/multisite.cy.js",
+    "test:playground:single": "cypress run --spec cypress/e2e/playground-single-site.cy.js",
+    "test:playground:multisite": "cypress run --spec cypress/e2e/playground-multisite.cy.js",
     "build": "./build.sh",
     "lint:php": "composer run-script phpcs",
     "lint:php:simple": "composer run-script phpcs:simple",
@@ -50,6 +50,7 @@
     "@wordpress/env": "^8.12.0",
     "@wp-playground/blueprints": "^1.0.28",
     "@wp-playground/client": "^1.0.28",
+    "@wp-playground/cli": "^1.0.28",
     "cypress": "^13.17.0"
   }
 }

playground/test.html

@@ -17,6 +17,7 @@
             height: 100%;
             border: none;
         }
+
         .buttons {
             position: fixed;
             top: 10px;
@@ -32,6 +33,7 @@
             border-radius: 4px;
             cursor: pointer;
         }
+
         button:hover {
             background-color: #005177;
         }