skills.rest
ddttom
ddttomCOMMUNITY
Explore all skills by this author →
GitHub

Testing Blocks

Validate AEM Edge Delivery code changes with unit, browser, lint, and performance tests.

7|2|Updated Jun 11, 2025
Search Tags:#unit tests#testing#linting#CI/CD#AEM#browser tests#Edge Delivery
One-click install
npx skills add https://github.com/ddttom/webcomponents-with-eds --skill testing-blocks-ddttom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Testing Blocks
Source: https://github.com/ddttom/webcomponents-with-eds/tree/main/.claude/skills/testing-blocks
Command: npx skills add https://github.com/ddttom/webcomponents-with-eds --skill testing-blocks-ddttom

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This skill streamlines the complex and often error-prone process of testing code changes in AEM Edge Delivery Services projects. It provides a structured approach to ensure code quality, prevent regressions, and validate functionality before deployment, saving developers time and reducing manual effort.

Core Features & Use Cases

  • Comprehensive Testing Guidance: Covers unit testing for logic, browser testing for UI, linting for code quality, and performance validation.
  • Workflow Integration: Guides you through testing from development to pull request, ensuring all necessary checks are performed.
  • Use Case: After implementing a new block or modifying core scripts, use this skill to automatically generate a testing checklist, execute unit tests, guide browser validation, and ensure all linting and performance checks pass, guaranteeing your changes are production-ready.

Quick Start

Use the Testing Blocks skill to guide me through testing my recent code changes for the 'hero' block.

Frequently Asked Questions about Testing Blocks

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

FAQPage Schema
How do I set up unit testing and browser testing for AEM Edge Delivery blocks?▼

Unit testing and browser testing for AEM Edge Delivery blocks uses Vitest for logic validation and Playwright for DOM verification. Set up both frameworks in your project, configure jsdom for browser simulation, and structure keeper tests for utilities and throwaway tests for UI components. This ensures blocks validate before pull requests.

What's the best way to validate code changes before merging to production?▼

Validate code changes by running unit tests with Vitest, executing browser tests with Playwright, applying linting checks, and verifying performance metrics. This comprehensive approach catches regressions and ensures functionality for blocks, scripts, styles, and configuration modifications in Edge Delivery projects.

Can I automate testing checks in my CI/CD pipeline for AEM projects?▼

Yes. Testing Blocks integrates with CI/CD workflows by automating unit tests, browser tests, linting, and performance validation. Configure Vitest and Playwright to run on pull requests, ensuring all code quality gates pass automatically before deployment to production.

How do I decide which tests to keep versus which are throwaway?▼

Keeper tests validate logic-heavy utilities and core functionality that must remain stable. Throwaway tests verify DOM rendering and UI behavior for specific implementations. This skill guides you on test classification, balancing maintainability with coverage for blocks and scripts.

Does this testing approach work with Edge Delivery Services performance requirements?▼

Yes. Testing Blocks covers performance validation alongside unit, browser, and linting checks specifically for AEM Edge Delivery projects. This ensures code changes meet performance standards and functionality requirements before shipping.

What coverage metrics can I track with Vitest for my block testing?▼

Vitest with the coverage plugin tracks code coverage across unit tests for blocks and scripts. Coverage reports identify untested code paths, helping you maintain quality standards and catch regressions before pull requests.

Related Skills

Explore More Software Engineering Skills→
valithedgevalithedge

testing-blocks

Automate linting, unit tests, and Playwright browser validation for AEM Edge Delivery code changes.

Community
Advanced
v1bh0rv1bh0r

nw-production-readiness

Implement production readiness controls for monitoring, runbooks, and quality gates.

Community
Advanced
ProfPowellProfPowell
4

e2e-testing

Run end-to-end browser tests with Playwright for user flows and visual regression.

Community
Advanced
ripgraphicsripgraphics

vitest-testing-expert

Configure and optimize Vitest for Vite-integrated applications.

Community
Advanced