Angular2测试表单：未调用提交方法答案

【问题标题】：Angular2 testing form: submit method not calledAngular2测试表单：未调用提交方法
【发布时间】：2016-08-08 19:52:27
【问题描述】：

有这个组件

import {Component} from 'angular2/core';
import { FORM_DIRECTIVES } from 'angular2/common';

@Component({
    selector: 'something',
    templateUrl: 'something.html',
    providers: [],
    directives: [FORM_DIRECTIVES],
    pipes: []
})
export class Something {

    constructor() { }

    save(data) {
        alert(data);
    }
}

使用这个模板（something.html）

<form #myForm="ngForm" (ngSubmit)="save(myForm.value)">
    <label for="title">Title</label>
    <input id="title" type="text" ngControl="title" />

    <label for="primaryImage">Primary Image</label>
    <input id="primaryImage" type="text" ngControl="primaryImage" />

    <button type="submit">Save</button>
</form>

还有这个测试

it('should call save method after clicking a Save button', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(Something).then((fixture) => {
        spyOn(fixture.componentInstance, 'save');
        fixture.detectChanges();
        const compiled = fixture.nativeElement;
        compiled.querySelector('#title').value = 'testTitle';
        compiled.querySelector('#primaryImage').value = 'tabc.png';                   
        compiled.querySelector('button').click();
        expect(fixture.componentInstance.save).toHaveBeenCalledWith({
            title: 'testTitle',
            primaryImage: 'abc.png'
        });
    });
}));

测试失败，spy 没有调用 save 方法。但是，当我在浏览器中手动尝试时，如果有效，则会显示警报。当我使用 form.submit 代替 button.click 时，测试也失败了。

当我在按钮上使用(click)="save(myForm.value)" 而不是在表单上使用ngSubmit 时，测试仍然失败，但原因不同。在这种情况下已经调用了 spy 上的 Save 方法，但传递给它的数据是 {}。

谁能告诉我这里缺少什么？

【问题讨论】：

标签： javascript unit-testing angular

【解决方案1】：

要添加到 Juanmi 的答案以使测试完全完成，必须通过单击按钮来触发事件，因为例如，如果将按钮移出标签，应用程序将失败，但测试还是会过去的。

通过调用本机元素（而不是调试元素）的“click()”方法，我设法解决了上述问题。请参阅下面的代码。请注意，在下面的代码中，我使用的是 ReactiveForms 语法，但它不应该对测试产生影响。

<form [formGroup]="sampleForm" (submit)="submit($event)">
    <input id="sampleBtn" type="submit" class="btn-default btn btn-primary" value="Click Me">
</form>

在我的 spec.ts 文件中

spyOn(fixture.componentInstance, 'submit');
let loginBtn: DebugElement = fixture.debugElement.query(By.css('#sampleBtn'));
loginBtn.nativeElement.click();
fixture.detectChanges();
expect(fixture.componentInstance.submit).toHaveBeenCalled();

按钮上的这个 click() 将依次触发（提交）处理函数。希望这可以帮助。 :)

【讨论】：

我的测试现在看起来不同了，所以我无法测试，但你的回答对我来说很有意义。接受。

【解决方案2】：

以防万一它可以帮助某人：

我已经能够使用 By 选择器和 triggerHandle 在表单中触发提交事件

let form = fixture.debugElement.query(By.css('form'));
form.triggerEventHandler('submit', null);
fixture.detectChanges();
// your component function should have been called

如果您尝试触发按钮中的单击事件，它似乎不会触发 ngSubmit。如果您尝试在表单上执行 .submit，它将不会被 Angular 捕获并会刷新页面。

【讨论】：

我发现这个是-1分，但它是唯一对我有用的答案。

【解决方案3】：

尝试在点击之前添加fixture.detectChanges();。

【讨论】：