我在创建一个我写过的Angular Attribute Directive的单元测试时遇到了麻烦。该指令名为TrackClickDirective,我正在尝试测试以下内容。
我怀疑这是我的单元测试配置的问题。
请参阅我在StackBlitz上的实现,在那里你可以看到测试正在运行:
StackBltiz:https://stackblitz.com/edit/angular-test-click-on-attribute-directive-with-hostlistener
这是我的单元测试代码 - track-click.directive.spec.ts:
import { Component, ElementRef, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from "@angular/platform-browser";
import { TrackClickDirective } from './track-click.directive';
import { Analytics} from './analytics.service';
class MockAnalytics {
eventTrack() {}
};
class MockElementRef {
}
@Component({
template: '<button appTrackClick>Test</button>'
})
export class TestButtonWithoutNameComponent { }
describe('TrackClickDirective', () => {
let component: TestButtonWithoutNameComponent;
let fixture: ComponentFixture<TestButtonWithoutNameComponent>;
let directive: TrackClickDirective;
let inputEl: DebugElement;
let spy: any;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
TestButtonWithoutNameComponent
],
providers: [
TrackClickDirective,
{ provide: Analytics, useClass: MockAnalytics },
{ provide: ElementRef, useClass: MockElementRef }
]
});
fixture = TestBed.createComponent(TestButtonWithoutNameComponent);
component = fixture.componentInstance;
directive = TestBed.get(TrackClickDirective);
inputEl = fixture.debugElement.query(By.css('button'));
});
it('should call the trackClick methoe when the button is clicked', () => {
spy = spyOn(directive, 'trackClick');
inputEl.triggerEventHandler('click', null);
fixture.detectChanges();
expect(directive.trackClick).toHaveBeenCalled();
});
});
我在这做错了什么?当我运行单元测试时,我得到以下内容:
FAILED TESTS:
TrackClickDirective
✖ should call the trackClick method when the button is clicked
HeadlessChrome 72.0.3626 (Mac OS X 10.14.0)
Expected spy trackClick to have been called.
按照Angular's docs上的例子。
以下应该做的伎俩:
import { Component, ElementRef, DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from "@angular/platform-browser";
import { TrackClickDirective } from './track-click.directive';
import { Analytics} from './analytics.service';
class MockAnalytics {
eventTrack() {}
};
class MockElementRef {
}
@Component({
template: '<button appTrackClick>Test</button>'
})
export class TestButtonWithoutNameComponent { }
describe('TrackClickDirective', () => {
let component: TestButtonWithoutNameComponent;
let fixture: ComponentFixture<TestButtonWithoutNameComponent>;
let directive: TrackClickDirective;
let inputEl: DebugElement;
let spy: any;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
TestButtonWithoutNameComponent,
TrackClickDirective
],
providers: [
TrackClickDirective,
{ provide: Analytics, useClass: MockAnalytics },
{ provide: ElementRef, useClass: MockElementRef }
]
});
fixture = TestBed.createComponent(TestButtonWithoutNameComponent);
component = fixture.componentInstance;
directive = TestBed.get(TrackClickDirective);
inputEl = fixture.debugElement.query(By.css('button'));
});
it('should call the trackClick method when the button is clicked', () => {
directive = fixture.debugElement.query(By.directive(TrackClickDirective)).injector.get(TrackClickDirective) as TrackClickDirective;
spy = spyOn(directive, 'trackClick');
inputEl.triggerEventHandler('click', null);
fixture.detectChanges();
expect(directive.trackClick).toHaveBeenCalled();
});
});
关键在于这一行:
fixture.debugElement.query(By.directive(TrackClickDirective)).injector.get(TrackClickDirective) as TrackClickDirective;
虽然非常详细,但它允许您获取已创建的指令的实际实例,并在组件中使用,从而允许您监视其方法。
更新了StackBlitz示例:https://stackblitz.com/edit/angular-test-click-on-attribute-directive-with-hostlistener