Question

我正在使用js-fixture，Mocha，Chai，Sinon和Karma。

我能够在包装器中看到正确的元素。

但是，当我触发click事件时，我的click事件永远不会被触发。

我假设事件永远不会绑定到元素。

我是否对夹具做错了什么？有没有更好的方法用mocha测试jQuery事件？

测试：

var thisFixture,
    wrapper;
describe("modal is removed when close button is clicked", function () {
    beforeEach(function () {
        fixtures.path = "/base/spec/javascripts/fixtures";
        fixtures.load('modal.html');
        thisFixture = $(fixtures.body());
        wrapper = $(thisFixture[0]);
    });
    it("should is removed from the dom", function () {
        debugger;

        h2uModal.bindEvents();
        var close = wrapper.find(".fa-times");
        expect(wrapper.size()).to.equal(1);
        close.trigger("click");
        expect(wrapper.size()).to.equal(0);
    });
    afterEach(function () {
        fixtures.cleanUp();
    });
});

受测试代码：

var h2uModal = {
    bindEvents: function () {
        $("#modal .fa-times").click(function () {
            $(this).parents("#wrapper").remove();
        });
    }
};

夹具：

<div id='wrapper'>
    <div id='modal'>
        <i class='fa-times'></i>
    </div>
</div>

结果：

Chrome 34.0.1847 (Mac OS X 10.9.2) modal is removed when close button is clicked should is removed from the dom FAILED
AssertionError: expected 1 to equal 0

Answer 1

我遇到的问题是你如何使用jQuery。您初次化了wrapper，如下所示：

wrapper = $(thisFixture[0]);

然后单击您的#fa-times元素，该元素应从DOM中删除您在wrapper中抓取的元素。在点击之前，您需要测试：

expect(wrapper.size()).to.equal(1);

到目前为止一切都很好，但是在点击后会删除它，你会测试一下：

expect(wrapper.size()).to.equal(0);

它无法运作。如果从DOM中删除元素会以某种方式更新包含它的jQuery对象，那么会有效，但现在这就是jQuery的工作原理。如果我用以下内容获取十几个段落元素：

var $foo = $('p');

并执行$foo.remove()，$foo 的大小不会改变。之前和之后的唯一区别是$foo选择的DOM元素在删除之前具有父节点，并且在删除后没有父节点。

因此，您可以更新代码，以便在点击之前检查wrapper[0].parentNode不是null并在null之后检查。

顺便说一下，自jQuery 1.8以来，size() method已被弃用，如果要测试其大小（在其他测试中），则应使用wrapper.length。

无法使用Karma和Mocha在js-fixture中的元素上触发事件

1 个答案: