UT 由于未定义的 FormArray 控件而未通过，而必须定义该控件

Question

我有一个研讨会编辑组件（按顺序）：

• 构建表单
• 检索要编辑的创意工坊
• 使用创意工坊值更新表单值

代码如下：

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 被调用，但没有像它必须做的那样推动一个组。

我重复一遍，但在实际应用中它按预期工作。

Answer 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);
});

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