blackbaud/skyux/add-component-unit-tests

Add Unit Tests for a Component or Directive

Use this skill to write or backfill the unit test (<name>.component.spec.ts or <name>.directive.spec.ts) for a component or directive in a published @skyux/* library. The detailed conventions live in component-unit-testing.instructions.md (it auto-applies to **/libs/components/*/src/lib/**/*.{component,directive}.spec.ts) — read it before writing code rather than guessing.

Read AGENTS.md first if you are not already familiar with the monorepo's conventions (Nx tasks, the Karma vs. Jest split, coverage thresholds, and Conventional Commits).

When to Use

• A component or directive needs a new spec, or an existing spec needs to cover

new inputs/outputs/branches.

• Raising a library's coverage back to its threshold.

Do NOT use this skill for:

• Code-example demo specs (libs/components/code-examples/**) — those follow

component-code-examples.instructions.md.

• Test harness specs (libs/components/**/testing/src/**) — use the

add-component-harness skill.

• Jest-based projects (libs/sdk/*, manifest, packages) — those use a

different runner and conventions.

Procedure

Work top to bottom. Always mirror an existing sibling spec in the same library for exact style; do not invent new patterns.

1. Read the subject's public API. Open the component/directive under

libs/components/<library>/src/lib/modules/<module>/. Note every input()/@Input(), output()/@Output(), model(), public method, host bindings, template branches, and any rendered states that affect accessibility. The spec must exercise this surface and every branch.

1. Pick a sibling spec to mirror in the same library, and check whether a

fixtures module/host component already exists (fixtures/<name>.module.fixture.ts). Reuse it; create a minimal host TestComponent only if none fits.

1. Write the spec following

component-unit-testing.instructions.md for the TestBed/fixture setup, input-driving, SKY custom matchers, mocking, and async helpers. The spec must:

• exercise every input/output, public method, and template branch;
• include a describe('a11y', ...) block asserting

await expectAsync(fixture.nativeElement).toBeAccessible() in each meaningful state;

• reach the project's coverage threshold (usually 100%).

1. Verify. Run the library's specs headless, then lint and format:

``bash npx nx test <library> --configuration=ci npm run lint:affected nx format --files=<changed-file-paths> ``

Confirm the run reports the coverage thresholds as met.

1. Commit. Use a Conventional Commit with the components/<library> scope

per commit-message.instructions.md.

Definition of Done

• The spec lives beside its subject and mirrors a sibling spec's structure.
• Every input/output, public method, branch, and error path is exercised, and

an a11y block asserts accessibility in each meaningful state.

• npx nx test <library> --configuration=ci passes at the project's coverage

threshold, lint is clean, and changed files are formatted.