将 FormGroup 作为 @Input 传递的 Angular 单元测试

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();
  });