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

Question

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

UI 一切正常。现在我在单元测试时遇到了问题。

下面是相同的代码片段，我正在为我的输入标签创建一个固定装置，并使用事件名称和它期望的参数调用 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 和然后做你的断言。

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

dispatchEvent syntax for selectItem($event) in angular unit testing

dispatchevent

jasmine

angular