通过FormGroup作为@Input的角度单元测试

Question

我想做一些单元测试，有一个formGroup作为输入从父组件传递到子组件，如何执行。

app.componet.ts

import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { TranslateHelper } from '@app/core/translation';

@Component({
selector: 'basic-info',
templateUrl: './'basic.component.html',
styleUrls: ['./basic.component.scss']
})
export class BasicInfoComponent {
@Input() form: FormGroup;

constructor(private translation: TranslateHelper) {

}

get w(): FormControl {
return this.form.get('y') as FormControl;
}

get x(): FormControl {
return this.form.get('x') as FormControl;
}

get y(): FormControl {
return this.form.get('y') as FormControl;
}

get z(): FormControl {
return this.form.get('z') as FormControl;
}

}

app.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';

import { BasicInfoComponent } from './kyc.component';
import { FormGroup, FormsModule, ReactiveFormsModule, FormControl, FormBuilder } from '@angular/forms';
import { TranslateHelper } from '@app/core/translation';

describe('BasicInfoComponent', () => {
let component: BasicInfoComponent;
let fixture: ComponentFixture<BasicInfoComponent>;
const fb = jasmine.createSpyObj('FormBuilder', ['group']);
const formGroup = new FormGroup(
{ identityVerificationDocumentTypeId: new FormControl('sfs'), addressVerificationDocumentTypeId: new FormControl('test!') });
(<jasmine.Spy>(fb.group)).and.returnValue(formGroup);

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
ReactiveFormsModule,
FormsModule,
TranslateModule.forRoot()
],
providers: [
TranslateHelper,
{ provide: FormBuilder, useValue: fb }
],
declarations: [BasicInfoComponent]
})
.compileComponents();
}));

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

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

describe('control getters', () => {
it('should return x control', () => {
const control = component.form.controls['x'];
expect(control).toBeTruthy();
});

it('should return y control', () => {
const control = component.form.controls['y'];
expect(control).toBeTruthy();
});
});

});

错误

Error: formGroup expects a FormGroup instance. Please pass one in.
Example:

<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
Error: formGroup expects a FormGroup instance. Please pass one in.
Example:

<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});

Answer 1

您需要创建一个formGroup实例。

在您的规范文件(app.component.spec.ts(中，在beforeEach上添加以下内容

beforeEach(() => {
fixture = TestBed.createComponent(BasicInfoComponent);
component = fixture.componentInstance;
// The component expect an input called `form`. You have to supply it in the test
component.form = new FormGroup({
x: new FormControl('', Validators.required),
y: new FormControl('', Validators.required),
z: new FormControl('', Validators.required),
});
fixture.detectChanges();
});