javascript - 如何在Jasmine中设置函数？

Question

我试图在 Jasmine 中覆盖一个函数，但收到错误“TypeError: inputField.setAttribute is not a function”。 我需要做什么来解决这个问题？我需要 mock 这个吗？努力几天来解决这个问题，但没有得到任何解决方案。

谁知道我需要做什么？

功能:

setInput() {
    const inputField = this.$document[0].querySelector('.input-field');

    if (this.inputElement.styles.includes('InputYes')) {
        inputField.setAttribute('input-yes', '');
    } if (this.inputElement.styles.includes('InputNo')) {
        inputField.setAttribute('input-no', '');
    }
}

Jasmine :

describe('setInput method', () => {
    it('test', () => {
        // given
        var spy = spyOn(document, 'querySelector').and.returnValue(angular.element('<input class="input-field" type="text">'));
        const inputController = new InputController(this.$document);
        inputController.inputElement = {
            styles: ['InputYes']
        };

        // when
        inputController.setInput();

        // then
        expect(inputController.$document[0].querySelector('.input-field')[0].getAttribute('input-yes')).toBe('');
        expect(spy).toHaveBeenCalledWith('<input class="input-field" input-yes type="text">');
    });
});

Answer 1

我猜测，但基于快速代码审查。您的代码正在以数组形式访问 $document:

this.$document[0].querySelector('.input-field');

但是，你的 spy 就在文件上:

 var spy = spyOn(document, 'querySelector').and.returnValue(angular.element('<input class="input-field" type="text">'));

根据您共享的代码，我猜测 $document[0] 与 document 不同

我假设如果您监视组件中的 $document 对象，您可能会得到更好的结果。像这样:

var spy = spyOn(inputController.$document[0], 'querySelector').and.returnValue(angular.element('<input class="input-field" type="text">'));