Note that there are some explanatory texts on larger screens.

plurals
  1. POTriggering a click in jquery plugin does not work
    primarykey
    data
    text
    <p>I've written a plugin for jQuery, and I used the boilerplate pattern of <a href="http://jqueryboilerplate.com/" rel="nofollow">http://jqueryboilerplate.com/</a></p> <p>Inside, i have the following snippet of code:</p> <pre><code>ShoppingcartPlugin.prototype = { bindButtons : function(){ var self = this; $('.addtocart').on('click.shoppingCart', function(event){ event.preventDefault(); $('.product-size-wrong').addClass('hidden'); $('.product-added').addClass('hidden'); if(!self.validateForm()) return; self.updateProductDataInDOM(event); var b = self.addProduct(event); if(b){ self.addExtraProducts(event); //aanvullingen self.updatePrices(); self.calculateWeight(); self.calculateDeposit(); $('.product-added').removeClass('hidden'); } self.persist(); }); $("body").on("click.shoppingCart","a.removefromcart", function(event){ self.logger("a.removefromcart clicked"); event.preventDefault(); self.removeProduct(event); self.updateCartTotalPrice(); self.updatePrices(); self.calculateWeight(); self.calculateDeposit(); event.stopPropagation(); }); } } </code></pre> <p>Now, I've written a Jasmine testcase, that should simulate a click on a 'a.removefromcart' element. After that, I can spy on some Ajax call and see if the results are correct.</p> <p>So I've done this:</p> <pre><code>describe('Removing products testsuite', function(){ it('Should yield an empty cart, when the X is clicked in a cart with a single product', function(){ $('#shoppingcart').shoppingCart(); allProducts = {}; $('.addtocart').click(); //simulate click, and adding a product expect($.ajax.calls[1].args[0].data.shoppingCart[0].quantity).toBe(1); expect($.ajax.calls[1].args[0].data.shoppingCart.length).toBe(1); $('body').trigger('click.shoppingCart','a.removefromcart'); console.log($.ajax.calls); expect($.ajax.calls[2].args[0].data.shoppingCart.length).toBe(0); }); }); </code></pre> <p>the first simulation of a click works (for adding a product), but the removal doesn't get triggered, ie, the callback of the 'on' is never being called. </p> <p>The implementation works, but I 'd love to have a few testcases around this part of the plugin.</p> <p>Am I taking the right approach? Any suggestions how I could debug this, such that the .on callback gets fired?</p> <p>Edit: i should note that I used the $('a.removefromcart').on('click.shoppingCart', function(){...}); , but that has some other side-effects that I don't like, so I'd prefer to keep the click binding the same as it is now. I just want to trigger it programmatically.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload