Тестовый модуль формы Angular 5, управляемый шаблоном - не удается прочитать свойство 'form' из неопределенного

Question

Здравствуйте, я довольно новичок в тестировании.Я много пытался протестировать функцию, но не смог добиться успеха даже после прочтения всех статей Stackoverflow по этому вопросу.Я надеюсь, что вы найдете способ помочь мне ..

Вот выдержка из моего HTML:

<form #myForm="ngForm">

Вот один из моих компов:

@ViewChild('myForm')myForm: NgForm;

и у меня есть функция проверки:

public valider(): void {
    if (this.myForm.form.valid) {
        //doSomething
    } else {
        console.log('your form is not valid.');
    }
}

Наконец вот тест, который я пытаюсь запустить:

it('should send an error when the form is not valid', () => {
    fixture = TestBed.createComponent(myComponent);
    comp = fixture.componentInstance;
    fixture.detectChanges();
    fixture.whenStable().then(() => {
        fixture.detectChanges();
        expect(comp.myForm.form.invalid).toBeTruthy();
        comp.valider();
    });
});

Я получаю ошибку:

Unhandled Promise rejection: ',' Cannot read property 'form' of undefined '

Большое спасибо, ребята

Answer 1

Я немного изменил ваш компонент.

import {Component, ViewChild} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('myForm') myForm: NgForm;

  valider = (): boolean => this.myForm.form.valid;
}

И тогда ваши тесты должны выглядеть так:

import {TestBed, async, ComponentFixture} from '@angular/core/testing';
import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';

describe('AppComponent', () => {

  const initialFormValid = true;
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FormsModule,
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

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

  it('should be defined', () => {
    expect(component).toBeDefined();
  });

  it('#valider should return forms valid state', () => {
    expect(component.valider()).toEqual(initialFormValid);
  });

});