submitEl.triggerEventHandler 不是 Angular 5 中的函数答案

【问题标题】：submitEl.triggerEventHandler is not a function in Angular 5submitEl.triggerEventHandler 不是 Angular 5 中的函数
【发布时间】：2018-10-24 03:01:15
【问题描述】：

您好，我正在使用 Angular5 Jasmine 编写单元测试用例。我正在尝试提交表格。我正在编写提交表单的单元测试用例。下面是我的表格。

<form *ngIf="formResetToggle" class="form-horizontal" name="scopesEditorForm" #f="ngForm" novalidate (ngSubmit)="f.form.valid && isScopeValid() ? saveScope() : showErrorAlert('Please enter mandatory fields')">
     <input autofocus type="text" id="scopename" name="scopename" placeholder="Enter scope name" class="form-control" [(ngModel)]="scopeEdit.scopevalue" #scopename="ngModel" required />
     <button type="button" (click)="editorModal.hide()" class="btn btn-default" data-dismiss="modal">Cancel</button>
</form>

下面是我的 spec.ts 文件。

describe('ScopeEditorComponent', () => {

    let component: ScopeEditorComponent;
    let fixture: ComponentFixture<ScopeEditorComponent>;
    let submitEl: DebugElement;
    let scopeValue: DebugElement;

      beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpClientModule,
                 RouterTestingModule,
                 ],
            declarations: [
                ScopeEditorComponent,
                SearchBoxComponent,
                GroupByPipe,
            ]
 fixture = TestBed.createComponent(ScopeEditorComponent);
        component = fixture.componentInstance;
        service = new PermissionEndpointMock();
        fixture.detectChanges();


        submitEl = fixture.debugElement.query(By.css('button')).nativeElement;
        scopeValue = fixture.debugElement.query(By.css('#scopename'));
  }));

 it('should create the scope component', async(() => {
        expect(component).toBeTruthy();
    }));
     it('add scope', () => {
        let scope: Scope;
        scopeValue.nativeElement.value = "test@example.com";

        // Subscribe to the Observable and store the user in a local variable.
        component.addscopeEventEmitter.subscribe((value) => scope = value);
        // This sync emits the event and the subscribe callback gets executed above
        submitEl.triggerEventHandler('click', null);

        // Now we can check to make sure the emitted value is correct
        expect(scope.scopeid).toBe("123456");
    });

以下代码抛出错误 submitEl.triggerEventHandler 不是函数。有人可以帮我解决这个问题吗？谢谢

【问题讨论】：

标签： angular typescript unit-testing jasmine

【解决方案1】：

关于 triggerEventHandler() 方法的三个重要事实：

仅当使用 Angular 事件绑定、@HostListener() 或 @Output 装饰器（以及较少使用的 Renderer.listen()）在本机元素上声明事件处理程序时，它才会调用事件处理程序。
不会自动触发变更检测；我们需要自己调用它。
与开发人员的想法或行为不同，无需使用 fakeAsync — 处理程序将同步执行。

【讨论】：

【解决方案2】：

我试过这种方式：

submitEl = fixture.debugElement.nativeElement.querySelector('button');
submitEl.click();

但是，不幸的是，它只是发出一个点击事件，而不是从组件启动点击处理程序。我发现的唯一方法就是显式调用处理程序：

component.editorModal.hide()

【讨论】：

【解决方案3】：

triggerEventHandler 没有在nativeElement 上定义；在describe里面，改变

submitEl = fixture.debugElement.query(By.css('button')).nativeElement;

到，

submitEl = fixture.debugElement.query(By.css('button'));

【讨论】：

就是这样！ :)

【解决方案4】：

尝试使用

submitEl = fixture.debugElement.nativeElement.querySelector('button');

然后

submitEl.click();

【讨论】：