Angular Testing Skills for Claude Code

A collection of Claude Code skills for writing high-quality Angular unit tests with Jest and ng-mocks. The two skills complement each other: one handles which APIs to use, the other handles how tests should read.

Skills

ng-mocks — framework APIs

Gives Claude deep knowledge of ng-mocks — MockBuilder, MockRender, and ngMocks.*. Replaces hand-rolled TestBed.configureTestingModule boilerplate with a terse, auto-mocking API.

Covers:

• Core API: MockBuilder, MockRender, MockProvider, MockInstance, ngMocks.faster()
• Standalone and module-based components, signal stores, injection tokens
• NgRx effects with provideMockActions and provideMockStore
• Real-world examples: effects, parent/child components, signal store, pipes, HTTP services

readable-tests — naming, structure, and what to assert

Enforces test naming conventions, AAA layout, and behavior-over-implementation assertions. Use alongside ng-mocks whenever writing or reviewing *.spec.ts files.

Covers:

• Naming: describe(Class.name), it('should … when …'), nested describes by scenario
• AAA: arrange/act/assert separation, one behavior per test
• What to assert: DOM over internals, semantic selectors, it.each for data-driven tests
• Examples: renaming vague tests, splitting multi-behavior tests, parametrizing repeated tests, fixing implementation assertions, restructuring AAA

Installation

From GitHub (recommended)

git clone https://github.com/mintarasss/ng-mocks-testing-skill.git

Copy whichever skills you want into your Claude Code skills directory:

# Global (available in all projects)
cp -r ng-mocks-testing-skill/ng-mocks ~/.claude/skills/ng-mocks
cp -r ng-mocks-testing-skill/readable-tests ~/.claude/skills/readable-tests

# Project-specific (only this project)
mkdir -p .claude/skills
cp -r ng-mocks-testing-skill/ng-mocks .claude/skills/ng-mocks
cp -r ng-mocks-testing-skill/readable-tests .claude/skills/readable-tests

One-liner (both skills, global)

git clone https://github.com/mintarasss/ng-mocks-testing-skill.git /tmp/ng-mocks-skill \
  && cp -r /tmp/ng-mocks-skill/ng-mocks ~/.claude/skills/ng-mocks \
  && cp -r /tmp/ng-mocks-skill/readable-tests ~/.claude/skills/readable-tests \
  && rm -rf /tmp/ng-mocks-skill

After installing, restart Claude Code or run /reload-plugins.

When Each Skill Activates

ng-mocks triggers when you:

• Create or edit any *.spec.ts file
• Mention MockBuilder, MockRender, or ngMocks
• Ask to write a test for a component, service, pipe, effect, or guard

readable-tests triggers when you:

• Ask to "write a test for", "review my test", or "is this test readable"
• Ask about naming describe/it blocks or test structure
• Edit any *.spec.ts file (used alongside ng-mocks)

Repo Structure

ng-mocks/
├── SKILL.md                        # Main skill (API, skeletons, patterns)
└── references/
    ├── cheatsheet.md               # Quick API reference
    ├── effects.md                  # NgRx effects testing guide
    └── patterns.md                 # Common ng-mocks patterns

readable-tests/
├── SKILL.md                        # Main skill (naming, AAA, assertions)
└── references/
    ├── naming.md                   # Extended naming examples by construct type
    └── patterns.md                 # Full test bodies for readable patterns

Examples

"Cover files X all statements with unit tests."

"Write a unit test for this NgRx effect. Cover the happy path and the error path."

"Test this component — it gets a user from the store and has a logout button that dispatches an action."

"My test names are all vague — can you rename them to follow the 'should … when …' convention?"

"These four it blocks are copy-pasted with different inputs. Rewrite as it.each."

"I'm asserting on a private method. How should I assert on the behavior instead?"

License

MIT