Angular2测试形式:未调用submit方法 [英] Angular2 testing form: submit method not called

问题描述

具有此组件

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)

with this template (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'
        });
    });
}));

测试失败，尚未在间谍程序上调用save方法.但是，当我在浏览器中手动尝试时，如果可行，则会显示警报.如果不单击button，请单击我执行form.submit".

The test fails, the save method hasn't been called on the spy. However, when I manually try it in browser, if works, alert is shown. The test fails too when instead of button.click I do form.submit.

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

When I use (click)="save(myForm.value)" on the button instead of ngSubmit on the form, test still fails, but the reason is different. Save method on the spy has been called in this case, but the data passed to it is {}.

有人可以告诉我我在这里想念什么吗?

Can anyone tell me what am I missing here?

推荐答案

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

To add to Juanmi's answer for the test to be fully complete, the event have to be triggered by clicking on the button, because for example, if the button is moved out of the tag, the application would fail, but the test would still pass.

通过调用本机元素(而非调试元素)的"click()"方法，我设法解决了上述问题.请参见下面的代码.请注意，在下面的代码中，我使用的是ReactiveForms语法，但这对测试没有影响.

I have managed to go around the problem above, by calling the 'click()' method of the native element (not the debug element). See the code below. Note that in my code below, i'm using the ReactiveForms syntax, but it shouldn't make a difference for the test.

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

在我的spec.ts文件中

And in my spec.ts file

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

按钮上的click()会依次触发(提交)处理函数.希望这可以帮助.:)

This click() on the button would, in turn, trigger the (submit) handler function. Hope this helps. :)

这篇关于Angular2测试形式:未调用submit方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！