ui-component-tests-spec

Writes Angular component spec files using TestBed fixtures, harnesses, host wrappers, and service doubles.

1|Updated Jan 14, 2024
One-click install
npx skills add https://github.com/Eyhenij/rt-tools --skill ui-component-tests-spec-eyhenij
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-component-tests-spec
Source: https://github.com/Eyhenij/rt-tools/tree/main/.claude/skills/ui-component-tests-spec
Command: npx skills add https://github.com/Eyhenij/rt-tools --skill ui-component-tests-spec-eyhenij

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing unit tests for Angular UI components in a browserless Jest environment involves many non-obvious pitfalls: reactive signal inputs, missing browser APIs, overlay rendering, and service substitution. This Skill provides ready-made spec patterns so tests are written correctly on the first attempt. ## Core Features & Use Cases - Fixture Builders and Harnesses: Provides a setup() fixture-builder pattern for one kit and a shared createRtFixture harness with qa, textOf, and setInputs helpers for the other. - Host Wrappers and Service Doubles: Shows how to test application-driven inputs through a reactive host component and how to substitute non-root services via TestBed.overrideComponent with hand-written signal-based stubs. - Browserless Environment Guidance: Documents Jest/jsdom limitations such as missing PointerEvent, scrollTo, locale .mjs imports, and overlay content requiring ApplicationRef.tick(). - Use Case: When creating a *.spec.ts next to an rtui-* kit component, apply these patterns to set signal inputs with componentRef.setInput, assert host block-modifier classes, and avoid common misses like window-width assumptions or non-streaming translation loaders. ## Quick Start Write a spec for the RtuiThingComponent using the fixture builder pattern with setInput for the size input and an assertion on the host block modifier class.

Frequently Asked Questions about ui-component-tests-spec

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

FAQPage Schema
How do I test an Angular component with signal inputs in Jest?

Set signal inputs through fixture.componentRef.setInput('size', 'md') followed by fixture.detectChanges(), since assigning to an instance field does not update reactive inputs. Then assert on the rendered DOM or host classes.

How to substitute a non-root Angular service in a component test?

Use TestBed.overrideComponent with set: { providers: [{ provide: MyService, useValue: stub }] } so the double reaches the component's own injector. Write the stub by hand, exposing signals like signal(false).asReadonly() for the values the scenario needs.

Why does my Angular test fail with NG0203 when mocking an output?

NG0203 occurs because output() cannot be called outside an injection context in a hand-written double. Declare the field with type OutputRef and return an object like { subscribe: () => ({ unsubscribe: () => {} }) } instead.

Why is overlay content not found in Angular component tests?

Overlay content does not render by itself after opening; call TestBed.inject(ApplicationRef).tick() to trigger rendering. Then query the document rather than the component fixture, since overlays attach outside the fixture's element.

Can I test mobile breakpoint behavior by resizing the test window?

No, media queries do not fire in a browserless test environment, so window width measures nothing. Substitute the breakpoint service with a stub whose narrow signal you toggle to simulate the mobile view.

Why does importing Angular locale data fail in Jest?

Jest cannot digest imports like '@angular/common/locales/ru' because the locale data ships as .mjs files. Use LOCALE_ID: 'en-US' in the spec instead, since its data is built in.