角度：如何使用 setValueControl 对函数进行单元测试

Question

我正在尝试对这个为每个值设置控件的简单函数进行单元测试。

fillFormAssociazioneVeicolo() {
    if (this.aaa) {
      setValueControl(
        this.aaa.targaTelaio,
        this.form.get('targaTelaio')
      );
      setValueControl(
        this.aaa.tipoVeicolo,
        this.form.get('tipoVeicolo')
      );
      setValueControl(
        this.aaa.tipoVeicolo?.descrizione,
        this.form.get('descTipoVeicolo')
      );
      setValueControl(
        this.aaa.nomeCognome,
        this.form.get('nomeCognome')
      );
      setValueControl(
        this.aaa.codiceFiscale,
        this.form.get('codiceFiscale')
      );
    }

这就是 setValueControl 函数的作用：

export function setValueControl(
  value: any,
  control: AbstractControl | null,
  disable: boolean = true
) {
  if (control) {
    control.setValue(value);
    if (disable) disableControl(control);
  }
}

我试过这种方法，但不是正确答案：

it('can fillFormAssociazioneVeicolo', () => {
    component.riempiFormAssociazioneVeicolo();
    expect(setValueControl(component.associazioneVeicolo?.tipoVeicolo,component.form.get('tipoVeicolo')));
  });

Answer 1

首先，setValueControl 对单元测试并不是很好，因为它希望定义函数“disableControl”。为了使一个函数可以很好地测试，它不应该依赖于作用域上的函数，理想情况下它应该是纯粹的......无论如何

export function setValueControl(
  value: any,
  control: AbstractControl | null,
  disable: boolean = true
) {
  if (control) {
    control.setValue(value);
    if (disable) control.disable();
  }
}

现在您可以在您提供的模拟对象上使用 spyOn（假设您使用的是 jasmine）来检查函数是否按预期工作：

let controlMock = {
  setValue:(a) => {},
  disable: () => {}
}

const setValueSpy = spyOn(controlMock, 'setValue')
const disableSpy = spyOn(controlMock, 'disable')

setValueControl("ciao", controlMock)

expect(setValueSpy).toHaveBeenCalledWith("guasto");
expect(disableSpy).toHaveBeenCalled();