如何从业力测试中模拟 dom 元素

Question

有一个输入类型文件元素。在多次上传角度文件期间，该值不会被清除。因此，使用普通的 javascript dom 操作手动清除它。

下面是代码：

function removeFromQueue(item) {
        vm.uploads.uploader.removeFromQueue(item);
        // Clearing input file field for re-uploading
        if(!vm.uploadFile) {
            document.getElementById('upload-file-' + vm.type).value = null;
        }
    }

在这种情况下，无法模拟 document.getElementById，因此使用单元测试用例中的 vm.uploadFile 未定义变量来控制它，这是错误的。这里怎么模拟dom元素？

Answer 1

您应该能够spyOn document.getElementById 并返回有用的属性（即value 这里）。像这样，

spyOn(document, "getElementById").and.callFake(function() {
    return {
        value: 'test'
    }
}); 

然后，如果您愿意，您可以期望它已被调用，

expect(document.getElementById).toHaveBeenCalledWith('...')