如何在 angular 中测试函数？

Question

这个应用组件中的功能非常简单，需要为它编写测试用例。

我试过的代码。

app.component.html

<button
    class="click"
    (click)="clickHandler('dummy data')"
  >
    Click Here
  </button>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'root-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}

clickHandler(value: string) {
    if (value) {
    }
  }
}

这是我对上面的代码进行的测试，

app.component.spec.ts

  it('should check clickHandler function', fakeAsync(() => {
    spyOn(component, 'clickHandler');
    let button = fixture.debugElement.nativeElement.querySelector('button');
    button.click();
    fixture.detectChanges();
    tick();
    expect(component.clickHandler).toHaveBeenCalled();
  }));

我不确定是否需要这么多东西来检查功能是否存在。

要求：我需要编写测试用例来检查应用程序组件中的clickHandler功能。

为此，我已经尝试了上面的方法，这导致了成功案例，但我仍然遇到测试覆盖率错误，例如，

如何在查看测试覆盖率时消除此错误。

编辑：

根据@Gérôme Grignon 的回答，如果我修改 app.component.ts 文件但我不能修改文件并且我只需要在 app.component.spec.ts 文件，因此任何人都可以建议只处理 truthy 值的方法，就像我上面提到的那样。

    clickHandler(value: string) {
      if (value) {
      }
    }

我已经试过了，

expect(component.clickHandler('foo')).toBeTruthy();
expect(component.clickHandler('bar')).toBeFalsy();

但是我得到了这样的错误，

Expected true not to equal true.

Answer 1

这里你在做集成测试：你不测试功能，而是测试组件和模板之间的集成。

这是一个测试您的功能的示例（添加一些随机逻辑）：

clickHandler(value: string) {
  if (value === 'foo') {
    return true;
  }
  return false;
}

it('should return value', () => {
expect(component.clickHandler('foo')).toEqual(true);
expect(component.clickHandler('bar')).not.toEqual(true);
})

如何在 angular 中测试函数？

How to test a function in angular?

unit-testing

jasmine

karma-jasmine

angular

angular8