屬性型指令的單元測試
- 這里依然用文本高亮的指令來說明。
import { Directive, ElementRef, Input, OnChanges, Renderer } from '@angular/core';
@Directive({ selector: '[highlight]' })
export class HighlightDirective implements OnChanges {
defaultColor = 'rgb(211, 211, 211)'; // lightgray
@Input('highlight') bgColor: string;
constructor(private renderer: Renderer, private el: ElementRef) {
renderer.setElementProperty(el.nativeElement, 'customProperty', true); /** set the element's customProperty to true */
}
ngOnChanges() {
this.renderer.setElementStyle(
this.el.nativeElement, 'backgroundColor',
this.bgColor || this.defaultColor );
}
}
- 單一的單元測試
import { Component } from '@angular/core';
@Component({
template: `
<h2 highlight="skyblue">About</h2>
<twain-quote></twain-quote>
<p>All about this sample</p>`
})
export class AboutComponent { }
beforeEach(() => {
fixture = TestBed.configureTestingModule({
declarations: [ AboutComponent, HighlightDirective],
schemas: [ NO_ERRORS_SCHEMA ] //用來“淺化”組件測試程序，告訴編譯器忽略不認識的元素和屬性，這樣你不再需要聲明無關的組件和指令，
})
.createComponent(AboutComponent);
fixture.detectChanges(); // initial binding
});
it('should have skyblue <h2>', () => {
const de = fixture.debugElement.query(By.css('h2'));
expect(de.styles['backgroundColor']).toBe('skyblue');
});
但是測試單一的用例無法探索該指令的全部能力。但是查找和測試所有使用該指令的組件非常繁瑣和脆弱，并且通常無法覆蓋所有組件，此時我們可以創建一個展示所有使用該指令的人工測試組件。
@Component({
template: `
<h2 highlight="yellow">Something Yellow</h2>
<h2 highlight>The Default (Gray)</h2>
<h2>No Highlight</h2>
<input #box [highlight]="box.value" value="cyan"/>`
})
class TestComponent { }
beforeEach(() => {
fixture = TestBed.configureTestingModule({
declarations: [ HighlightDirective, TestComponent ] //這里要把指令和人工組件都聲明一下
})
.createComponent(TestComponent);
fixture.detectChanges();
/** 查找所有用到該指令的宿主元素 */
des = fixture.debugElement.queryAll(By.directive(HighlightDirective));
bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])')); //沒有用到該指令的宿主元素});
it('should have three highlighted elements', () => {
expect(des.length).toBe(3);
});
it('should color 1st <h2> background "yellow"', () => {
expect(des[0].styles['backgroundColor']).toBe('yellow');
});
it('should color 2nd <h2> background w/ default color', () => {
const dir = des[1].injector.get(HighlightDirective) as HighlightDirective; //監聽指令屬性變化
expect(des[1].styles['backgroundColor']).toBe(dir.defaultColor);
});
it('should bind <input> background to value color', () => {
// easier to work with nativeElement
const input = des[2].nativeElement as HTMLInputElement;
expect(input.style.backgroundColor).toBe('cyan', 'initial backgroundColor');
// dispatch a DOM event so that Angular responds to the input value change.
input.value = 'green';
input.dispatchEvent(newEvent('input'));
fixture.detectChanges();
expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor');
});
// customProperty tests
it('all highlighted elements should have a true customProperty', () => {
const allTrue = des.map(de => !!de.properties['customProperty']).every(v => v === true);
expect(allTrue).toBe(true);
});
it('bare <h2> should not have a customProperty', () => {
expect(bareH2.properties['customProperty']).toBeUndefined();
});
- 已知元素類型時，By.directive是一種獲取擁有這個指令的元素的好辦法；
- Angular將指令添加到它的元素的注入器中。 默認顏色的測試程序使用第二個
<h2>的注入器來獲取它的HighlightDirective實例以及它的defaultColor。 - DebugElement.properties提供了對指令的自定義屬性的訪問。
ps:自己在處理這塊兒單元測試時遇到最大的坑就是無法監聽屬性值的變化以及獲取到的DOM元素一直有問題（獲取時機不對），花了很多時間。
