测试响应式表单在重置时为空

Question

我目前正在做一个用Angular13做的项目，由于本周没有更多的工作要做，我决定用Jest做一些单元测试，以提高我的编码技能。

在这个例子中，我想测试一个方法reset()，正如它的名字所说，它重置了表单，但是我找不到测试的方法。

我提供了一些代码:

component.ts

this.myForm= this.fb.group({
a: new FormControl(),
b: new FormControl(),
c: new FormControl(),
});
// Clean form
resetForm() {
this.myForm.get('a')?.reset();
this.myForm.get('b')?.reset();
this.myForm.get('c')?.reset();
}

(我知道您可以使用this.myForm.reset重置所有表单，但我简化了代码片段，因为我只想重置一些特定字段，而不是所有表单)

component.spec.ts

it('resets form', () => {
const form = component.myForm;
component.resetForm()
expect(form.get('a')).toBe('')
expect(form.get('b')).toBe('')
expect(form.get('c')).toBe('')
})

我做得对吗?当它被重置时，应该是字段的值是什么?

(更新)

it('reset form', () => {
const form = component.myForm;
form.markAllAsTouched()
form.markAsDirty()
component.resetForm()
form.markAsUntouched()
form.markAsPristine()

expect(form.get('a')).toBe(null)
expect(form.get('b')).toBe(null)
expect(form.get('c')).toBe(null)
})

Answer 1

当它被重置时，应该是该字段的值?

这归结为你的窗体的实现/初始化。来自文档:

(form.reset())重置FormGroup，标记所有后代为原始和没有并将所有后代的值设置为它们的默认值，或null如果没有提供默认值。

为了测试你的方法，你应该设置表单为dirty和touched，并给它打一些补丁。然后，一旦完成，检查字段是否为原始,没有和null(假设你的例子没有默认值)。