如何为 Angular 组件单元测试模拟 FormBuilder

Question

我在 Angular 9 项目中工作。

我有一个组件接受 formBuilder 作为来自父组件的输入。这是我的子组件（我正在测试的那个）：

export class ChildComponent implements OnInit {
  @Input() parentForm: FormGroup;  //this is coming from the parentComponent

  ngOnInit(): void {
    if (this.parentForm) {
      this.filteredSelectables = this.parentForm
        .get("recipientTypes")
        ...
    }
  }
...

我想为这个组件编写测试，但我需要创建一个测试可以使用的表单（或者我需要模拟父组件和 return 我想要的表单？）

我已将 FormBuilder 添加到 testBed 提供程序，但我仍然无法弄清楚如何制作我可以用来测试的模拟表单。 'should create' 测试通过了，但我无法测试其他任何东西，因为 parentForm 不能为它们。这是我当前的测试：

describe("ChildComponent", () => {
  let component: ChildComponent;
  let fixture: ComponentFixture<ChildComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ChildComponent, MatAutocomplete],
      providers: [FormBuilder],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(ChildComponent);
        component = fixture.componentInstance;
      });
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ChildComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it("should create", () => {
    expect(component).toBeTruthy();
  });
...

我试过这样创建表单：

component.parentForm = FormBuilder.group({
      recipientTypes: new FormControl(
        {
          value: ["mock"],
          disabled: true
        },
        Validators.required
      )
    });

并将其添加到 beforeEach() 甚至实际测试中。但是我得到一个错误。

我想也许我需要模拟 parentComponent 并让它发送一个 formBuilder？这是我的父组件：

export class ParentComponent implements OnInit, OnDestroy {
  parentForm: FormGroup;

  constructor(
    private router: Router,
    private formBuilder: FormBuilder
  ) {}

  ngOnInit() {
    this.setFormTemplate();
  }

  setFormTemplate() {
    this.templateForm = this.formBuilder.group({
      name: new FormControl(
        {
          value: this.name,
          disabled: true
        },
        Validators.required
      ),
      recipientTypes: new FormControl(
        {
          value: this.recipientTypes,
          disabled: true
        },
        Validators.required
      )
    });
  }
...

如何为我的测试创建一个 formBuilder？

Answer 1

试试吧！：

import { FormBuilder } from '@angular/forms';
....
describe("ChildComponent", () => {
  let component: ChildComponent;
  let fixture: ComponentFixture<ChildComponent>;
  let formBuilder: FormBuilder;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ChildComponent, MatAutocomplete],
      providers: [FormBuilder], // add this as a provider
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
      .compileComponents()
      .then(() => {
        fixture = TestBed.createComponent(ChildComponent);
        component = fixture.componentInstance;
      });
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ChildComponent);
    component = fixture.componentInstance;
    formBuilder = TestBed.inject(FormBuilder); // get a handle on formBuilder
    // add the mock data here
    component.parentForm = formBuilder.group({ 
      recipientTypes: new FormControl(
        {
          value: ["mock"],
          disabled: true
        },
        Validators.required
      )
    });
    // this fixture.detectChanges will kick off the ngOnInit
    fixture.detectChanges();
  });

  it("should create", () => {
    expect(component).toBeTruthy();
  });

如何为 Angular 组件单元测试模拟 FormBuilder

How to mock a FormBuilder for Angular Component Unit Test

angular

testing

angular-reactive-forms

formbuilder

angular9