无法绑定到formGroup,因为它不是'form'的已知属性

时间:2019-04-30 13:47:26

标签: angular unit-testing jasmine

我是Angular单元测试的新手。我正在尝试测试模态组件,但不断出现以下错误: “无法绑定到'formGroup',因为它不是'form'的已知属性。”

我尝试将FormGroup,FormBuilder,Validators传递到测试提供程序中(因为它们是我正在测试的代码中使用的东西,因此一次一次将它们全部添加在一起),我还尝试添加ReactiveFormsModule它(与其他提供者一起,也没有他们),但继续得到错误。

就像我说的那样,我是新手,所以要保持柔和。

组件:

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Benefit } from '../../models/benefit';
import { PolicyBase } from '../../models/policy-base';
import { DatePipe } from '@angular/common';
import { DataService } from '../../services/data-service/data-service';
import { Strings } from '../../models/strings';

@Component({
  selector: 'app-benefit-edit-modal',
  templateUrl: './benefit-edit-modal.component.html',
  styleUrls: ['./benefit-edit-modal.component.css']
})
export class BenefitEditModalComponent implements OnInit, OnChanges {

  @Input() policy: PolicyBase;
  @Input() mainForm: FormGroup;
  @Input() selectedBenefitToChange: Benefit;
  @Input() selectedBenefitToChangeIndex: number;

  headerText: string;
  private isAmountEditAvailable: boolean;

  constructor(private fb: FormBuilder,
      private dataService: DataService) { }

  ngOnInit() {
    this.mainForm.addControl('changeBenefitModalForm', this.fb.group({
      benefitType: [''],
      amount: [''],
      issueDate: [''],
      ceaseAge: ['']
    })) ;
  }

Component.Spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { FormGroup, FormBuilder, Validators, FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
import { AppRoutingModule } from 'src/app/app-routing.module';

import { BenefitMock } from '../../mock-components/mock-models.ts/benefit-mock';
import { Benefit } from '../../models/benefit';
import { PolicyBase } from '../../models/policy-base';
import { DataService } from '../../services/data-service/data-service';
import { Strings } from '../../models/strings';
import { BenefitEditModalComponent } from './benefit-edit-modal.component';
import { DataServiceHelper } from '../../services/data-service/data-service-helper';
import { AlertService } from '../../services/alert-service.service';
import {WindowRef} from '../../services/window-ref-service';
import { APP_BASE_HREF } from '@angular/common';

describe('BenefitEditModalComponent', () => {
  let component: BenefitEditModalComponent;
  let fixture: ComponentFixture<BenefitEditModalComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
        BenefitEditModalComponent
      ],
      imports: [
        HttpClientModule, 
        RouterTestingModule,
        Ng4LoadingSpinnerModule,
      ],
      providers: [
        DataService, 
        DataServiceHelper, 
        AlertService,
        FormGroup,
        FormBuilder,
        Validators,
        {provide: APP_BASE_HREF, useValue: '/inforceillustrations/'}, WindowRef
      ],
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeDefined();
  });
});

在app.module.ts中,我们导入FormsModule和ReactiveFormsModule并导出ReactiveFormsModule ...,如果有区别的话。

App运行正常,这与单元测试无关。

1 个答案:

答案 0 :(得分:1)

您必须在导入数组中导入ReactiveFormsModule

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ 
        BenefitEditModalComponent
      ],
      imports: [
        HttpClientModule, 
        RouterTestingModule,
        Ng4LoadingSpinnerModule,
        ReactiveFormsModule       // <---- this line
      ],
      providers: [
        DataService, 
        DataServiceHelper, 
        AlertService,
        FormGroup,
        FormBuilder,
        Validators,
        {provide: APP_BASE_HREF, useValue: '/inforceillustrations/'}, WindowRef
      ],
    })
    .compileComponents();
  }));