编写 jasmine 测试来检查模拟输入控件答案

【问题标题】：Writing a jasmine test to inspect a mock input control编写 jasmine 测试来检查模拟输入控件
【发布时间】：2019-12-05 19:20:43
【问题描述】：

我有一个父组件，它有一个名为“line”的子组件。我必须在父组件中编写一个 jasmine 测试，以调查 line 组件中 Input 控件中的值。

我很难设置模拟输入控件。

我需要测试的代码是这样的：结果 = line.lineForm.controls['valueControl'].value

所以我正在尝试设置一个测试，允许我创建一个模拟控件（假设这是我需要的）并在代码中引用它。

下面的测试代码显示了我一直在尝试的一些内容，但我一直收到错误消息，因为我正在尝试检索未定义对象的值。

valueControl = jasmine.createSpyObj('Input', ['formControlName','value','id']);
valueControl.value = 5;
valueControl.formControlName = 'valueControl';
valueControl.id = 'valueControl';

const controlList = jasmine.createSpyObj('QueryList<Input>', ['filter', 'length', 'forEach', 
      'pop', 'toArray']);
 const lines = jasmine.createSpyObj('QueryList<LineComponent>', ['filter','length', 
   'forEach','pop','toArray']);
 const line = jasmine.createSpyObj('LineComponent', ['enableForm','lineForm',]);
 const lineFormGroup = jasmine.createSpyObj('FormGroup', ['enable', 'controls', 'valueControl', 
    'valueControl2']);
 controlList.length = 1;
 controlList.pop.and.returnValue(valueControl);

 lineFormGroup.controls = controlList;
 lineFormGroup.valueControl = valueControl;

【问题讨论】：

标签： angular jasmine

【解决方案1】：

如果您使用 StubComponent 而不是实际的依赖组件，则可以处理此问题。请参阅下面的链接了解我们如何填充@ViewChild。这有关于如何测试依赖组件以及如何模拟依赖项的详细描述。 https://medium.com/angular-in-depth/angular-unit-testing-viewchild-4525e0c7b756

如果您正在使用@ViewChildren 并注入了依赖组件，那么如果您将依赖组件存根，您的子组件将可以正常工作。您可以使用 LineStubComponent 并在组件声明中添加提供程序。您可以根据正在测试的用例对存根组件进行调整。提供者：[ { 提供：线组件， useClass: LineStubComponent } ]

希望对你有帮助。

【讨论】：