Angular Spec Auditor

VerifiedSafe

Independently audit an Angular component spec file against project migration guidelines.

Sby Skills Guide Bot
TestingIntermediate
7/29/2026
Claude Code
#angular#unit-testing#jest#migration#code-review

Recommended for

Automated summary

Independently audits an Angular component spec file against the project's migration guidelines and reports every deviation with the lines involved.

Strengths

  • Checks each rule with an explicit PASS/FAIL verdict and the exact line numbers
  • Enforces a precise DOM query preference order (harness, then querySelector, then By.directive, never By.css) with the silent false-positive rationale
  • Prefers TestBed.inject() and jest.spyOn() over useValue to keep type checking, while documenting legitimate exceptions
  • Also verifies template coverage and the presence of required providers (provideHttpClient, provideRouter)

Limitations

  • Heavily depends on external files (AGENTS.md and the migration command) that must exist and stay current
  • The audit is a static checklist: it runs no tests and measures no actual coverage percentage
  • Assumes an Angular setup with Jest and non-standalone components, limiting reuse in other configurations
When to use it

Use it when an Angular component spec has just been written or migrated and must be reviewed against team conventions before code review or merge.

When not to use it

Do not use it to generate or fix a spec, or to audit non-Angular tests or components governed by a different set of guidelines.

Security analysis

Safe
Quality score92/100

The skill only reads project files and edits a specific spec file to apply coding standards. It contains no destructive commands, network calls, data exfiltration, or obfuscated payloads. The editing is scoped and legitimate for the stated purpose.

No concerns found

How this analysis is made

Examples

Audit a specific spec file
/audit-ng-spec-skill src/main/app/src/app/taken/taken-vrijgeven-dialog/taken-vrijgeven-dialog.component.spec.ts
Audit after a migration edit
I just converted this spec to the new conventions — run the Angular spec audit on src/main/app/src/app/zoeken/zoeken.component.spec.ts and list every FAIL with line numbers.

Angular Spec Auditor

Independently audit an Angular component spec file against the project's migration guidelines.

Usage: /audit-ng-spec-skill $ARGUMENTS $ARGUMENTS = path to the spec file (relative from repo root), e.g. src/main/app/src/app/taken/taken-vrijgeven-dialog/taken-vrijgeven-dialog.component.spec.ts

If $ARGUMENTS is omitted, ask the user for the spec path before proceeding.


You did NOT write this spec. Treat it with completely fresh eyes.

Step 1 — Read context

  1. Read AGENTS.md.
  2. Read .claude/commands/migrate-ng19-standalone-components.md — pay special attention to the Rules table and Spec Conventions section.
  3. Read the spec at {SPEC_PATH}.
  4. Derive the component path from the spec path (same directory, .component.ts instead of .component.spec.ts), read it.
  5. Derive the template path (.component.html), read it if it exists.

Step 2 — Audit

For each item, mark PASS or FAIL with a one-line reason and the exact line(s) involved.

Rules

  • [ ] No any / as any / eslint-disable no-explicit-any
  • [ ] No : void return type annotations anywhere in the spec
  • [ ] No trivial smoke tests (it("should create", ...) or similar)
  • [ ] No NO_ERRORS_SCHEMA
  • [ ] DOM query preference order: harness → querySelector/querySelectorAll (plain HTML / custom elements) → By.directive — never By.css. By.css('[input="value"]') matches on DOM attributes that Angular never writes for @Input bindings → silent false positives. For custom components with @Input checks use debugElement.queryAll(de => de.name === "tag-name") + .componentInstance.prop.
  • [ ] No querySelectorAll / querySelector for Material components (use harnesses; plain HTML elements are OK)
  • [ ] Variable naming: no single-letter or abbreviated names (el, f, res, btn). Use full descriptive names (element, fixtureRef, result, button).
  • [ ] SPDX header: new file → 2026 INFO.nl only; existing file → INFO.nl added only if completely absent from the existing line

Spec structure

  • [ ] describe(ClassName.name, ...) — class name reference, not a string literal
  • [ ] declarations: [Component] used (component is standalone: false), OR imports: [Component] if already standalone
  • [ ] Services should use TestBed.inject() + jest.spyOn() — avoid useValue: mockObject.
    • Reason: type safety. useValue accepts any object — typos, missing methods, wrong return types all silently pass. jest.spyOn is checked against the real service type, so the compiler catches mismatches.
    • Strongly preferred pattern:
      providers: [provideHttpClient(), provideRouter([]), MyService],
      // ...
      myService = TestBed.inject(MyService);
      jest.spyOn(myService, "someMethod").mockReturnValue(of(result));
      
    • useValue is acceptable when genuinely difficult to avoid (e.g. a service with a deeply complex DI tree that cannot be satisfied without significant setup). Flag it with a comment explaining why.
    • Always acceptable exceptions: Angular built-in injection tokens (MAT_DIALOG_DATA, LOCALE_ID, APP_BASE_HREF, etc.) where no real class exists to inject.
    • TranslateService → use TranslateModule.forRoot() in imports, then TestBed.inject(TranslateService) + jest.spyOn.
    • Services using ZacHttpClient → add provideHttpClient() to providers.
    • Services using Router → add provideRouter([]) to providers.
  • [ ] provideHttpClient() present if any service in the tree uses ZacHttpClient
  • [ ] provideRouter([]) present if any service in the tree uses Router
  • [ ] Factory helpers use fromPartial<T>(obj) — never bare { ... } as unknown as T on an object literal (non-literal re-casts like mockVar as unknown as T are OK)

Coverage

  • [ ] Every test asserts meaningful behaviour
  • [ ] ≥90% of template behaviours covered (buttons, conditionals, outputs, form states)
  • [ ] Protected/private members accessed via bracket notation: component["member"]

Step 3 — Fix

For each FAIL: edit the spec file with the correct fix. Do NOT touch any component source files.

After all fixes are applied, re-read the spec to confirm no violations remain.

Step 4 — Report

AUDIT: PASS                         (if nothing needed fixing)
AUDIT: PASS (N issues fixed)        (if fixes were applied)

Issues fixed:
- Line X: <description of fix>
- ...

If a violation cannot be auto-fixed (e.g. missing test coverage that requires understanding domain logic), list it as a manual action required item and do not mark the audit PASS until the user addresses it.

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/angular-spec-auditor-ms5lrgzl/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/angular-spec-auditor-ms5lrgzl' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/angular-spec-auditor-ms5lrgzl/download' --output '.skill-downloads/angular-spec-auditor-ms5lrgzl/SKILL.md.part' && mv '.skill-downloads/angular-spec-auditor-ms5lrgzl/SKILL.md.part' '.skill-downloads/angular-spec-auditor-ms5lrgzl/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

This file does not provide a usable name/description header for this native procedure. It remains available to download and inspect; use the manual method below.

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/angular-spec-auditor-ms5lrgzl/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills