web-dev-qa-db-ja.com

Karma formGroupはFormGroupインスタンスを予期します。 1つを渡してください

エラーの原因を理解しました。テストしているコンポーネントには、FormGroupを@Input() form: FormGroupに渡す必要があります。このコンポーネントをテストするときに渡す方法を理解できません。

fixture.detectChanges()を呼び出すと、各before関数でエラーが発生するため、そのポイントの前にフォームを渡す必要があります。

私の現在のコードはエラーグループが定義されていません：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import {
    ReactiveFormsModule,
    FormsModule,
    Validators,
    FormBuilder
} from '@angular/forms';
import { StaticComponent } from '../../firewall/static/static.component';

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

    beforeEach(
        async(() => {
            TestBed.configureTestingModule({
                declarations: [
                    StaticComponent
                ],
                imports: [
                    CommonModule,
                    ReactiveFormsModule,
                    FormsModule
                ],
                providers: [
                    NetworkService,
                    NetworkValidator,
                    HostNameValidator,
                    NotificationsService
                ]
            }).compileComponents();
        })
    );

    beforeEach(() => {
        fixture = TestBed.createComponent(StaticComponent);
        component = fixture.componentInstance;
        component.ruleForm = FormBuilder.group({
            chain: ['chain', Validators.required],
            ip: [
                '',
                Validators.required,
                this.networkValidator.validateNetwork('ip')
            ],
            action: ['action', Validators.required]
        });
        fixture.detectChanges();
    });

    fit('should be created', () => {
        expect(component).toBeTruthy();
    });
});

テスト中にコンポーネントの@Inputにプレハブフォームを渡すにはどうすればよいですか？FormBuilderを正しく提供できないようです

angularjasminetddkarma-jasmine
7
FussinHussin

これは私があなたのために思いついたテストコンポーネント仕様です。追加したモックFormBuilderと、仕様で提供した方法に注意してください。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TestingComponent } from './testing.component';
import { FormBuilder, Validators } from '@angular/forms';

describe('TestingComponent', () => {
  let component: TestingComponent;
  let fixture: ComponentFixture<TestingComponent>;
  const formBuilder: FormBuilder = new FormBuilder();

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TestingComponent ],
      providers: [ { provide: FormBuilder, useValue: formBuilder } ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestingComponent);
    component = fixture.componentInstance;
    component.ruleForm = formBuilder.group({
      chain: ['chain', Validators.required],
            ip: [
                '',
                Validators.required
            ],
            action: ['action', Validators.required]
    });
    fixture.detectChanges();
  });

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

これを参照する必要がある場合に備えて、これは私のテストコンポーネントです。

import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-testing',
  templateUrl: './testing.component.html',
  styleUrls: ['./testing.component.css']
})
export class TestingComponent implements OnInit {
  ruleForm: FormGroup = new FormGroup({});
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.ruleForm = this.formBuilder.group({
      chain: ['chain', Validators.required],
            ip: [
                '',
                Validators.required
            ],
            action: ['action', Validators.required]
    });
  }
}
16
R. Richards

detectChangesを実行した後、同じエラーに遭遇しました。ただし、コンポーネントのFormGroupはngOnInitで開始され、入力として渡されませんでした。

私の場合の解決策はcomponent under testラッパーコンポーネント内。このプロセスにより、Angularにcomponent under testライフサイクルイベントを介して。そうでなければ自分自身を呼び出さなければならないであろうngOnInit。また、入力を使用してコンポーネントをテストする正しい方法のように感じます。もう少し定型的ですが、この方法は、angularの自然な動作をより厳密に模倣します。

これはこれからのコードの複製です 中程度の記事

  describe('ComponentUnderTestComponent', () => {
    let testHostComponent: TestHostComponent;
    let testHostFixture: ComponentFixture<TestHostComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ComponentUnderTestComponent, TestHostComponent]
    }).compileComponents();
    }));

    beforeEach(() => {
    testHostFixture = TestBed.createComponent(TestHostComponent);
    testHostComponent = testHostFixture.componentInstance;
    testHostFixture.detectChanges();
  });

  it('should show TEST INPUT', () => {
     expect(testHostFixture.nativeElement.querySelector('div').innerText)
         .toEqual('TEST INPUT');
  });

  @Component({
    selector: `Host-component`,
    template: `<component-under-test input="test input"></component-under-test>`
  })
  class TestHostComponent {
  }
});
0
jjr4826