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

Question

我运行ning 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

您在间谍中指定的 return 值没有 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

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

Why the next line is not being covered in unit test coverage?

jasmine

karma-jasmine

angular