Я пытаюсь протестировать компонент angular 2 с входными данными и внешним шаблоном.
Вот компонент:
@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: я попытался изменить свой код, переместив поиск el
HTMLElement
после фикстуры detectChanges()
следующим образом:
...
const de: DebugElement = textCounterComponentFixture.debugElement.query(By.css('span'));
const el: HTMLElement = de.nativeElement;
expect(el.textContent).toContain('il manque');
но безрезультатно...
el
передfixture.detectChanges()
. Попробуйте получитьel
послеfixture.detectChanges
. - person parsethis   schedule 04.12.2016