web-dev-qa-db-fra.com

Karma formGroup attend une instance de FormGroup. Veuillez en passer un

Je comprends la racine de l'erreur, le composant que je teste nécessite un FormGroup à passer dans son @Input() form: FormGroup. Je n'arrive pas à comprendre comment en transmettre un lors du test de ce composant.

Il y a une erreur dans ma avant chaque fonction lorsque j'appelle fixture.detectChanges() donc le formulaire doit être passé avant ce point

mon code actuel est le groupe d'erreur n'est pas défini:

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

Comment puis-je passer sous une forme préfabriquée à mon @Input du composant pendant le test? Je ne peux pas sembler fournir correctement FormBuilder

angularjasminetddkarma-jasmine
7
FussinHussin

Il s'agit d'une spécification de composant de test que j'ai élaborée pour vous. Remarquez le FormBuilder moqué que j'ai ajouté et la façon dont je l'ai fourni dans la spécification.

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

Ceci est mon composant de test au cas où vous auriez besoin de vous y référer.

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

J'ai rencontré la même erreur après avoir exécuté detectChanges. Le FormGroup de mon composant, cependant, a été lancé dans ngOnInit, pas passé en entrée.

La solution pour mon cas était d'envelopper le component under test dans un composant wrapper. Ce processus forcera Angular pour mettre le component under test à travers les événements du cycle de vie, par exemple ngOnInit que vous auriez autrement à vous invoquer. Cela semble également être la bonne façon de tester un composant avec des entrées. C'est un peu plus standard, mais cette méthode imite le comportement naturel de l'angulaire de plus près.

Voici une reproduction du code de cette article moyen

  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