Angular 单元测试：如何在函数中传递 FormGroupDirective？

Question

我正在尝试对采用

FormGroupDirective

类型参数的函数进行单元测试。我能够测试所有逻辑，但无法理解应该将什么作为参数来调用

resetForm()

函数。下面是我正在测试的代码。

<form [formGroup]="logForm" #formDirective="ngForm" (submit)="onSave(formDirective)">...</form>

onSave(formDirective: FormGroupDirective) {
  this._http.save(this.logForm.value).subscribe({
    next: response => {
      this._notification.show({ message: response.message, action: 'SUCCESS', panelClass: 'success' });
      formDirective.resetForm();
      this.logForm.reset();
      this.trailerHeading = 'Trailer';
      this.showAllTrailers = false;
      this.trailerList = [];
    }
  });
}

在单元测试时，我在调用

null

方法时传递了

onSave(...)

作为值。执行时正确抛出错误

formDirective.resetForm()

.

我写的测试用例是：

import { HttpClientTestingModule } from "@angular/common/http/testing";
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { RouterTestingModule } from "@angular/router/testing";
import { HttpClientService } from "@service/http-client.service";
import { of } from "rxjs";
import { MaterialModule } from "src/app/material/material.module";
import { TrailerLogComponent } from "./trailer-log.component";

describe('TrailerLogComponent', () => {

    let component: TrailerLogComponent, fixture: ComponentFixture<TrailerLogComponent>,
        _httpService: HttpClientService;

    beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
            imports: [MaterialModule, RouterTestingModule, FormsModule, ReactiveFormsModule, HttpClientTestingModule, BrowserAnimationsModule],
            declarations: [TrailerLogComponent],
            providers: [HttpClientService],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            teardown: { destroyAfterEach: false }
        }).compileComponents();
        _httpService = TestBed.inject(HttpClientService);
        fixture = TestBed.createComponent(TrailerLogComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    }));

    it('should save the trailer log form', () => {
        const response: { message: string } = { message: '' };
        spyOn(_httpService, 'save').and.returnValue(of(response));
        component.onSave(null); // what should I pass here??
        fixture.detectChanges();
        expect(component.trailerHeading).toEqual('Trailer');
        expect(component.showAllTrailers).toBeFalsy();
        expect(component.trailerList.length).toEqual(0);
    });
});

当我传递 null 时调用

component.onSave(null)

时会抛出错误。

我应该在这里传递什么而不是 NULL 以使其正常工作？

Answer 1

你可以尝试创建一个指令实例

component.onSave(new FormGroupDirective());  

或者只是一个具有模拟函数属性的对象

component.onSave({
 resetForm: () => void 0
});