Angular 上 switch 语句的单元测试答案

【问题标题】：Unit-Test for a switch statement on AngularAngular 上 switch 语句的单元测试
【发布时间】：2022-01-06 08:32:48
【问题描述】：

我是角度单元测试的新手，我不知道如何测试这个开关：

  displayBadge(text: any) {
    switch (text) {
      case 'blabla':
        return 'badge badge-pill badge-success';
      case 'lalala':
        return 'badge badge-pill badge-secondary';
      case 'uuuu':
        return 'badge badge-pill badge-warning';
      case 'ooooo':
        return 'badge badge-pill badge-warning';
      case 'eeee':
        return 'badge badge-pill badge-warning';
      case 'zzzzz':
        return 'badge badge-pill badge-dark';
      case 'aaaaa':
        return 'badge badge-pill badge-dark';
      case 'qqqqq':
        return 'badge badge-pill badge-success';
      case 'ccccc':
        return 'badge badge-pill badge-warning';
      case 'rrrrr':
        return 'badge badge-pill badge-success';
      case 'ttttt':
        return 'badge badge-pill badge-warning';
      case 'fffff':
        return 'badge badge-pill badge-success';
      default:
        return '';

我在 VSCODE 上使用 Simontest 插件，代码覆盖率总是告诉我我缺少 80% 的覆盖率，这就是这个开关。

我在我的 spec.ts 文件中尝试过这种方式：

it('text aaaaa', () => {
    component.text ='aaaaa'
    component.displayBadge(component.text);
    expect('badge badge-pill badge-secondary');
  });

但它不起作用。

文本在我的 ts 中是这样定义的：

@Input()
  text!: any;

我看到有其他关于测试开关的帖子，我已经尝试了我在堆栈和 Google 上看到的所有内容，但 SimonTest 总是告诉我这个函数没有经过测试。

【问题讨论】：

我认为对 switch 语句进行单元测试不是一个好主意：您使用的是 TypeScript，因此 tsc 将验证并数学证明（在其内部的、仅限类型理论的 mini-theorem-provider) 中，例如 switch 语句。另外，可能也很脆。
如果不是我的一位客户的要求，我不会这样做。我认为测试应该只验证是否通过在文本中输入值“aaaaa”开关返回为该输入选择的正确标志。看起来很简单，但我找不到方法。
“如果不是我的一个客户的要求，我不会这样做” - 在这种情况下，我希望您添加一个额外的“customer-has-incredibly-ill-通知-要求-住宿费”然后告诉他们阅读这个：levelup.gitconnected.com/…

标签： angular typescript testing switch-statement angular-unit-test

【解决方案1】：

由于 displayBadge() 正在返回您正在测试的值，因此应该可以这样：

it('text aaaaa', () => {
 expect(component.displayBadge('aaaaa')).toEqual('badge badge-pill 
 badge-secondary');
});

【讨论】：

感谢您的回答，但它不起作用。
更新了答案以删除一些代码。如果这不起作用，您看到的测试错误是什么？
当我访问 test.html 文件（在代码覆盖率文件夹中）时，它会显示如下：“函数未覆盖”悬停在函数名称上，“语句未覆盖”悬停在每个顶部每个案件的回报。