Как проверить значение двунаправленного связывания 2-го значения привязки

Question

Я пытаюсь написать тест для моего компонента, чтобы проверить, что угловая двусторонняя привязка работает.

С одной стороны, у меня есть тест, который выглядит так (и она проходит):

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

где

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

и

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

С другой стороны, я хочу написать тест, который сначала устанавливает значение входного элемента и проверяет, что значение свойства SearchComponent изменилось. Моя попытка:

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'); 
})); 

, но это не работает, потому что searchComponent.searchBoxValue значение не приготовьтесь. Любые идеи, как это исправить?

Answer 1

Оказывается, вам необходимо до detechtChanges перед обновлением значения поля ввода (idk why). Вот рабочий тест:

it('should bind SearchComponent property to the displayed value', fakeAsync(() => { 
    searchCompFixture.detectChanges(); 

    inputEl.nativeElement.value = 'abc'; 
    let event = new Event('input'); 
    inputEl.nativeElement.dispatchEvent(event); 

    tick(); 
    expect(searchCompFixture.componentInstance.searchBoxValue).toEqual('abc'); 
})); 

EDIT: я нашел еще одно усовершенствование для испытания should bind displayed value to the SearchComponent property. Мне не понравилось, что я использовал странный угловой атрибут ng-reflect-model, а не обычный способ inputEl.nativeElement.value. Проблема заключалась в том, что value еще не установил угловой.

Изменение теста на следующее решение проблемы и не требуется никакой магии - hoorah!

it('should bind displayed value to the SearchComponent property', fakeAsync(() => { 
    searchComponent.searchBoxValue = 'abc'; 

    searchCompFixture.detectChanges(); 
    tick(); 
    searchCompFixture.detectChanges(); 


    expect(inputEl.nativeElement.value).toBe('abc'); 
}));