Template for Testing with Jasmine

Drop in your code, drop in your Jasmine specs, and away you go! - includes jasmine jquery 2.0.5

by sidouglas

HTML

<script src="http://jasmine.simondouglas.com/jasmine.package.min.js"></script>

CSS

body { overflow-y: scroll; }

.jasmine_html-reporter { background-color: #eeeeee; padding: 5px; margin: -8px; font-size: 11px; font-family: Monaco, "Lucida Console", monospace; line-height: 14px; color: #333333; }
.jasmine_html-reporter a { text-decoration: none; }
.jasmine_html-reporter a:hover { text-decoration: underline; }
.jasmine_html-reporter p, .jasmine_html-reporter h1, .jasmine_html-reporter h2, .jasmine_html-reporter h3, .jasmine_html-reporter h4, .jasmine_html-reporter h5, .jasmine_html-reporter h6 { margin: 0; line-height: 14px; }
.jasmine_html-reporter .banner, .jasmine_html-reporter .symbol-summary, .jasmine_html-reporter .summary, .jasmine_html-reporter .result-message, .jasmine_html-reporter .spec .description, .jasmine_html-reporter .spec-detail .description, .jasmine_html-reporter .alert .bar, .jasmine_html-reporter .stack-trace { padding-left: 9px; padding-right: 9px; }
.jasmine_html-reporter .banner { position: relative; }
.jasmine_html-reporter .banner .title { background:...

JavaScript

//--- CODE --------------------------
var minicart = (function() {
    var self = {};
    self.events = {};
    self.$buttonClose = $('#shopping-bag-hide');
    self.$buttonOpen = $('#shopping-bag');
    self.$panel = $('#qcart-dynamic');



    function showCart() {
        self.$panel.show();
    }

    function hideCart() {
        self.$panel.hide();
    }

    function bindEvents(theObj, eventsToCall) {
        for (var m in eventsToCall) {
            if (typeof eventsToCall[m] === "function") {
                eventsToCall[m].call(theObj);
            }
        }
        return theObj;
    }

    function init() {

        for (var key in self) {
            if (key.indexOf('$') > -1) {
                self[key] = $(self[key].selector);
            }
        }
        bindEvents(self, self.events);
        return self;
    }

    self.events = {
        bindShowCart: function(){
          this.$buttonOpen.on('click', showCart);
        },
        bindHideCart: function(){
          this.$buttonClose.on('click', hideCart);
        }
    };

    bindEvents(self,self.events);

    return {
        //for testing...
        $buttonClose: self.$buttonClose,
        $buttonOpen: self.$buttonOpen,
        $panel: self.$panel,
        ///...end testing...
        showCart: showCart,
        hideCart: hideCart,
        init: init
    };

}());





//--- SPECS -------------------------
describe('AB MiniCart Panel', function() {

    beforeEach(function() {
        // loadFixtures() does not work with jsFiddle, so append it the hard way.
        var fixture ='<header><div class="container"> <div class="banner"> </div> <div class="cart"> <a class="qcart-items tab cart-empty" id="shopping-bag" style="border:1px solid red"> My Cart <span class="f-shopping-cart"></span> <span class="qty" id="ab-item-qty">0</span> </a> <div id="qlinks"> <a class="tab qlinks-lang-code" id="qlangcode1"> <span class="hide">EN</span> <span class="currency-code" data-currencylabel="$USD"> $USD...