如何在不使用 TestBeds 的情况下模拟 FormGroup 的 get 方法？

Question

我有一个组件，我已将其中一个属性声明为 groupForm : FormGroup。在其中一种方法中，我获取表单字段的值并将其分配给常量，例如：

const value = this.groupForm.get('field').value;

稍后我将使用此常量来检查一个条件并执行以下操作：

if (value.$type === 'Variable') {
    // do something
}

在组件的 .spec.ts 文件中，我正在使用 Jasmin 和 Karma 编写单元测试用例，我试图像这样模拟它：

let groupFormMock = spyOn(component.groupForm, 'get')
groupFormMock.and.returnValues({
    value: {
        $type: "Variable",
        name: "Variable",
        variableType: "Text",
        description: "Variable",
        category: "Actions",
        subCategory: "Variable",
        initialValue: "Test",
        sortOrder: 0
    }
})

但是我收到这个错误：

Argument of type '{ value: { $type: string; name: string; variableType: string; description: string; category: string; subCategory: string; initialValue: string; sortOrder: number; }; }' is not assignable to parameter of type 'AbstractControl'.
  Type '{ value: { $type: string; name: string; variableType: string; description: string; category: string; subCategory: string; initialValue: string; sortOrder: number; }; }' is missing the following properties from type 'AbstractControl': validator, asyncValidator, _parent, _asyncValidationSubscription, and 43 more.

所以，我认为，安慰 JSON.stringify(this.groupForm.get('variableName')) 的值并将其作为模拟对象 return 将解决问题，但这给了我另一个错误：

An error occurred: Converting circular structure to JSON
    --> starting at object with constructor 'Subscriber'
    |     property '_subscriptions' -> object with constructor 'Array'
    |     index 0 -> object with constructor 'SubjectSubscription'
    --- property '_parentOrParents' closes the circle

通过get方法return生成的对象是一个循环对象（对象引用自身），不能被consoled。因此，我需要创建一个 AbstractControl 的模拟对象，以便我可以在模拟方法中使用它和 return 它。或者，欢迎任何解决此问题的解决方案。

我被卡住了，任何线索都会有所帮助。

P.S。 : 我需要在不使用 TestBeds 的情况下执行此操作。

Answer 1

在 .spec.ts 文件中，像这样声明模拟对象：

let formGroupMock: FormGroup;
let formBuilderMock: any;

初始化对象并模拟 FormBuilder 的 group() 方法调用，如：

formGroupMock = new FormGroup({
    field : new FormControl()
});
formBuilderMock = jasmine.createSpyObj('FormBuilder', ['group']);
formBuilderMock.group.and.returnValue(formGroupMock);

将值修补为如下形式：

formGroup.patchValue({
    field : {
        $type: "Variable",
        name: "Variable",
        variableType: "Text",
        description: "Variable",
        category: "Actions",
        subCategory: "Variable",
        initialValue: "Test",
        sortOrder: 0
    }
});

如何在不使用 TestBeds 的情况下模拟 FormGroup 的 get 方法？

How to mock FormGroup's get method, without using TestBeds?

angular

typescript

unit-testing

karma-jasmine

spy