Me enfrento a un problema para escribir un caso de prueba de unidad en jazmín para mi aplicación angular. Tener un formulario reactivo e intentar restablecer un control de formulario en particular con un clic de botón. Aunque el escenario debería ser lo suficientemente simple como para probarlo, parece que me falta algo aquí.

A continuación se muestra el fragmento de código de la aplicación.

aplicación.componente.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>

aplicación.componente.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(); } }

Código de prueba de la unidad

 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. });

Angular: 10.0.14

CLI angular: 10.0.8

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