skills.rest
shsteimer
shsteimerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Testing Blocks

Guide testing for AEM Edge Delivery code changes before pull requests.

Updated Feb 15, 2024
Search Tags:#unit tests#testing#linting#performance#CI/CD#Playwright#AEM#browser tests
One-click install
npx skills add https://github.com/shsteimer/shsteimer-com --skill testing-blocks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Testing Blocks
Source: https://github.com/shsteimer/shsteimer-com/tree/main/.claude/skills/testing-blocks
Command: npx skills add https://github.com/shsteimer/shsteimer-com --skill testing-blocks

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Ensuring code quality and preventing regressions in AEM Edge Delivery projects can be complex and time-consuming. This skill provides a comprehensive, pragmatic testing framework, guiding developers through unit, browser, and performance testing to deliver high-quality code efficiently.

Core Features & Use Cases

  • Pragmatic Testing Workflow: Guides through a "value vs. cost" testing philosophy, distinguishing between "keeper" unit tests for critical logic and "throwaway" browser tests for UI validation.
  • Automated Quality Checks: Integrates linting, unit testing (Vitest), and automated performance validation (via GitHub checks) into the development lifecycle.
  • Browser Testing Guidance: Provides detailed instructions for using Playwright/Puppeteer for visual and functional UI validation, including screenshot capture.
  • Use Case: After implementing a new AEM block, this skill ensures you've covered all bases: unit tests for helper functions, browser tests for visual and interactive behavior, linting for code style, and performance checks for site speed, all before submitting a pull request.

Quick Start

Example: Run all unit tests

npm test

Example: Run linting and auto-fix issues

npm run lint:fix

Example: Run a throwaway browser test (requires Playwright setup)

First, ensure dev server is running: aem up --html-folder drafts

Then, execute your temporary Playwright script:

node test/tmp/test-my-block.js

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 for AEM Edge Delivery blocks?▼

Unit testing in AEM Edge Delivery uses Vitest to validate helper functions and logic. Install Vitest and jsdom, write tests in your test directory, and run `npm test` to execute them. Keep these tests as permanent fixtures to catch regressions in critical code paths.

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

Keeper tests validate core logic and utilities—permanent, maintainable unit tests run in CI. Throwaway tests use Playwright for one-time visual and interaction validation of DOM changes, stored temporarily in test/tmp, then discarded after confirming UI behavior before pull requests.

Can I use Playwright to test AEM block DOM transformations?▼

Yes, Playwright automates browser testing of DOM transformations and UI behavior in AEM blocks. Start your dev server with `aem up`, then run Playwright scripts to capture screenshots and validate interactive elements, confirming visual and functional correctness before submitting code.

How do I integrate linting and performance checks into my AEM development workflow?▼

Run `npm run lint:fix` to enforce code style automatically. Performance validation integrates via GitHub checks in CI/CD, flagging regressions after changes to blocks, scripts, styles, and configurations—ensuring code quality gates before merging pull requests.

What testing tools do I need for AEM Edge Delivery projects?▼

AEM Edge Delivery testing requires Vitest for unit tests, Playwright for browser testing, jsdom for DOM simulation, @vitest/ui and @vitest/coverage-v8 for test visibility and coverage reporting, and gh cli for GitHub integration—all coordinated in a pragmatic testing workflow.

Where should I store temporary and permanent tests in my AEM project?▼

Store permanent keeper tests in your standard test directory for CI integration. Place temporary throwaway tests in test/tmp or drafts/tmp—these validate one-time scenarios then are discarded, keeping your repository focused on maintainable, reusable test fixtures.

Related Skills

Explore More Software Engineering Skills→
arbory-digital-incarbory-digital-inc

Testing Blocks

Run unit, browser, lint, and performance tests for AEM Edge Delivery projects.

Official
Intermediate
xvawlxvawl
1

pre-merge-checklist

Validate Python and TypeScript PRs against linting, typing, tests, and documentation.

Community
Intermediate
ehtbantonehtbanton

lint-staged-config-generator

Generate lint-staged configuration files for multiple languages and linters.

Community
Basic
rabbicserabbicse

test-migration

Migrate automated test suites between frameworks while preserving coverage parity.

Community
Advanced