Angular 2+ 中带有参数的单元测试指令

Question

我有一个指令可以在鼠标悬停期间更改元素的背景颜色，如下所示。

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

@Directive({
  selector: '[appHighlightme]'
})
export class HighlightmeDirective {

  @Input('appHighlightme') color : string
  constructor(private el:ElementRef) { }

  @HostListener('mouseenter') onMouseEnter(){
    this.highlight(this.color || 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave(){
    this.highlight('inherit');
  }

  highlight(color){
    this.el.nativeElement.style.backgroundColor = color;
  }
}

我试图为这个指令编写一个单元测试用例，如下所示

import { HighlightmeDirective } from './highlightme.directive';
import {ChangeDetectionStrategy, Component, DebugElement, ViewChild} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';

@Component({
  selector: 'my-test-component',
  template: '<a [appHighlightme]="color" >test</a>'
})
export class TestComponent {
  color:string = 'blue';
}

describe('HighlightmeDirective', () => {

  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;
  let inputEl: DebugElement;

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

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    inputEl = fixture.debugElement.query(By.directive(HighlightmeDirective));

  });

  it('detect hover changes', () => {
    inputEl.triggerEventHandler('mouseenter', {});
    fixture.detectChanges();
    expect(inputEl.nativeElement.style.backgroundColor).toBe(component.color);
    inputEl.triggerEventHandler('mouseleave', {});
    fixture.detectChanges();
    expect(inputEl.nativeElement.style.backgroundColor).toBe('inherit');
  });

  it('should create an instance', () => {
    const directive = new HighlightmeDirective(inputEl);
    expect(directive).toBeTruthy();
  });
});

该指令在其他组件中运行良好。它接受 ts 文件中定义的颜色参数变量，并在悬停元素时将其用作 bg 颜色。但是，当我尝试对其进行单元测试时，指令未检测到从 TestComponent 传递的颜色参数，并且测试用例失败并显示以下错误消息。

错误：预期“黄色”为“蓝色”。 - 黄色被设置为默认悬停颜色

Answer 1

您不需要通过指令跟踪事件处理程序。您需要在本机元素（在您的情况下为锚标记）上发出一个事件，并且指令处理程序将被自动调用。这是测试指令的实际方法。

假设我们有一个带有类的锚标签，所以我们需要在这个标签上创建一个事件。

@Component({
  selector: 'my-test-component',
  template: '<a class="mytag" [appHighlightme]="color" >test</a>'
})
export class TestComponent {
  color:string = 'blue';
}

describe('HighlightmeDirective', () => {

  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;
  let inputEl: DebugElement;

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

    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();   // trigger change detection so that UI renders and you can access element in next step.
    inputEl = fixture.debugElement.query(By.css('.mytag'));

  });

  it('detect hover changes', () => {
    inputEl.triggerEventHandler('mouseenter', {});
    fixture.detectChanges();
    expect(inputEl.nativeElement.style.backgroundColor).toBe(component.color);
    inputEl.triggerEventHandler('mouseleave', {});
    fixture.detectChanges();
    expect(inputEl.nativeElement.style.backgroundColor).toBe('inherit');
  });

  it('should create an instance', () => {
    const directive = new HighlightmeDirective(inputEl);
    expect(directive).toBeTruthy();
  });
});

希望对你有帮助。

Answer 2

在触发任何事件之前，您需要确保 @Input('appHighlightme') color 属性已初始化。此初始化发生在第一个更改检测周期中。

因此您应该触发更改检测，然后才触发mouseenter 事件。另一个观察结果是，由于您直接通过 this.el.nativeElement.style.backgroundColor 进行操作，因此您甚至不需要使用其他 fixture.detectChanges(); 调用。

it('detect hover changes', () => {
  fixture.detectChanges(); // !!! initialize 'color' property

  inputEl.triggerEventHandler('mouseenter', {});  
  // fixture.detectChanges();  <-- useless here
  expect(inputEl.nativeElement.style.backgroundColor).toBe(component.color);

  inputEl.triggerEventHandler('mouseleave', {});
  // fixture.detectChanges();  <-- useless here
  expect(inputEl.nativeElement.style.backgroundColor).toBe('inherit');
});