From fb0949df0adad807ac7301e356625d1323380c55 Mon Sep 17 00:00:00 2001
From: marcusquinn <6428977+marcusquinn@users.noreply.github.com>
Date: Mon, 21 Apr 2025 22:42:13 +0100
Subject: [PATCH] Add Cypress tests for WordPress Playground

---
 cypress.config.js                        |  5 +-
 cypress/e2e/playground-multisite.cy.js   | 58 ++++++++++++++++++++++++
 cypress/e2e/playground-single-site.cy.js | 54 ++++++++++++++++++++++
 package.json                             |  6 ++-
 4 files changed, 120 insertions(+), 3 deletions(-)
 create mode 100644 cypress/e2e/playground-multisite.cy.js
 create mode 100644 cypress/e2e/playground-single-site.cy.js

diff --git a/cypress.config.js b/cypress.config.js
index 720a716..2d97bc4 100644
--- a/cypress.config.js
+++ b/cypress.config.js
@@ -8,6 +8,9 @@ module.exports = defineConfig({
     setupNodeEvents() {
       // This function can be used to register custom Cypress plugins or event listeners.
       // Currently not in use, but left for future extensibility.
-    }
+    },
+    // Add configuration for WordPress Playground
+    experimentalWebKitSupport: true,
+    chromeWebSecurity: false
   }
 });
diff --git a/cypress/e2e/playground-multisite.cy.js b/cypress/e2e/playground-multisite.cy.js
new file mode 100644
index 0000000..b9b18bd
--- /dev/null
+++ b/cypress/e2e/playground-multisite.cy.js
@@ -0,0 +1,58 @@
+describe('WordPress Playground Multisite Tests', () => {
+  beforeEach(() => {
+    // Visit the WordPress Playground page
+    cy.visit('/multisite.html');
+    
+    // Wait for the iframe to load
+    cy.get('iframe').should('be.visible');
+  });
+
+  it('Can access the site', () => {
+    // Switch to the iframe context
+    cy.get('iframe').then($iframe => {
+      const $body = $iframe.contents().find('body');
+      cy.wrap($body).should('exist');
+    });
+  });
+
+  it('Can access the network admin area', () => {
+    // WordPress Playground should auto-login as admin
+    cy.get('iframe').then($iframe => {
+      const $body = $iframe.contents().find('body');
+      cy.wrap($body).find('#wpadminbar').should('exist');
+    });
+  });
+
+  it('Plugin is network activated', () => {
+    // WordPress Playground should auto-activate the plugin
+    cy.get('iframe').then($iframe => {
+      // Navigate to network plugins page
+      const $document = $iframe.contents();
+      const $body = $document.find('body');
+      
+      // Click on Network Admin in the admin bar
+      cy.wrap($body).find('#wpadminbar #wp-admin-bar-network-admin a').click();
+      
+      // Click on Plugins in the network admin menu
+      cy.wrap($body).find('#menu-plugins a[href*="plugins.php"]').first().click();
+      
+      // Check if the plugin is network active
+      cy.wrap($body).find('tr[data-slug="wp-plugin-starter-template-for-ai-coding"]').should('exist');
+      cy.wrap($body).find('tr[data-slug="wp-plugin-starter-template-for-ai-coding"] .network_active').should('exist');
+    });
+  });
+
+  it('Network settings page loads correctly', () => {
+    cy.get('iframe').then($iframe => {
+      const $document = $iframe.contents();
+      const $body = $document.find('body');
+      
+      // Navigate to the network settings page
+      cy.wrap($body).find('#wpadminbar #wp-admin-bar-network-admin a').click();
+      cy.wrap($body).find('#menu-settings a[href*="settings.php"]').first().click();
+      
+      // Check if the network settings page loaded correctly
+      cy.wrap($body).find('h1').should('contain', 'Network Settings');
+    });
+  });
+});
diff --git a/cypress/e2e/playground-single-site.cy.js b/cypress/e2e/playground-single-site.cy.js
new file mode 100644
index 0000000..832f077
--- /dev/null
+++ b/cypress/e2e/playground-single-site.cy.js
@@ -0,0 +1,54 @@
+describe('WordPress Playground Single Site Tests', () => {
+  beforeEach(() => {
+    // Visit the WordPress Playground page
+    cy.visit('/index.html');
+    
+    // Wait for the iframe to load
+    cy.get('iframe').should('be.visible');
+  });
+
+  it('Can access the site', () => {
+    // Switch to the iframe context
+    cy.get('iframe').then($iframe => {
+      const $body = $iframe.contents().find('body');
+      cy.wrap($body).should('exist');
+    });
+  });
+
+  it('Can access the admin area', () => {
+    // WordPress Playground should auto-login as admin
+    cy.get('iframe').then($iframe => {
+      const $body = $iframe.contents().find('body');
+      cy.wrap($body).find('#wpadminbar').should('exist');
+    });
+  });
+
+  it('Plugin is activated', () => {
+    // WordPress Playground should auto-activate the plugin
+    cy.get('iframe').then($iframe => {
+      // Navigate to plugins page
+      const $document = $iframe.contents();
+      const $body = $document.find('body');
+      
+      // Click on Plugins in the admin menu
+      cy.wrap($body).find('#menu-plugins a[href*="plugins.php"]').first().click();
+      
+      // Check if the plugin is active
+      cy.wrap($body).find('tr[data-slug="wp-plugin-starter-template-for-ai-coding"]').should('exist');
+    });
+  });
+
+  it('Plugin settings page loads correctly', () => {
+    cy.get('iframe').then($iframe => {
+      const $document = $iframe.contents();
+      const $body = $document.find('body');
+      
+      // Navigate to the plugin settings page
+      cy.wrap($body).find('#menu-settings a[href*="options-general.php"]').first().click();
+      cy.wrap($body).find('a[href*="options-general.php?page=wp-plugin-starter-template"]').click();
+      
+      // Check if the settings page loaded correctly
+      cy.wrap($body).find('h1').should('contain', 'WP Plugin Starter Template');
+    });
+  });
+});
diff --git a/package.json b/package.json
index d8ab102..0838c16 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,8 @@
     "test:multisite:headless": "cypress run --config specPattern=cypress/e2e/multisite.cy.js",
     "setup:playground:single": "bash bin/setup-test-env.sh playground-single",
     "setup:playground:multisite": "bash bin/setup-test-env.sh playground-multisite",
-    "test:playground:single": "npm run setup:playground:single && sleep 10 && npm run test:single:headless",
-    "test:playground:multisite": "npm run setup:playground:multisite && sleep 10 && npm run test:multisite:headless",
+    "test:playground:single": "npm run setup:playground:single && sleep 10 && cypress run --config specPattern=cypress/e2e/playground-single-site.cy.js",
+    "test:playground:multisite": "npm run setup:playground:multisite && sleep 10 && cypress run --config specPattern=cypress/e2e/playground-multisite.cy.js",
     "build": "./build.sh",
     "lint:php": "composer run-script phpcs",
     "lint:php:simple": "composer run-script phpcs:simple",
@@ -48,6 +48,8 @@
   "homepage": "https://github.com/wpallstars/wp-plugin-starter-template-for-ai-coding#readme",
   "devDependencies": {
     "@wordpress/env": "^8.12.0",
+    "@wp-playground/blueprints": "^1.0.28",
+    "@wp-playground/client": "^1.0.28",
     "cypress": "^13.6.4"
   }
 }