测试来自 Angular 属性指令的点击
Testing a click from an Angular Attribute Directive
我在为我编写的 Angular 属性指令创建单元测试时遇到问题。该指令称为 TrackClickDirective,我正在尝试测试以下内容。
- 当点击附加了该指令的元素时,它应该调用该指令的特定方法。
我怀疑是我的单元测试配置有问题。
请查看我在 StackBlitz 上的实现,您可以在其中查看测试 运行ning:
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
我在为我编写的 Angular 属性指令创建单元测试时遇到问题。该指令称为 TrackClickDirective,我正在尝试测试以下内容。
- 当点击附加了该指令的元素时,它应该调用该指令的特定方法。
我怀疑是我的单元测试配置有问题。
请查看我在 StackBlitz 上的实现,您可以在其中查看测试 运行ning:
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