茉莉花:如何测试现有数据是否通过patchValue传递?

时间:2018-07-02 20:20:47

标签: angular unit-testing jasmine karma-jasmine

我有一个函数loadUsers。当用户单击其名称,然后单击“编辑”按钮时,他们将进入带有输入字段的表单。他们的数据(名称,电子邮件)被加载到这些输入字段中。用户可以从那里编辑他们的信息。 现在,我正在尝试对是否已成功将用户的数据加载到用户表单中进行单元测试。更具体地说,我正在尝试测试 patchValue 。我想确保使用正确的数据。我编写了一个测试函数,但似乎无法弄清楚如何检查是否使用了正确的数据。我基本上只是想检查数据是否正在发送和检索,我不想在DOM中检查它。

在测试中,我为模型创建了模拟数据。然后,我为数据创建了一个patchValue,但是不确定如何在Jasmine中做到这一点,而无需大量重写我的函数。然后,我监视我的服务。该服务(getData)从UserId网址检索用户信息。从那里我希望期望模型中的模拟数据与patchValue中的数据匹配。我的方法订阅一个变量,并将该变量设置到每个字段以检索数据。我不确定如何适当地设置它,然后检查该变量而不会使我的测试为假阳性。我是否使这个复杂化了?谢谢。

功能:

LoadUser() {
    this.httpService.getData(AppConfig.URL_UserById + "?UserID=" + this.userId)
  .subscribe((res: any) => {
        this.frmUser.patchValue({

          FirstName: res.FirstName,
          MiddleName: res.MiddleName,
          EmailAddress: res.EmailAddress,
          LastName: res.LastName

        });

表格:`

createUserForm() {
    this.frmUser = this.fb.group(
      {
        UserID: [],
        FirstName: ["", [Validators.required, Validators.maxLength(50)]],
        MiddleName: [],
        LastName: ["", [Validators.required, Validators.maxLength(50)]],
        EmailAddress: [{ value: '', disabled: this.userId > 0 }, [Validators.required, Validators.email]],
        UserAccessDetail: this.fb.array([this.createUserProgram()]),
        Status:[]
      }
    )
  }`

测试规范:

    fit('should set patchValue to the form (frmUser)', () => {

    //create the mock data, mocking a real model with fake data
  const mockData: User = {
  UserID: 1,
  FirstName: 'Test',
  MiddleName: 'Test',
  LastName: 'Test',
  EmailAddress: 'Test@Test',
  Status: true,
  UserAccessDetail: [],

  }

    let url = AppConfig.URL_UserById + "1" + this.userId
      //create form
      let form = userComponent.frmUser;
      //create patchValue
      httpService.getData(url).subscribe((res: any) => {
        form.patchValue({
          FirstName: res.FirstName,
          MiddleName: res.MiddleName,
          EmailAddress: res.EmailAddress,
          LastName: res.LastName
        });

        spyOn(httpService, 'getData').and.returnValue(Observable.of(url));
        userComponent.ngOnInit();
        userComponent.loadUser();



        expect(res.FirstName).toBe('Test');
      })

运行测试时,出现以下错误:TypeError: this.http.get is not a function

0 个答案:

没有答案