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

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: () => {}
}         
}

或者，您也可以为remove和add提供mock，这样您就可以测试是否也使用正确的属性调用了这些方法。

这可能看起来像这样：

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

请注意，这是伪代码，我没有对它进行适当的测试，但它应该能按照这些思路工作。

看看茉莉花文档