0

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

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

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

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

我对固定装置做错了吗？有没有更好的方法来用 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
4

1 回答 1

0

我看到的问题是你如何使用 jQuery。你初始化wrapper是这样的：

wrapper = $(thisFixture[0]);

然后单击您的#fa-times元素，这应该会删除您wrapper从 DOM 中抓取的元素。在单击之前，您对此进行测试：

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

到目前为止一切顺利，但是在单击将其删除后，您对此进行了测试：

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

它行不通。如果从 DOM 中删除一个元素会以某种方式更新包含它的对象，这将jQuery起作用，但现在是这样jQuery工作的。如果我抓住十几个段落元素：

var $foo = $('p');

并且这样做$foo.remove()，大小$foo 不会改变。before 和 after 的唯一区别是，被选中的 DOM 元素$foo在移除之前是有父节点的，而移除之后是没有父节点的。

所以你可以更新你的代码来检查它wrapper[0].parentNode不是null在点击之前和null之后。

顺便说一句，该size()方法自 jQuery 1.8 以来已被弃用，wrapper.length如果你想测试它的大小（在其他一些测试中），你应该使用它。

于 2014-05-08T10:43:58.027 回答