有了这个组件
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'
});
});
}));
测试失败,尚未在间谍上调用保存方法。
但是,当我在浏览器中手动尝试它时,如果有效,则会显示警报。
当我执行 form.submit 而不是 button.click 时,测试也会失败。
当我使用(click)="save(myForm.value)"
在按钮上而不是ngSubmit
在表单上,测试仍然失败,但原因不同。在这种情况下,已调用间谍上的 Save 方法,但传递给它的数据是{}
.
谁能告诉我我在这里缺少什么?