我試圖測試一個角2成分與輸入和外部模板。角2組分變量不更新HTML模板,通過我的測試
以下是部分:
@Component({
selector: 'text-counter',
templateUrl: 'text-counter.component.html',
styleUrls: ['text-counter.component.css']
})
export class TextCounterComponent implements OnChanges {
@Input() inputText: string;
@Input() min: number;
@Input() max: number;
@Input() tolerance: number = 20;
message: string;
messageClass: string;
constructor() {
}
ngOnChanges(changes: SimpleChanges) {
const input: string = changes['inputText'].currentValue;
function expandMessage(rawMessage, n) {
return rawMessage.replace('%', n);
}
const settings = {
initialPrompt: 'saisissez au moins % caractères',
nToGoPrompt: 'il manque % caractères',
nLeftPrompt: 'encore % caractères autorisés',
tooLongByPrompt: 'trop long de % caractères'
};
const length = input ? input.length : 0;
this.messageClass = 'lightblue';
if (length === 0) {
this.message = expandMessage(settings.initialPrompt, this.min);
}
else if (length > 0 && length < this.min) {
this.message = expandMessage(settings.nToGoPrompt, this.min - length);
}
else if (length >= this.min && length <= this.max) {
if (length > this.max - this.tolerance) {
this.messageClass = 'Gold';
}
this.message = expandMessage(settings.nLeftPrompt, this.max - length);
}
else {
this.messageClass = 'Red';
this.message = expandMessage(settings.tooLongByPrompt, length - this.max);
}
}
}
和它的模板:
<span class="form-text" [ngClass]="messageClass">
{{message}}
</span>
的message
變量從未在模板由測試更新雖然ngOnChanges
實際上是所謂的...
這裏是測試:
@Component({
selector: `test-host-component`,
template: `<div>
<text-counter
[inputText]="valueFromHost"
[min]="2"
[max]="500">
</text-counter>
</div>`
})
export class TestHostComponent {
/* using viewChild we get access to the TestComponent which is a child of TestHostComponent */
@ViewChild(TextCounterComponent)
public textCounterComponent: any;
/* this is the variable which is passed as input to the TestComponent */
public valueFromHost: string;
}
describe('Component: TextCounter',() => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [TextCounterComponent, TestHostComponent]
})
.compileComponents();
}));
it('should indicate min message',() => {
const hostComponentFixture = TestBed.createComponent(TestHostComponent);
const textCounterComponentFixture = TestBed.createComponent(TextCounterComponent);
const de: DebugElement = textCounterComponentFixture.debugElement.query(By.css('span'));
const el: HTMLElement = de.nativeElement;
let testHostComponent = hostComponentFixture.componentInstance;
testHostComponent.valueFromHost = 'a';
spyOn(testHostComponent.textCounterComponent, 'ngOnChanges').and.callThrough();
hostComponentFixture.detectChanges();
textCounterComponentFixture.detectChanges();
expect(testHostComponent.textCounterComponent.ngOnChanges).toHaveBeenCalled();
expect(el.textContent).toContain('il manque');//This fails!!
});
});
這裏是失敗的斷言:
Chrome 54.0.2840 (Mac OS X 10.12.1) Component: TextCounter should indicate min message FAILED
Expected '
' to contain 'il manque'.
任何人都可以請幫助?
編輯1:我試圖通過夾具detectChanges()
後移動的el
HTMLElement
檢索如下改變我的代碼:
...
const de: DebugElement = textCounterComponentFixture.debugElement.query(By.css('span'));
const el: HTMLElement = de.nativeElement;
expect(el.textContent).toContain('il manque');
無濟於事......
我只有在這裏的觀點是,你之前得到''el' fixture.detectChanges()'。嘗試在'fixture.detectChanges'之後獲得'el'。 – putonspectacles