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

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 属性。 这应该导致最后一行代码不被执行。

尝试在您的 spy 中添加两个 remove 和 add 方法：

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')
    });

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

看看茉莉花文档