0

我为 jQuery 编写了一个插件，我使用了http://jqueryboilerplate.com/的样板模式

在里面，我有以下代码片段：

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();
        });
    }
}

现在，我编写了一个 Jasmine 测试用例，它应该模拟点击“a.removefromcart”元素。之后，我可以监视一些 Ajax 调用，看看结果是否正确。

所以我这样做了：

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);
    });
});

第一次模拟点击有效（用于添加产品），但不会触发删除，即永远不会调用“on”的回调。

该实现有效，但我希望在插件的这一部分周围有一些测试用例。

我是否采取了正确的方法？有什么建议我可以调试它，以便触发 .on 回调？

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.

4

1 回答 1

1

$('body').trigger('click.shoppingCart','a.removefromcart'); will not work because you are triggering the event for the body element where as the handlers are registered for a.removefromcart elements.

What you need is

$('a.removefromcart').trigger('click',);

Why

click.shoppingCart is same as a normal click event, the shoppingCart part is a namespace which is normally used to remove a specific event handler from an element. so when the event is fired the .shoppingCart part should not be there.

Also $("body").on("click.shoppingCart","a.removefromcart", ...); means you are registering an delegated event handler for elements of type a.removefromcart, so if you want the handler to be called you need to fire it on a a.removefromcart element as shown above, not in the body element as you have done

于 2013-08-12T16:01:54.670 回答