hoangnguyen0403/angular-testing
skills/angular/angular-testing/SKILL.md
Write Angular component tests using TestBed, ComponentHarness, and HttpTestingController with proper signal input handling. Use when writing component tests, mocking HTTP calls, or testing signal inputs.
$ install --global
skillsauthnpx skillsauth add hoangnguyen0403/agent-skills-standard angular-testingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 20, 2026, 3:00 AM311.3s3 files scanned
SKILL.md
- name:
- angular-testing
- description:
- Write Angular component tests using TestBed, ComponentHarness, and HttpTestingController with proper signal input handling. Use when writing component tests, mocking HTTP calls, or testing signal inputs.
Testing
Priority: P1 (HIGH)
1. Query via Component Harnesses
- Use
ComponentHarness(e.g.,MatButtonHarness) not CSS selectors — stable across DOM changes. loader.getHarness(MatButtonHarness)+await button.click(). Never query by CSS class.
See harness pattern for ComponentHarness examples.
2. Mock HTTP with HttpTestingController
provideHttpClientTesting()not manual HttpClient mocks.- Call
expectOne,.flush(mockData),verify()inafterEach.
See harness pattern for HttpTestingController examples.
3. Test Signal Inputs Correctly
fixture.componentRef.setInput('name', value)— not direct assignment.fixture.detectChanges()aftersetInput().- Signals sync — no
fakeAsyncneeded for most signal-driven tests.
4. Choose Your Test Runner
- Angular v20+: Vitest via
@angular/build:unit-test— faster, native ESM, no Karma. Configure inangular.json. - Jasmine/Karma still supported for existing projects.
- Standalone: import directly in
TestBed.configureTestingModule({ imports: [StandaloneComponent] }).
Anti-Patterns
- No DOM CSS selectors: Query via
ComponentHarness, not CSS class strings. - No manual HttpClient mock: Use
provideHttpClientTesting()+HttpTestingController. - No direct @Input() assignment: Use
fixture.componentRef.setInput()for signal inputs.
References
- Harness Pattern
Related Skills
hoangnguyen0403/common-software-requirements
development
VerifiedTrustedCommunity
Standardize SRS and FRS specifications for technical behavior, interfaces, data contracts, quality constraints, and verification mapping. Use when writing SRS, functional specification, system behavior requirements, API/data contracts, or non-functional thresholds.
503SKILL.mdUpdated May 23, 2026
hoangnguyen0403/common-business-requirements
development
VerifiedTrustedCommunity
Standardize BRD and BRD-lite discovery for business goals, stakeholder impact, current-to-future state, and measurable value outcomes. Use when creating BRD, business case, project justification, ROI narrative, or AS-IS to TO-BE scope.
503SKILL.mdUpdated May 23, 2026
hoangnguyen0403/common-tdd
development
VerifiedTrustedCommunity
Implements a strict Red-Green-Refactor loop to ensure zero production code is written without a prior failing test. Use when: creating new features, fixing bugs, or expanding test coverage.
503SKILL.mdUpdated May 10, 2026
hoangnguyen0403/common-product-requirements
testing
VerifiedTrustedCommunity
Standardize PRD discovery and drafting for product scope, user outcomes, requirement IDs, and acceptance criteria. Use when creating PRD, product requirements, feature specification, or acceptance criteria plan.
503SKILL.mdUpdated May 10, 2026