角度4单元测试问题 - 我想设置FormControl字段的值

时间:2017-09-06 14:01:00

标签: angular unit-testing jasmine testbed

我在单元测试中设置名为searchUser的FormControl字段的值时遇到问题。

在下面的代码中,“this.searchUser.value”是一个表单控件。 所以在我的测试中我做了这个,所以我可以设置但是没有工作:

homeComponent.searchUser = new FormControl();
homeComponent.searchUser.value = "ste";

这是我正在测试的组件方法(mapUsers):

mapUsers(users: User[]): User[] {
    let results: User[] = [];

    users.forEach((user: User) => {
      let name = user.name.toLowerCase();
      if (name.includes(this.searchUser.value.toLowerCase())) results.push(user);      
    });

    return results; 
  }

这是我的完整单元测试规范:

import { TestBed, async, inject } from "@angular/core/testing";
import { Observable } from "rxjs/Observable";
import { of } from 'rxjs/observable/of';
import { HttpClient, HttpHandler } from "@angular/common/http";
import { RouterTestingModule } from "@angular/router/testing";
import { FormControl } from "@angular/forms";

import { HomeComponent } from "./home.component";
import { HomeModule } from "./home.module";
import { UserService } from "../../services/user.service";
import { User } from "../../models/user.model";
import { HighlightDirective } from "../../directives/highlight.directive";

describe("HomeComponent", () => {
  let userService;
  let homeComponent;
  let fixture;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HomeModule,
        RouterTestingModule.withRoutes([])
      ],
      providers: [
        HttpClient,
        HttpHandler,
        UserService
      ]
    })
  });

  beforeEach(inject([UserService], service => {
    userService = service;
    fixture = TestBed.createComponent(HomeComponent);
    homeComponent = fixture.componentInstance;
  }));

  it("should return array of users", async(() => {
    // Arrange
    const mockUsers: User[] = [{"name": "Steven"}];
    homeComponent.searchUser = new FormControl();
    homeComponent.searchUser.value = "ste";

    // Act
    const mockResponse = homeComponent.mapUsers(mockUsers);
    fixture.detectChanges();

    // Assert
    expect(mockResponse).toEqual(mockUsers);
  }));

});

我得到的业力错误:

  

失败:无法设置只有一个的[object Object]的属性值   吸气剂

1 个答案:

答案 0 :(得分:-1)

您无法直接设置表单的值。您必须使用这样的patchValue或setValue方法

homeComponent.searchUser.patchValue({[formControlName]:[formControlValue]})