如何对 Angular @Input 的 setter 和 getter 进行单元测试答案

【问题标题】：How to unit test an Angular @Input's setters and getters如何对 Angular @Input 的 setter 和 getter 进行单元测试
【发布时间】：2019-04-13 12:37:48
【问题描述】：

如何获得组件@Input 的单元测试覆盖率，该组件是使用setter 和getter 进行字符串化的对象。代码运行良好，问题是我无法获得完整的单元测试覆盖率。

选择器看起来像：

<products-list [products]="{"name": "Testing Name", "value": "TN", "isRequired": false}"></products-list>

组件：

private _products: any;

@Input('products')
set products(list: string) {
   this._products = JSON.parse(list);
}
get products() {
   return this._products;
}

【问题讨论】：

您目前的测试是什么？组件对数组有什么作用？你的组件的公共接口只是它接受一个字符串输入，一旦它被解析，它可能会在某个地方使用；您不需要直接测试 getter 和 setter，因为这是一个实现细节。
如果我直接从我的测试中调用该属性，set 函数会覆盖而不是 get，所以如果你回答正确，我不应该测试 get 函数。

标签： angular unit-testing jasmine

【解决方案1】：

对于 set 和 get 方法的编写测试用例，使用 async()

it('should call', async(()=>{
component.products = [];  // list
expect(component._products).toEqual([]);
}));

试试这个。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

请参阅以下堆栈闪电战 - https://stackblitz.com/edit/angular-testing-jq4bdj

注意测试用例执行 getter [查看控制台日志]

【讨论】：