angular - 如何解决Cannot read property 'triggerEventHandler' of null in angular jest

Question

我有HTML一个自定义元素的代码：

 <md-tab-content>
            <md-tab-pane *ngFor="let tab of tabSequence" class="md-margin__vertical--l" [ngClass]="{'md-padding__vertical--xl': !dataLoaded}">
              <ng-template [ngIf]="dataLoaded" [ngIfElse]="loading">
                <ng-template [ngIf]="hasIssues && activeTab == tab && chartData[tab]" [ngIfElse]="noIssues">
                  <webex-chartjs-donut-chart
                    class="md-padding__horizontal--none"
                    [data]="chartData[tab]"
                    [plugins]="plugins"
                    [legendTemplate]="legendTemplate"
                    [config]="{ legendDirection: 'vertical', preventDefaultLegendClick: true }"
                    (legendClick)="legendClicked($event)"
                  ></webex-chartjs-donut-chart>
                </ng-template>
              </ng-template>
            </md-tab-pane>
          </md-tab-content>

而且，我想模拟这个legenClicked功能。所以，我写了这个测试：

it('should call legendClick function', () => {
    enum TABS {
      SYSTEM,
      VOICE_VIDEO,
      IMnP,
      CUSTOM,
      UnityConnection
    }
    component.dataLoaded = true;
    component.hasIssues = true;
    component.activeTab = TABS.CUSTOM;
    component.chartData =  TABS.CUSTOM ;
    const donut = fixture.debugElement.query(By.css('webex-chartjs-donut-chart'));
    donut.triggerEventHandler('legendClick', {});
    fixture.detectChanges();

    expect(component.legendClicked).toHaveBeenCalled()
  })

但是，我得到这个错误：

TypeError: Cannot read property 'triggerEventHandler' of null

我该如何进行？提前致谢。

标签： angularjestjs