角度单元测试中selectItem($event)的dispatchEvent语法

Question

我正在使用NgbTypeAhead来显示搜索结果。根据Angular文档，我使用selectedItem($event)来获取所选值，并调用我的处理程序方法来捕获事件。

UI上的一切都很好。现在我在单元测试中遇到了问题。

下面是相同的代码片段，我正在为我的输入标记创建一个fixture，并使用事件名称和它所期望的params调用dispatchEvent方法。但这并没有按预期工作，因为处理程序方法没有获得参数($event)。

html文件

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

Answer 1

调度事件会很困难。您必须提供imports和declarations以使ngbTypeahead工作，然后使其在单元测试中工作，或者直接用模拟事件调用addTeam，然后进行断言。