vendredi 20 novembre 2015

Marionette ItemView 'click' event not firing when triggered from tests

When testing the following itemView using mocha and sinon I can't trigger the 'click' event on the element I have set in the events hash. I don't understand why for this view this is not woking as there are similar views in the project I have tested successfully.

When I assert that the sinon.spy I have set on the callback for that click event is called, it returns an assertion error and the console.log within the callback is also not logged.

AssertionError: expected showCheckout to have been called at least once, but it was never called

I wonder if for some reason the element I am triggering the event on is not the same that Backbone has attached the event too. This event is only not firing in my tests.

Does anyone understand why this event is not triggering the spy or logging any messages in the console?

The view:

myViews.ProblematicView = Marionette.ItemView.extend({

    collection: null,

    collectionEvents: {
        'update' : 'updateTotal toggleCheckout',
        'reset'  : 'updateTotal toggleCheckout'
    },

    events: {
        'click .go-to-checkout' : 'showCheckout'
    },

    initialize: function () {
        // set-up models and stuff
    },

    onRender: function () { 

        //Get rid of the wrapping div
        this.setElement(this.el.innerHTML);
    },

    showCheckout: function () {
        console.log("bananas");
    }
});

My tests for this particular event and view:

describe('cart view', function () {

    before(function () {

        this.$fixture = $('<div id="special-view"></div>');

    });

    after(function () {

        $('#fixtures').empty();

    });

    beforeEach(function () {

        this.server = sinon.fakeServer.create();

        this.server.autoRespond = true;

        // empty and rebind the fixture for each run of tests
        this.$fixture.empty().appendTo($('#fixtures'));

        this.collectionFetchStub = sinon.stub(Backbone.Collection.prototype, 'fetch', function () {
            return {
                done: function () {
                    return "All good!";
                }
            }
        });
        this.showCheckoutSpy = sinon.spy(hevnly.Shopfront.View.Cart.prototype, 'showCheckout');


        this.collection = new mySpecial.Collection(
            {
                title: "Black Jacked",
                image:'',
                price: 200,   
                quantity: 2,
                itemId: '2345',
                inventoryId: '6789' 
            },
            {
                event: 'counter:cart'
            }
        );

        this.cards = hevnly.Shopfront.Wallet;

        this.view = new myViews.ProblematicView({
            collection: this.collection,
            template: '#problematic-template'
        });

        this._view = this.view.render();

        document.getElementById('special-view').appendChild(this._view.el);

    });

    afterEach(function () {

        // destroy the view and remove spies
        this.showCheckoutSpy.restore();
        this.server.restore();
        this.$fixture.empty();

    });

    it('clicking "go-to-checkout" triggers "showCheckout"', function () {

        var _event = document.createEvent('Event');

        _event.initEvent('click', true, true);

        this._view.el.querySelector('.go-to-checkout').dispatchEvent(_event);

        expect(this.showCheckoutSpy).has.been.called;

    });
});

Aucun commentaire:

Enregistrer un commentaire