Updates to test documentation with accessible Mermaid diagrams

Author: ashleyshaw

tests/README.md

@@ -53,11 +53,13 @@ tests/
 PHP unit tests for theme functions and classes.
 
 **Run:**
+
 ```bash
 npm run test:php
 ```
 
 **Files:**
+
 - `test-theme-setup.php`
 - `test-block-patterns.php`
 - `test-block-styles.php`
@@ -68,12 +70,14 @@ npm run test:php
 JavaScript unit tests for theme scripts.
 
 **Run:**
+
 ```bash
 npm run test:js
 npm run test:js:watch  # Watch mode
 ```
 
 **Files:**
+
 - `tests/js/*.test.js`
 - `tests/bin/*.test.js`
 
@@ -82,11 +86,13 @@ npm run test:js:watch  # Watch mode
 End-to-end browser tests.
 
 **Run:**
+
 ```bash
 npm run test:e2e
 ```
 
 **Files:**
+
 - `tests/e2e/*.spec.js`
 
 ## Test Flow

tests/bin/README.md

@@ -28,6 +28,7 @@ flowchart LR
 Tests for the build orchestration script.
 
 **What it tests:**
+
 - Build initialization
 - Asset compilation
 - Distribution package creation
@@ -38,6 +39,7 @@ Tests for the build orchestration script.
 Tests for the theme generation script.
 
 **What it tests:**
+
 - Theme scaffold creation
 - Placeholder replacement
 - File copying

tests/e2e/README.md

@@ -36,6 +36,7 @@ flowchart TB
 End-to-end tests for theme functionality.
 
 **Tests:**
+
 - Page loading and rendering
 - Navigation functionality
 - Block interactions
@@ -46,6 +47,7 @@ End-to-end tests for theme functionality.
 Example test demonstrating Playwright patterns.
 
 **Demonstrates:**
+
 - Page navigation
 - Element selection
 - User interactions
@@ -91,16 +93,16 @@ test('homepage loads correctly', async ({ page }) => {
 ```javascript
 test('navigation menu works', async ({ page }) => {
     await page.goto('/');
-    
+
     // Click menu button
     await page.click('.menu-toggle');
-    
+
     // Verify menu is visible
     await expect(page.locator('.nav-menu')).toBeVisible();
-    
+
     // Click menu item
     await page.click('a[href="/about"]');
-    
+
     // Verify navigation
     await expect(page).toHaveURL(/\/about/);
 });
@@ -111,11 +113,11 @@ test('navigation menu works', async ({ page }) => {
 ```javascript
 test('search form works', async ({ page }) => {
     await page.goto('/');
-    
+
     // Fill search form
     await page.fill('[name="s"]', 'test query');
     await page.click('[type="submit"]');
-    
+
     // Verify results page
     await expect(page).toHaveURL(/\?s=test\+query/);
     await expect(page.locator('.search-results')).toBeVisible();
@@ -127,10 +129,10 @@ test('search form works', async ({ page }) => {
 ```javascript
 test('visual regression', async ({ page }) => {
     await page.goto('/');
-    
+
     // Take screenshot
     await page.screenshot({ path: 'screenshots/homepage.png' });
-    
+
     // Screenshot specific element
     const header = page.locator('header');
     await header.screenshot({ path: 'screenshots/header.png' });

tests/js/README.md

@@ -28,6 +28,7 @@ flowchart LR
 Tests for frontend theme JavaScript.
 
 **Coverage:**
+
 - DOM manipulation
 - Event handlers
 - Utility functions
@@ -38,6 +39,7 @@ Tests for frontend theme JavaScript.
 Example test file demonstrating testing patterns.
 
 **Demonstrates:**
+
 - Jest syntax
 - Test structure
 - Assertions