Тестирование директив¶
Директивы-атрибуты предназначены для изменения поведения элемента или его отображения.
Здесь рассматриваются только тестирование директив атрибутов, поскольку структурными директивами по своей сути являются компоненты, процесс тестирования которых рассмотрен здесь.
Ниже представлен листинг кода директивы, которая меняет цвет фона элемента, если в его текстовом значении имеется вхождение переданной последовательности символов. Цвет фона по умолчанию серый (#a9a9a9
), но также он может быть задан пользователем.
match-string.directive.ts
@Directive({
selector: '[matchString]',
})
export class HintHotKeyDirective implements OnChanges {
@Input('matchString') matchString: string
@Input() bgColor: string = '#a9a9a9'
constructor(private el: ElementRef) {}
ngOnChanges(changes: SimpleChanges) {
if (
(changes.matchString &&
changes.matchString.currentValue) ||
(changes.bgColor && changes.bgColor.currentValue)
) {
this._search(changes.matchString.currentValue)
}
}
private _search(match: string) {
if (
this.el.nativeElement.textContent.indexOf(match) != -1
)
this.el.nativeElement.style.backgroundColor = this.bgColor
else this.el.nativeElement.style.backgroundColor = ''
}
}
Хорошей практикой для тестирования директив считается создание тестового компонента, который описывает все случаи ее применения. Такой подход объясняется тем, что реальный компонент приложения может использовать лишь часть функционала директивы и с его помощью будет просто невозможно проверить полный функционал.
match-string-test.component.ts
@Component({
selector: 'match-string-test',
template: `
<div>
<h3 [matchString]="match">
Match string test component
</h3>
<p [matchString]="match" [bgColor]="color">
This is a component for testing all use cases of
[matchString] directive.
</p>
</div>
`,
})
export class MatchStringTestComponent {
match: string
color: string
constructor() {}
}
match-string-test.component.spec.ts
describe('[matchString] directive', () => {
let fixture: ComponentFixture<MatchStringTestComponent>
let comp: MatchStringTestComponent
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
MatchStringDirective,
MatchStringTestComponent,
],
schemas: [NO_ERRORS_SCHEMA],
})
.compileComponents()
.then(() => {
fixture = TestBed.createComponent(
MatchStringTestComponent
)
comp = fixture.componentInstance
})
}))
it('should color only p background', () => {
comp.match = 'directive'
fixture.detectChanges()
const el = fixture.debugElement.queryAll(
By.directive(MatchStringDirective)
)
const h3 = el[0].nativeElement
const p = el[1].nativeElement
expect(h3.style.backgroundColor).toBe('')
expect(p.style.backgroundColor).toBe('#a9a9a9')
})
it('should color only p background with color value', () => {
comp.match = 'directive'
comp.color = '#fafad2'
fixture.detectChanges()
const el = fixture.debugElement.queryAll(
By.directive(MatchStringDirective)
)
const p = el[1].nativeElement
expect(p.style.backgroundColor).toBe('#fafad2')
})
})
Обратите внимание, что в конфигурации тестового модуля указывается свойство schemas
со значением [NO_ERRORS_SCHEMA]
, которое отключает генерацию исключений Angular в случае обнаружения необъявленных компонентов или директив.
Доступ к элементам при тестировании директив осуществляется с помощью метода directive()
класса By
. Также допустимо использование querySelector()
и By.css()
.
Проверить применяемые к элементу стили через свойство styles
объекта DebugElement
, а все устанавливаемые директивой пользовательские свойства элемента доступны в свойстве properties
.