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传递的颜色参数，并且测试用例失败，并显示以下错误消息。

错误："yellow"应为"blue"。-由于黄色被设置为默认悬停颜色

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');
});