Ответ 1
Тестирование скомпилированной директивы с использованием 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).