故障单元测试角度无功形式控制重置按钮点击

Question

我面临一个问题，要用jasmine为我的angular应用程序编写一个单元测试用例。有一个反应式窗体，并尝试通过单击按钮重置特定的窗体控件。尽管这个场景应该足够简单，可以进行测试，但我似乎在这里遗漏了一些东西。

以下是该应用程序的代码片段。

app.component.html：

<form [formGroup]="userForm" novalidate (ngSubmit)="onSubmit()">
<div>
<input
type="text"
id="fNameFld"
name="fName"
formControlName="fName"
placeholder="First Name"
/>
<button (click)="clearField('fName')" id="clrFName">
Clear First Name
</button>
</div>
<div>
<input
type="text"
id="lNameFld"
name="lName"
formControlName="lName"
placeholder="Last Name"
/>
<button (click)="clearField('lName')" id="clrLName">Clear Last Name</button>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>

app.component.ts

import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
name = 'Angular ' + VERSION.major;
userForm: FormGroup;
constructor(private readonly fb: FormBuilder) {}
ngOnInit() {
this.userForm = this.fb.group({
fName: this.fb.control(null),
lName: this.fb.control(null),
});
}
onSubmit() {
console.log('Submitted Data', this.userForm.value);
}
clearField(controlName: string) {
this.userForm.get(controlName).reset();
}
}

单元测试代码

it('should clear fName control when the "Clear First Name" button is clicked', () => { 
const spy = spyOn(component, 'clearField');
const clearBtn = fixture.debugElement.query(By.css("button#clrFName"));
const form = component.userForm;

form.patchValue({
'fName': 'John,
'lName': 'Doe'
});

clearBtn.nativeElement.click();
fixture.detectChanges();
expect(spy).toHaveBeenCalledTimes(1);  // passes
expect(spy).toHaveBeenCalledWith('fName');  // passes
expect(form.get('fName').value).toBeNull();  // fails: Expected 'John' to be null.
});

角度：10.0.14

Angular CLI:10.0.8

StackBlitz：https://angular-ivy-fc6rik.stackblitz.io

Answer 1

看起来像是在嘲笑clearField。当你模拟它时，添加这个来实际执行它的内容：

const spy = spyOn(component, 'clearField').and.callThrough();

所以每次调用clearField时，它都会触发间谍(这样你就知道它是否被调用了(，并执行它的内容。