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

Question

我在单元测试中设置名为 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] 的属性值，它只有一个 吸气剂

Answer 1

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

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