Юнит-тест кармы для метода машинописи, который принимает NgForm в качестве параметра

Question

Я пытаюсь написать модульный тест для метода:

public addCred:boolean=true;
public credName:any;

public addMachineCredential(credentialForm: NgForm) {
    this.addCred = true;
    this.credName = credentialForm.value.name;
}

В моем тестовом классе:

  it('should add machine credential', () => {
    var machineCredentialForm: NgForm = new NgForm(null, null);
    machineCredentialForm.controls['name'].setValue('name');
    machineCredentialForm.controls['username'].setValue('username');
    machineCredentialForm.controls['password'].setValue('password');
    component.addMachineCredential(machineCredentialForm);
    expect(component.addCred).toBe(true);
    expect(component.credName).toBe("name");
  });

Я получаю ошибку: TypeError: Cannot read property 'setValue' of undefined

Как проверить функцию "addMachineCredential"?

Answer 1

Чтобы иметь возможность модульного тестирования модуля, вы должны использовать ReactiveForms вместо форм, управляемых шаблоном, как упомянуто в комментарии. Я провел рефакторинг (и придумал пример, основанный на опубликованном вами фрагменте ...) и пришел с возможным решением:

Итак, это один из способов, которым вы можете реорганизовать свой код, чтобы он работал.

ваш компонент:

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

@Component({
  selector: 'app-unit-test',
  template: `
  <p>Works</p>
  `,
  styleUrls: ['./unit-test.component.css']
})
export class UnitTestComponent {
  public addCred: boolean = true;
  public credName: any;

  form: FormGroup = new FormGroup({
    name: new FormControl('', [])
  });

  constructor() {}

  public addMachineCredential(credentialForm: FormGroup) {
    this.addCred = true;
    this.credName = credentialForm.controls.name.value;
  }
}

ваш файл спецификаций:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { UnitTestComponent } from './unit-test.component';

fdescribe('UnitTestComponent', () => {
  let component: UnitTestComponent;
  let fixture: ComponentFixture<UnitTestComponent>;

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

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

  it('should add machine credential', () => {
    component.form.controls.name.setValue('name');
    component.addMachineCredential(component.form);
    expect(component.addCred).toBe(true);
    expect(component.credName).toBe('name');
  });
});

Не забывайте, что компонентный модуль должен объявлять ReactiveFormsModule, поэтому ..

ваш модуль:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UnitTestComponent } from './Questions/unit-test/unit-test.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    UnitTestComponent,
    FormsModule,
    ReactiveFormsModule
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Надеюсь, это поможет.