如何在Angular 4中创建带有控件的假表单?

时间:2017-09-18 12:38:12

标签: angular unit-testing

我有一个接收表单并将控件标记为脏的函数。

我无法弄清楚如何手动创建虚假表单的实例以用作单元测试中的替代品。

markControlDirty(form: NgForm) {
  let firstControl = form.controls[Object.keys(form.controls)[0]];
  firstControl.markAsDirty();
}

我在本网站的其他答案中尝试了以下代码段,但它没有包含任何控件,因此我的代码在Object.keys(form.controls)失败,因为form.controls未定义:

let fakeForm = <NgForm> {
  value: {
    name: 'Hello',
    category: 'World'
  }
};

1 个答案:

答案 0 :(得分:1)

您可以使用FormBuilder从您希望的任何对象创建虚拟表单组。

然后,如果你需要模拟一些行为,jasmine提供了spyOnProperty方法,它允许你模拟值/控件或任何其他readOnly属性的返回(这在处理表单时非常有用)。 / p>

https://jasmine.github.io/api/edge/global.html#spyOnProperty

如何创建我的虚拟表单:

const myModel = {
   name: 'Hello',
   category: 'World'
};
const fb = new FormBuilder();
const form = fb.group(myModel);

然后你可以通过spyOnProperty监视你想要的任何事情。

例如:

spyOnProperty(form, 'valid', 'get').and.returnValue(false);