我是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运行正常,这与单元测试无关。
答案 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();
}));