Test Suite Overview

The plugin has two test suites — one for JavaScript and one for PHP. They only test pure logic functions: no browser, no WordPress install, no database required.

How to Run

# Run all JS tests (single pass)
npm run test:js

# Run JS tests in watch mode (re-runs on file save)
npm run test:js:watch

# Run all PHP tests
vendor/bin/phpunit

Structure

tests/
├── js/
│   └── unit/
│       ├── page-builder/
│       │   ├── columnLayouts.test.js       # Column layout config lookup
│       │   ├── findWidgetById.test.js      # Widget search across nested layout
│       │   └── pageBuilderStore.test.js    # Factory function shape (schema guard)
│       ├── shared/
│       │   └── buildAppearanceStyle.test.js # Responsive field fallback + visibility
│       └── template-builder/
│           ├── buildNodeStyles.test.js     # CSS generation from node tree
│           └── nodeTypes.test.js           # Node default field shapes
└── php/
    ├── bootstrap.php                        # Defines constants, loads classes (no WP)
    └── unit/
        ├── BlueprintsApplierTest.php        # Blueprint template-ref resolution
        └── TemplateCompilerTest.php         # CSS compilation, sanitization, fonts

Tools

Suite Tool Notes
JavaScript Vitest Configured in vite.config.js
PHP PHPUnit + Brain\Monkey Brain\Monkey stubs WP functions per-test

PHP bootstrap — no WordPress needed

The PHP bootstrap (tests/php/bootstrap.php) does three things so the plugin classes load in isolation:

  • Defines ABSPATH to satisfy the if (! defined('ABSPATH')) exit; guard in every plugin file.
  • Defines the SANILWB_BP_* breakpoint constants (these are normally set in the main plugin file).
  • Loads vendor/autoload.php (PHPUnit + Brain\Monkey + Mockery) and the two classes under test.

Brain\Monkey is not initialised in the bootstrap. Each test class calls Monkey\setUp() in setUp() and Monkey\tearDown() in tearDown() so WP function stubs are always isolated between test classes.

What Is and Isn't Tested

These tests cover pure logic only — functions that take inputs and return outputs with no side effects.

They do not test:

  • React component rendering or UI interactions
  • WordPress database reads/writes
  • AJAX handlers
  • File system operations (font downloads, compiled CSS files)
  • Frontend shortcode output

For those areas, manual testing is the primary verification method.

Test Pages

File What it tests
JS: columnLayouts Layout config lookup by ID
JS: findWidgetById Widget search including nested rows
JS: pageBuilderStore Factory function shapes (schema contract)
JS: buildAppearanceStyle Responsive value fallback and visibility flags
JS: buildNodeStyles CSS string generation from the node tree
JS: nodeTypes Default field shapes for each node type
PHP: BlueprintsApplier Blueprint template-ref-to-db-id resolution
PHP: TemplateCompiler CSS sanitization, border declarations, breakpoints, font collection