如何为 Angular 中的 if else 语句编写测试用例 (Jasmine)

Question

我正在为 angular 中的自定义指令编写测试用例。这是我在 stackblitz 中的代码。谁能告诉我如何覆盖突出显示的 if else 语句。

if (trimmedValue.length > 14) {
  // how to cover this statement
  trimmedValue = trimmedValue.substr(0, 14);
}

if (trimmedValue.substr(6, 2) !== '') {
  // how to cover this statement
  nricNumber.push(trimmedValue.substr(6, 2));
}

Answer 1

首先，您要将指令中的 hostlistener 更改为这样或类似的内容，具体取决于您要侦听的事件是：

@HostListener('keydown', ['$event'])

由于您将指令放在输入上，因此您不需要在指令中查找输入，这也将使它只监视宿主元素上的 'keydown'。 HostListener 的第一个参数应该是您正在监听的事件，而不仅仅是元素的名称。

所以现在，如果您将测试更改为发出一个 keydown 事件，并且输入中的值的长度大于 14，您应该点击第一个 if 语句，如下所示：

it('should input value length > 14', () => {
    fixture = TestBed.createComponent(TestAutoDashNricComponent);
    const input = fixture.debugElement.query(By.directive(AutoDashNricDirective));

    // set value of input to something longer than 14
    input.nativeElement.value = '85060135229900000000123';

    const event = ({
      // set target to the input so you don't need to get it from the directive itself
      target: input.nativeElement, 
    } as unknown) as KeyboardEvent;

    // trigger keydown with created event
    input.triggerEventHandler('keydown', event);

    // check length of input value
    expect(input.nativeElement.value.length).toBe(14);
});

另请注意，我将目标设置为指向调用指令的输入。这样你就不需要在指令本身内部寻找 'input'。

通过此示例，您应该能够通过执行类似的操作来命中其他 if else 语句。

如何为 Angular 中的 if else 语句编写测试用例 (Jasmine)

How to write test case for if else statement in Angular (Jasmine)

unit-testing

code-coverage

karma-jasmine

angular