Я использую NgbTypeAhead, чтобы показать результаты поиска. В соответствии с Angular документами я использую selectedItem($event) для удержания выбранного значения и вызываю мой метод-обработчик для перехвата события.
Все отлично работает из интерфейса. Теперь у меня проблемы с модульным тестированием.
Ниже приведен фрагмент кода для того же, я создаю фикстуру для моего тега ввода и вызываю метод dispatchEvent с именем события и его параметрами. ожидает. Но это работает не так, как ожидалось, поскольку метод-обработчик не получает параметр ($event).
html file
<div class="input-group">
<input #teamInput teamInput.value='' type="text" class="form-control" name="teamNameInput" formControlName="teamNameInput" id="teamNameInput" placeholder="Search Team Name" i18n-placeholder="@@TeamPlaceholder"
[ngbTypeahead]="teamFilter" #teamTypeahead="ngbTypeahead" (selectItem)="addTeam($event)">
</div>
машинопись файл
/**
* Adds an available team to the boardTeam class variable
*
* @param teamName the name of the team
*/
addTeam(teamNameEvent: any) {
teamNameEvent.preventDefault();
console.log("in addTeam:: " + teamNameEvent.item);
this.boardTeam = this.availableTeams.find(team => team.name === teamNameEvent.item);
// hidden business logic
}
тестовый файл
it("has 2 rows in the table after calling add Team", () => {
const expectedTableRowLength = 2;
const expectedHeaderRowLength = 1;
const expectedLength = expectedHeaderRowLength + expectedTableRowLength;
teamInput.dispatchEvent(new Event('selectItem'),{ //this particular event is not working.
"item": "testTeam" -
fixtureUnderTest.detectChanges();
const tableRows = fixtureUnderTest.nativeElement.querySelectorAll("tr");
expect(tableRows.length).toBe(expectedLength);
});