skills.rest
amol-anand
amol-anandCOMMUNITY
Explore all skills by this author →
GitHub

Testing Blocks

Automate unit, browser, lint, and performance tests for AEM Edge Delivery Blocks.

Updated Apr 14, 2025
Search Tags:#automation#vitest#testing#linting#performance#qa#playwright#aem
One-click install
npx skills add https://github.com/amol-anand/demo --skill testing-blocks-amol-anand
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Testing Blocks
Source: https://github.com/amol-anand/demo/tree/main/.claude/skills/testing-blocks
Command: npx skills add https://github.com/amol-anand/demo --skill testing-blocks-amol-anand

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Manual testing is slow, error-prone, and often leads to regressions and delayed releases in AEM projects. This Skill provides a comprehensive, automated testing framework to ensure code quality and functionality.

Core Features & Use Cases

  • Unit Testing: Guides the creation of "keeper" tests for logic-heavy utilities, data processing, and API integrations.
  • Browser Validation: Facilitates "throwaway" browser tests for block decoration, visual appearance, and responsive design, including screenshot capture.
  • Automated Quality Checks: Enforces linting and integrates with GitHub checks for performance validation, ensuring PR readiness.
  • Use Case: After modifying a "hero" block, this skill ensures all unit tests pass, browser tests validate visual and functional changes across devices, and linting is clean, guaranteeing a high-quality, performant update before it's merged.

Quick Start

Initiate the testing process for the 'cards' block, ensuring all variants are covered.

Frequently Asked Questions about Testing Blocks

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

FAQPage Schema
How do I automate testing for AEM blocks to catch regressions before merging?▼

Automate testing for AEM blocks by running unit tests with Vitest, browser validation with Playwright, linting checks, and performance validations in CI. This catches functionality, visual, and code-quality regressions before PR merge, ensuring high-quality updates across all block variants.

Can I use Vitest and Playwright together for AEM block testing?▼

Yes. Vitest handles unit tests for logic-heavy utilities and APIs, while Playwright performs browser validation for block decoration, visual appearance, and responsive design. Running both in CI ensures comprehensive coverage—logic correctness plus real-world rendering—before deployment.

What's the difference between keeper tests and throwaway tests in block validation?▼

Keeper tests are unit tests for logic-heavy utilities, data processing, and API integrations—permanent fixtures in your suite. Throwaway tests are browser-based checks for block decoration and visual appearance, often screenshot-based, validating responsive design without staying in the codebase permanently.

How do I ensure linting and performance validation run automatically in my AEM CI workflow?▼

Execute npm run lint as a CI step and integrate performance validations into GitHub checks. This enforces code-quality standards and flags performance regressions automatically, guaranteeing PR readiness without manual intervention or delayed reviews.

Do I need to write tests for every AEM block change, or just critical paths?▼

Create keeper tests for logic-heavy components, data processing, and API integrations. Use browser tests for visual and responsive design validation after block modifications. This focuses testing effort on high-risk changes while maintaining coverage across unit, browser, and code-quality dimensions.

Related Skills

Explore More Software Engineering Skills→
Jason-Clark-FGJason-Clark-FG

playwright-validation

Validate UI changes on feature branches with Playwright end-to-end tests.

Community
Intermediate
constellizeconstellize
1

track-quality-metrics

Track software quality metrics across code, performance, and business impact.

Official
Advanced
PlazaCCPlazaCC
2

vitest

Run unit and integration tests in Vite projects with Jest-compatible APIs.

Official
Intermediate
ofelixdevofelixdev

lint-and-validate

Automate linting and static analysis for Node.js and Python projects.

Community
Intermediate