为什么下一行没有被单元测试覆盖？

Question

我为以下函数运行 jasmin-Karma 测试

ExampleFunction(someParam) {
    let element = document.querySelector(`aSelectorId}`);
    if (element ) {
      element.classList.remove('disabled');
      element.classList.add('enabled');
    }
  }

这是我运行的测试

 describe('ExampleFunction', () => {
    it('it should enable and disable', () => {
      spyOn(document, "querySelector").and.callFake(function() {
        return {
              value: true
          }
      });
      componentInstance.ExampleFunction("params");
      expect(componentInstance.Somevalue).toBe(something);
    });
  });

现在的问题是代码覆盖率显示

 element.classList.remove('disabled');

如涵盖但不是这一行！

  element.classList.add('enabled');

大家能告诉我为什么会这样吗？

Answer 1

您在 spy 中指定的返回值没有 classList 属性。这应该会导致最后一行代码没有被执行。

尝试在你的间谍中添加两个删除和添加方法：

return {
  value: true
  classList: {
    remove: () => {},
    add: () => {}
  }         
}

或者，您还可以提供用于删除和添加的模拟，以便您也可以测试是否使用正确的属性调用方法。

这可能看起来像这样：

    it('it should enable and disable', () => {
      const removeSpy = jasmine.createSpy();
      const addSpy = jasmine.createSpy();

      spyOn(document, "querySelector").and.callFake(function() {
        return {
              value: true,
              classList: {
                 add: addSpy,
                 remove: removeSpy
              }
          }
      });
      componentInstance.ExampleFunction("params");
      expect(componentInstance.Somevalue).toBe(something);
      expect(addSpy).toHaveBeenCalledWith('enabled');
      expect(removeSpy).toHaveBeenCalledWith('disabled')
    });

请注意，这是伪代码，我没有正确测试它，但它应该可以按照这些思路工作。

看看jasmine documentation