如何在Angular（Jasmine）中为if else语句编写测试用例

Question

我正在用角度编写自定义指令的测试用例。这是我在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的第一个参数应该是您正在侦听的事件，而不仅仅是元素的名称。

所以现在，如果您更改测试以发出长度大于14的keydown事件，则应首先按下以下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);
});

还要注意，我将目标设置为指向正在调用指令的输入。这样，您就无需在指令本身内寻找“输入”。

在此示例中，您应该可以通过执行类似的操作来打击其他if语句。