javascript - 在 jasmine 中监视 jQuery $ ('...' ) 选择器

Question

当谈到监视 jQuery 函数(例如 bind、click 等)时，这很容易:

spyOn($.fn, "bind");

问题是当您想监视 $('...') 并返回定义的元素数组时。

阅读其他有关 SO 的相关答案后尝试的事情:

spyOn($.fn, "init").andReturn(elements); // works, but breaks stuff that uses jQuery selectors in afterEach(), etc
spyOn($.fn, "merge").andReturn(elements); // merge function doesn't seem to exist in jQuery 1.9.1
spyOn($.fn, "val").andReturn(elements); // function never gets called

那我该怎么做呢？或者，如果唯一的方法是监视 init 函数，我如何在完成后从函数中“删除”监视，这样 afterEach() 路由就不会中断。

jQuery 版本是 1.9.1。

解决方法:

到目前为止，我唯一能让它工作的方法(丑陋):

realDollar = $;
try {
  $ = jasmine.createSpy("dollar").andReturn(elements);
  // test code and asserts go here
} finally {
  $ = realDollar;
}

Answer 1

通常情况下， spy 会在规范的整个生命周期内存在。然而，消灭 spy 并没有什么特别之处。您只需恢复原始函数引用即可。

这里有一个方便的小辅助函数(带有一个测试用例)，可以清理您的解决方法并使其更有用。在 afterEach 中调用 unspy 方法来恢复原始引用。

function spyOn(obj, methodName) {
    var original = obj[methodName];
    var spy = jasmine.getEnv().spyOn(obj, methodName);
    spy.unspy = function () {
        if (original) {
            obj[methodName] = original;
            original = null;
        }
    };
    return spy;
}

describe("unspy", function () {
    it("removes the spy", function () {
        var mockDiv = document.createElement("div");
        var mockResult = $(mockDiv);

        spyOn(window, "$").and.returnValue(mockResult);
        expect($(document.body).get(0)).toBe(mockDiv);

        $.unspy();

        expect(jasmine.isSpy($)).toEqual(false);
        expect($(document.body).get(0)).toBe(document.body);
    });
});

作为上述方法的替代方法(对于阅读本文的任何其他人)，您可以改变解决问题的方式。不要监视 $ 函数，而是尝试将对 $ 的原始调用提取到它自己的方法并监视它。

// Original
myObj.doStuff = function () {
    $("#someElement").css("color", "red");
};

// Becomes...
myObj.doStuff = function () {
    this.getElements().css("color", "red");
};

myObj.getElements = function () {
    return $("#someElement");
};

// Test case
it("does stuff", function () {
    spyOn(myObj, "getElements").and.returnValue($(/* mock elements */));
    // ...
});