0

我有一个车间编辑组件（按顺序）：

  • 建立表格
  • 检索车间进行编辑
  • 使用车间值更新表单值

这是代码：

ngOnInit() {
  this.buildForms();
  this.initialize();
}

async initialize(): Promise<void> {
  const id = this.route.snapshot.params.id;

  this.workshop = await this.workshopService.find(id); // in real this is in a trycatch block
  this.updateFormValues();
}

buildForms(): void {
  this.form = ... // not important, this is not the problem
  this.discussesForm = this.formBuilder.group({
    array: this.formBuilder.array([], Validators.required),
  });
}

updateFormValues(): void {
  this.form.patchValue(this.workshop);
  this.workshop.ListDebates.forEach((discussion, index) => {
    this.addDiscussion();
    (this.discussesForm.get('array') as FormArray).at(index).patchValue({ // This line will throw error while UT.
      title: discussion.Title, description: discussion.Description, key: discussion.Key,
    });
  });
}

addDiscussion(): void {
  (this.discussesForm.get('array') as FormArray).push(this.formBuilder.group({
    title: [null],
    description: [null],
    key: [null],
  });
}

Workshop.ListDebates看起来像：

[
  {
    Key: 1,
    Title: 'title',
    Description: 'description',
  },
]

因此，上面的所有代码都可以正常工作，但我正在尝试对updateFormValues方法进行单元测试。

这是我尝试过的：

it('should update form values', () => {
  spyOn(component, 'addDiscussion');
  component.workshop = { Title: 'fake title', ListDebates: [
    { Key: 1, Title: 'fake', Description: 'fake' },
    { Key: 2, Title: 'fake', Description: 'fake' },
  ]} as any as IColabEvent;
  component.updateFormValues();
  expect(component.form.value.Title).toEqual('fake title'); // test OK
  expect((component.discussesForm.get('array') as FormArray).controls.length).toEqual(2); // test KO, expected 0 to be 2
  expect((component.discussesForm.get('array') as FormArray).at(0).value).toEqual(...); // test KO (not runned)
});

每次我收到错误：无法读取未定义的属性“patchValue”（在updateFormValues方法中）。

我已经尝试了很多事情（以及添加fixture.detectChanges()之类的随机事情），但我找不到修复它的方法。

奇怪的是 addDiscussion 被调用了 2 次，所以我想知道为什么我的 FormArray 控件是未定义的。

我已经 console.log() 了一些东西，看起来addDiscussion被调用但没有像它必须做的那样推动一个组。

我重复自己，但在真正的应用程序中它按预期工作。

4

1 回答 1

1

而不是你的测试用例有问题，实际上是你的代码有问题。您无需先使用addDiscussion创建具有null值的对象，然后使用patchValue设置值。相反，在创建表单组本身时设置值。更改您的addDiscussion函数以接受discussion参数。

addDiscussion(discussion = {}): void {
    this.discussesForm.get('array').push(this.formBuilder.group({
        title: discussion.Title || null,
        description: discussion.Description || null,
        key: discussion.Key || null
    }));
}

然后在updateFormValues你的foreach循环中，去掉patchValue代码并通过discussion。

this.workshop.ListDebates.forEach(discussion => {
    this.addDiscussion(discussion);
});

除此之外，正如评论中已经提到的，addDiscussion不再需要监视，因为您的测试依赖于它。完成此操作后，您的测试应该可以正常工作。

于 2020-01-06T23:06:16.050 回答