我目前正在做一个用Angular13做的项目,由于这周没有更多的工作要做,我决定用Jest做一些单元测试,以提高我的编码技能。
在这个例子中,我想测试一个方法reset(),正如它的名字所说,它重置了表单,但是我找不到测试它的方法。
我提供一些代码:
组件.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
重置所有表单,但我简化了代码片段,因为我只想重置一些特定字段,而不是所有表单)
组件规格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)
})
1条答案
按热度按时间mdfafbf11#
重置字段后,该字段的值应该是什么?
这归结为表单的实现/初始化。
(
form.reset()
)重置FormGroup,将所有后代标记为原始和未触及,并将所有后代的值设置为它们的默认值或null(如果未提供默认值)。为了测试你的方法,你应该将表单设置为dirty和touched,并给它打上一些值。然后,一旦完成,检查字段是否是pristine,intacted和
null
(假设你的例子没有默认值)。