Add Component Unit Tests

Add Angular Component Unit Tests

Creates a <name>.component.spec.ts file next to an Angular component that covers its public API and rendered behavior using Angular's TestBed and Jasmine.

Assumptions

• Angular v20+ standalone components (no NgModule, no standalone: true).
• Inputs/outputs declared with input() / input.required() / output().
• State with signal() and derived state with computed().
• Native control flow (@if, @for, @switch) in templates.
• Host bindings/listeners declared via the host object.
• ChangeDetectionStrategy.OnPush.

Workflow

Follow these steps in order:

1. Read the component file to build an inventory of:
   • Inputs (required vs optional, default values)
   • Outputs (payload types)
   • Signals and computed values (including initial values and derivation logic)
   • Methods (public and protected) — what they mutate, emit, or return
   • Host bindings/listeners in the host object
   • Template elements that render conditionally, iterate, or respond to events
   • Injected dependencies (via inject())
2. Derive the test plan using the Test Plan Heuristics below. Briefly list the cases you will cover before writing code.
3. Write the spec file at <component-folder>/<kebab-name>.component.spec.ts using the Spec Template.
4. Follow the Best Practices — one behavior per test, arrange-act-assert, no snapshot tests for signals, no testing of private implementation details.
5. Do not modify the component to make it testable unless the user asks. If something is genuinely untestable, flag it instead of refactoring silently.

Test Plan Heuristics

For each component, generate tests from this checklist. Skip categories that don't apply.

• Creation: component compiles and renders with required inputs set.
• Inputs:
  • Required inputs: render reflects the provided value.
  • Optional inputs: render reflects the default when omitted, and the override when provided.
  • Input changes propagate (update via componentRef.setInput(...), then fixture.detectChanges()).
• Outputs: each output() emits with the expected payload when its trigger fires (user interaction or method call). Use spyOn on emit or subscribe to the output.
• Signals / computed:
  • Initial value is correct.
  • Value updates when dependencies change.
  • Computed values are derived correctly for representative inputs (include an edge case — empty, null, boundary).
• Methods: each method produces its documented side effect (signal update, output emission, DOM change after detectChanges).
• Template:
  • @if branches — both truthy and falsy paths render correctly.
  • @for — empty, one item, many items; track doesn't cause duplicates.
  • @switch — each case renders its expected block.
  • Event bindings wire to the correct method/output.
  • Class/style bindings reflect the correct state.
• Host: host classes, attributes, and listeners behave correctly.
• Dependencies: injected services are replaced with fakes/spies via providers in TestBed.configureTestingModule.

Spec Template

Use this as the starting point. Adapt to the component under test.

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { <PascalName>Component } from './<kebab-name>.component';

describe('<PascalName>Component', () => {
  let fixture: ComponentFixture<<PascalName>Component>;
  let component: <PascalName>Component;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [<PascalName>Component],
    }).compileComponents();

    fixture = TestBed.createComponent(<PascalName>Component);
    component = fixture.componentInstance;
    // Set required inputs before the first detectChanges.
    fixture.componentRef.setInput('<requiredInput>', '<value>');
    fixture.detectChanges();
  });

  it('creates', () => {
    expect(component).toBeTruthy();
  });

  describe('inputs', () => {
    it('renders the <requiredInput> value', () => {
      const el = fixture.debugElement.query(By.css('<selector>')).nativeElement;
      expect(el.textContent).toContain('<value>');
    });

    it('reflects updates to <requiredInput>', () => {
      fixture.componentRef.setInput('<requiredInput>', '<newValue>');
      fixture.detectChanges();
      const el = fixture.debugElement.query(By.css('<selector>')).nativeElement;
      expect(el.textContent).toContain('<newValue>');
    });
  });

  describe('outputs', () => {
    it('emits <outputName> when <trigger>', () => {
      const emitSpy = spyOn(component.<outputName>, 'emit');
      const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
      button.click();
      expect(emitSpy).toHaveBeenCalledOnceWith(<expectedPayload>);
    });
  });

  describe('<computedOrSignalName>', () => {
    it('returns <expected> for <scenario>', () => {
      fixture.componentRef.setInput('<input>', <value>);
      fixture.detectChanges();
      expect(component.<computedOrSignalName>()).toBe(<expected>);
    });
  });

  describe('template', () => {
    it('shows <elementA> when <condition>', () => {
      fixture.componentRef.setInput('<input>', <truthyValue>);
      fixture.detectChanges();
      expect(fixture.debugElement.query(By.css('<selectorA>'))).not.toBeNull();
      expect(fixture.debugElement.query(By.css('<selectorB>'))).toBeNull();
    });
  });
});

Best Practices

• One behavior per test. Each it asserts a single observable outcome.
• Arrange / Act / Assert — keep the three phases visually separated.
• Test public behavior, not implementation. Drive the component through inputs and DOM events; assert on outputs, rendered DOM, and public signals. Never test private members directly.
• Use setInput, not field assignment. Signal inputs must be set via fixture.componentRef.setInput(name, value).
• Call fixture.detectChanges() after every state change that should affect the view.
• Query the DOM with By.css and assert against textContent, attributes, or element presence — not on stringified HTML.
• Stub dependencies. Replace injected services with jasmine spy objects via { provide: X, useValue: ... } in providers.
• Async. Use fakeAsync + tick for timers, await fixture.whenStable() for promises. Prefer them over setTimeout in tests.
• No snapshot/toMatchSnapshot for templates — write explicit assertions.
• Deterministic. No reliance on real dates, random values, or network. Inject or freeze those.
• Descriptive names. it('emits selected with the row id when the row is clicked'), not it('works').
• Keep beforeEach minimal — only shared setup. Anything scenario-specific goes inside the it.

Example

Given src/app/hello-world/hello-world.component.ts:

import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <section class="hello-world">
      <h2>Hello World</h2>
      <p>Today's date: {{ todaysDate() }}</p>
      <button type="button" (click)="updateTime.emit()">Update time</button>
    </section>
  `,
})
export class HelloWorldComponent {
  readonly todaysDate = input.required<string>();
  readonly updateTime = output<void>();
}

Produce src/app/hello-world/hello-world.component.spec.ts:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { HelloWorldComponent } from './hello-world.component';

describe('HelloWorldComponent', () => {
  let fixture: ComponentFixture<HelloWorldComponent>;
  let component: HelloWorldComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [HelloWorldComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(HelloWorldComponent);
    component = fixture.componentInstance;
    fixture.componentRef.setInput('todaysDate', 'Monday, January 1, 2025');
    fixture.detectChanges();
  });

  it('creates', () => {
    expect(component).toBeTruthy();
  });

  describe('inputs', () => {
    it('renders the provided todaysDate', () => {
      const text = fixture.debugElement.query(By.css('p')).nativeElement.textContent as string;
      expect(text).toContain("Today's date: Monday, January 1, 2025");
    });

    it('reflects updates to todaysDate', () => {
      fixture.componentRef.setInput('todaysDate', 'Tuesday, January 2, 2025');
      fixture.detectChanges();
      const text = fixture.debugElement.query(By.css('p')).nativeElement.textContent as string;
      expect(text).toContain('Tuesday, January 2, 2025');
    });
  });

  describe('outputs', () => {
    it('emits updateTime when the button is clicked', () => {
      const emitSpy = spyOn(component.updateTime, 'emit');
      const button = fixture.debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
      button.click();
      expect(emitSpy).toHaveBeenCalledTimes(1);
    });
  });

  describe('template', () => {
    it('renders a heading, a date line, and an update button', () => {
      expect(fixture.debugElement.query(By.css('h2')).nativeElement.textContent).toContain('Hello World');
      expect(fixture.debugElement.query(By.css('p'))).not.toBeNull();
      expect(fixture.debugElement.query(By.css('button')).nativeElement.textContent).toContain('Update time');
    });
  });
});

Don'ts

• Don't assign signal inputs directly (component.foo = ...) — use setInput.
• Don't use TestBed.overrideComponent just to swap a template.
• Don't test private or protected members by casting to any.
• Don't assert on CSS selectors that include Angular-generated attributes (_ngcontent-...).
• Don't write a single giant it that exercises every behavior.
• Don't re-test framework behavior (that @Input works, that output() emits at all) — test your component's use of it.
• Don't modify the component under test to make it easier to test without asking first.