Testing Blocks

Guide testing of AEM Edge Delivery blocks with unit and browser tests.

Updated Sep 18, 2025
One-click install
npx skills add https://github.com/pragyaP17/universal-editor --skill testing-blocks-pragyap17
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Testing Blocks
Source: https://github.com/pragyaP17/universal-editor/tree/main/.claude/skills/testing-blocks
Command: npx skills add https://github.com/pragyaP17/universal-editor --skill testing-blocks-pragyap17

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, vitest, jsdom, @vitest/ui, @vitest/coverage-v8, and includes references (resource) components.

What problem does it solve?

Ensuring the quality and stability of code changes in AEM Edge Delivery projects, especially for blocks and core functionality, requires a robust testing strategy. This skill guides comprehensive validation, balancing value and cost.

Core Features & Use Cases

  • Unit Testing Guidance: Provides best practices for writing "keeper" unit tests for logic-heavy utilities and data processing.
  • Browser Testing Workflow: Guides the use of Playwright for "throwaway" browser tests to validate block decoration, visual appearance, and responsive behavior.
  • Linting & Performance Checks: Ensures code quality with linting and integrates with GitHub checks for automated performance validation.
  • Troubleshooting: Offers solutions for common testing failures, linting issues, and CI/CD check failures.

Quick Start

Use the 'Testing Blocks' skill to validate the new 'Hero' block, including running unit tests, capturing browser screenshots for responsive design, and ensuring linting passes.

Frequently Asked Questions about Testing Blocks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test code changes in AEM Edge Delivery projects before opening a PR?

Testing blocks in AEM Edge Delivery requires running unit tests for utilities, browser tests with Playwright to validate block decoration and responsiveness, linting checks, and performance validation. This comprehensive approach ensures code quality and stability before review.

What's the difference between keeper and throwaway tests when validating blocks?

Keeper tests are maintainable unit tests for logic-heavy utilities and data processing that provide lasting value. Throwaway browser tests with Playwright validate block appearance and responsive design without being part of the permanent test suite.

Can I use Playwright for browser testing in AEM Edge Delivery workflows?

Yes, Playwright is the recommended tool for browser testing in AEM Edge Delivery projects. It validates block decoration, visual appearance, and responsive behavior as part of the pre-PR testing strategy.

What tools and dependencies do I need to test AEM Edge Delivery blocks?

Testing blocks requires Vitest for unit testing, Playwright for browser automation, jsdom for DOM simulation, and coverage tools like @vitest/coverage-v8. The Testing Blocks guide specifies required workflows, file organization, and verification steps.

How do linting and performance checks integrate into the testing workflow?

Linting ensures code quality standards are met, while performance validation integrates with GitHub checks for automated verification. Both are part of the comprehensive testing strategy before submitting changes for review.

What should I do if my tests fail or linting checks don't pass?

The Testing Blocks guide offers troubleshooting solutions for common testing failures, linting issues, and CI/CD check failures. Review the specific error, validate your test implementation against best practices, and ensure file organization matches required structures.