在jasmine上监视jQuery $（'...'）选择器 [英] Spying on jQuery $('...') selector in jasmine

问题描述

当涉及监视jQuery函数时（例如 bind ，点击等），这很容易：

When it comes to spying on jQuery functions (e.g. bind, click, etc) it is easy:

spyOn($.fn, "bind");

问题是当你想监视 $（'... '）并返回已定义的元素数组。

The problem is when you want to spy on $('...') and return defined array of elements.

在SO上阅读其他相关答案后尝试的事情：

Things tried after reading other related answers on 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（）路由不会中断。

So how do I do this? Or if the only way is to spy on init function how do I "remove" spy from function when I'm done so afterEach() routing doesn't break.

jQuery版本是1.9.1。

jQuery version is 1.9.1.

解决方法：

到目前为止，我能让它工作的唯一方法（丑陋）：

The only way I could make it work so far (ugly):

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

推荐答案

通常，间谍存在规范的生命周期。然而，摧毁间谍并没有什么特别之处。你只需恢复原来的函数引用即可。

Normally, a spy exists for the lifetime of the spec. However, there's nothing special about destroying a spy. You just restore the original function reference and that's that.

这是一个方便的小助手函数（带有测试用例），它将清理你的变通方法并使其更有用。在 afterEach 中调用 unspy 方法恢复原始参考。

Here's a handy little helper function (with a test case) that will clean up your workaround and make it more usable. Call the unspy method in your afterEach to restore the original reference.

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

作为上述内容的替代方案（以及其他读此内容的人），你可以改变你的方式正在接近这个问题。而不是监视 $ 函数，尝试将对 $ 的原始调用解压缩到它自己的方法，然后监视它。

As an alternative to the above (and for anyone else reading this), you could change the way you're approaching the problem. Instead of spying on the $ function, try extracting the original call to $ to its own method and spying on that instead.

// 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 */));
    // ...
});

这篇关于在jasmine上监视jQuery $（'...'）选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！