Невозможно вызвать событие для элемента в js-fixture с Karma и Mocha

Question

Я использую js-fixture, Mocha, Chai, Sinon с кармой.

Я могу видеть правильный элемент в обертке.

Однако, когда я запускаю событие click, событие click никогда не срабатывает.

Я предполагаю, что событие никогда не привязывается к элементу.

Я что-то не так с приборами? Есть ли лучший способ для тестирования событий 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 элемент, который должен удалить элемент, который вы захватили в wrapper из DOM. Перед кликом вы проверяете это:

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

Пока все хорошо, но после клика, который удалит его, вы проверяете это:

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

Это не может работать. Это будет работать, если удаление элемента из DOM каким-либо образом обновит jQuery объекты, которые содержат его, но теперь это как jQuery работает. Если я возьму дюжину элементов абзаца с:

var $foo = $('p');

и делать $foo.remove(), размер $foo не изменится. Единственная разница между до и после состоит в том, что элементы DOM, которые были выбраны $foo были с родительским узлом до удаления и без родительского узла после удаления.

Таким образом, вы можете обновить свой код, чтобы проверить, что wrapper[0].parentNode не является null до щелчка и null после.

Кстати, size() Метод не рекомендуется с jQuery 1.8, вы должны использовать wrapper.length если вы хотите проверить его размер (в другом тесте).