lundi 26 septembre 2016

How to test Angular Js 2 two way binding

I am trying to write a test for my component to test that angular two way binding is working.

On one side I have a test that looks like that (and it passes):

it('should bind displayed value to the SearchComponent property', () => {
    searchComponent.searchBoxValue = 'abc';
    searchCompFixture.detectChanges();
    expect(inputEl.nativeElement.getAttribute('ng-reflect-model')).toBe('abc');
});

where

searchCompFixture = TestBed.createComponent(SearchComponent);
inputEl = searchCompFixture.debugElement.query(By.css('#search-box-input'));

and

<input
    id="search-box-input"
    [(ngModel)]="searchBoxValue"\>

On the other hand I want to write a test that sets the value of the input element first and checks that SearchComponent property value has changed. My attempt:

it('should bind SearchComponent property to the displayed value', fakeAsync(() => {
    inputEl.nativeElement.value = 'abc';
    let evt = new Event('input');
    inputEl.nativeElement.dispatchEvent(evt);

    tick();

    searchCompFixture.detectChanges();
    expect(searchComponent.searchBoxValue).toBe('abc');
}));

but this doesn't work because searchComponent.searchBoxValue value does not get set. Any ideas how to fix this?

Aucun commentaire:

Enregistrer un commentaire