Angular 19：如何用单测试组件为ngOnInit执行的样式指令提供多测试用例？

问题根源 #

你的ChangeStyleDirective仅在ngOnInit生命周期钩子中执行样式设置逻辑，而ngOnInit只会在组件/指令初始化时运行一次。当测试中修改TestComponent的color属性并触发变更检测时，指令不会重新执行样式更新逻辑，导致第二个断言失败。同时你的测试代码中手动实例化指令的方式也不符合Angular的组件初始化逻辑，Angular会自动创建指令实例，无需手动new。

解决方案一：修改指令以响应输入变化 #

让指令能够监听输入属性的变化，在输入更新时重新设置样式，这样测试中修改输入后就能触发样式更新。可以通过输入属性的setter或者**ngOnChanges钩子**实现：

方式1：使用输入属性setter #

import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appChangeStyle]'
})
export class ChangeStyleDirective {
  private _color: string = '';

  @Input() set appChangeStyle(color: string) {
    this._color = color;
    this.changeBackgroundColor(color);
  }

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  private changeBackgroundColor(color: string): void {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', color);
  }
}

方式2：使用ngOnChanges钩子 #

import { Directive, ElementRef, Input, Renderer2, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[appChangeStyle]'
})
export class ChangeStyleDirective implements OnChanges {
  @Input() appChangeStyle: string = '';

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnChanges(changes: SimpleChanges): void {
    // 仅当appChangeStyle属性变化时执行更新
    if (changes['appChangeStyle']) {
      this.changeBackgroundColor(this.appChangeStyle);
    }
  }

  private changeBackgroundColor(color: string): void {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', color);
  }
}

修改指令后，调整测试代码以正确获取指令实例：

import { ChangeStyleDirective } from './change-style.directive';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';

@Component({
  template: `<div appChangeStyle="{{color}}"></div>`
})
class TestComponent {
  color = 'red';
}

describe('ChangeStyleDirective', () => {
  let fixture: ComponentFixture<TestComponent>;
  let directiveEl: HTMLElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ChangeStyleDirective, TestComponent],
    });

    fixture = TestBed.createComponent(TestComponent);
    directiveEl = fixture.nativeElement.querySelector('div');
    fixture.detectChanges();
  });

  it('should create an instance', () => {
    // 通过debugElement获取Angular自动创建的指令实例
    const directive = fixture.debugElement.children[0].injector.get(ChangeStyleDirective);
    expect(directive).toBeTruthy();
  });

  it('should apply correct background color on input change', () => {
    // 初始状态验证
    expect(directiveEl.style.backgroundColor).toBe('red');

    // 修改输入并验证
    fixture.componentInstance.color = 'blue';
    fixture.detectChanges();
    expect(directiveEl.style.backgroundColor).toBe('blue');
  });
});

解决方案二：不修改指令，调整测试逻辑 #

如果不想修改指令的原有逻辑（比如指令设计就是仅初始化时设置样式），可以为每个测试场景重新创建组件实例，确保ngOnInit重新执行：

import { ChangeStyleDirective } from './change-style.directive';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';

@Component({
  template: `<div appChangeStyle="{{color}}"></div>`
})
class TestComponent {
  color = 'red';
}

describe('ChangeStyleDirective', () => {
  let fixture: ComponentFixture<TestComponent>;
  let directiveEl: HTMLElement;

  // 封装初始化方法，方便每个测试用例调用
  const initComponent = (color: string) => {
    TestBed.configureTestingModule({
      declarations: [ChangeStyleDirective, TestComponent],
    });

    fixture = TestBed.createComponent(TestComponent);
    fixture.componentInstance.color = color;
    directiveEl = fixture.nativeElement.querySelector('div');
    fixture.detectChanges();
  };

  it('should create an instance', () => {
    initComponent('red');
    const directive = fixture.debugElement.children[0].injector.get(ChangeStyleDirective);
    expect(directive).toBeTruthy();
  });

  it('should apply red background color', () => {
    initComponent('red');
    expect(directiveEl.style.backgroundColor).toBe('red');
  });

  it('should apply blue background color', () => {
    initComponent('blue');
    expect(directiveEl.style.backgroundColor).toBe('blue');
  });
});

这种方式将不同颜色的测试拆分为独立用例，每个用例都重新初始化组件，确保指令的ngOnInit重新执行并设置对应样式。

内容的提问来源于stack exchange，提问作者Sonic