angular-awesome-testing

Write Jasmine and Karma tests for Angular wa-* directives and services.

2|1|Updated Jun 4, 2025
One-click install
npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome-testing
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-awesome-testing
Source: https://github.com/GedMarc/angular-awesome/tree/main/skills/angular-awesome-testing
Command: npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome-testing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides clear patterns and checklists to write reliable, maintainable unit and component tests for Angular wrapper directives and services that wrap Web Awesome web components, reducing flaky tests and hidden regressions.

Core Features & Use Cases

  • Directive testing patterns for verifying attribute reflection, input updates, boolean attribute toggles, content projection, and event emission for wa-* directives.
  • Service and container tests including WaToastService behavior, queueing, auto-dismiss, and WaToastContainerComponent rendering checks.
  • Test runner guidance for Jasmine + Karma, headless runs, scoped test execution, and BrowserStack integration; plus rules for TestBed configuration, fakeAsync/tick usage, and DOM querying best practices.

Quick Start

Create Jasmine and Karma spec files that verify attribute reflection, event emission, and content projection for WaButtonDirective.

Frequently Asked Questions about angular-awesome-testing

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

FAQPage Schema
How do I test Angular directive attribute reflection using Jasmine and Karma?

Angular directive attribute reflection testing verifies that wa-* directives correctly update DOM attributes. You configure TestBed standalone imports, then use getAttribute checks within Jasmine specs to assert boolean attribute toggles and input updates are reflected in the DOM.

How do I test Angular service timer behavior with fakeAsync and tick?

To test Angular service timer behavior with fakeAsync, you wrap Jasmine specs in fakeAsync and call tick to simulate timer progression. This verifies auto-dismiss timing and queueing logic for services like WaToastService without relying on actual asynchronous delays.

What is the best way to test Web Awesome web components wrapped in Angular?

Testing Web Awesome web components wrapped in Angular involves writing component tests for wa-* directives to verify content projection and event emission. Using Jasmine and Karma ensures DOM querying best practices validate the bridge between Angular and the underlying web components.

Can I run scoped headless Karma tests for Angular directives?

Yes, you can run scoped headless Karma test execution for Angular directives. The test runner guidance supports headless runs and BrowserStack integration, allowing you to execute specific spec files for wa-* directives without launching full browser windows.

Why are my Angular component tests failing after adding standalone imports to TestBed?

Angular component tests fail after adding standalone imports to TestBed when required directives or services are missing from the imports array. Debugging failing specs requires checking TestBed configuration to ensure all wa-* wrapper dependencies are properly provided.