使用 TestBed 测试编译指令
假设您有以下指令：
@Directive({
selector: '[my-directive]',
})
class MyDirective {
public directiveProperty = 'hi!';
}
你要做的是创建一个使用该指令的组件（它可以只是为了测试目的）：
@Component({
selector: 'my-test-component',
template: ''
})
class TestComponent {}
现在您需要创建一个声明它们的模块：
describe('App', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
TestComponent,
MyDirective
]
});
});
// ...
});
您可以将模板（包含指令）添加到组件中，但可以通过覆盖测试中的模板来动态处理：
it('should be able to test directive', async(() => {
TestBed.overrideComponent(TestComponent, {
set: {
template: '<div my-directive></div>'
}
});
// ...
}));
现在您可以尝试编译该组件，并使用By.directive 对其进行查询。最后，有可能使用injector 获取指令实例：
TestBed.compileComponents().then(() => {
const fixture = TestBed.createComponent(TestComponent);
const directiveEl = fixture.debugElement.query(By.directive(MyDirective));
expect(directiveEl).not.toBeNull();
const directiveInstance = directiveEl.injector.get(MyDirective);
expect(directiveInstance.directiveProperty).toBe('hi!');
});
# 旧答案：
要测试一个指令，你需要用它创建一个假组件：
@Component({
selector: 'test-cmp',
directives: [MyAttrDirective],
template: ''
})
class TestComponent {}
您可以在组件本身中添加模板，但可以通过覆盖测试中的模板来动态处理：
it('Should setup with conversation', inject([TestComponentBuilder], (testComponentBuilder: TestComponentBuilder) => {
return testComponentBuilder
.overrideTemplate(TestComponent, `<div my-attr-directive></div>`)
.createAsync(TestComponent)
.then((fixture: ComponentFixture<TestComponent>) => {
fixture.detectChanges();
const directiveEl = fixture.debugElement.query(By.css('[my-attr-directive]'));
expect(directiveEl.nativeElement).toBeDefined();
});
}));
请注意，您可以测试指令呈现的内容，但我找不到以组件方式测试指令的方法（没有用于指令的 TestComponentBuilder）。