Example BDD Process

/**
 * Requirements
 * As a User I will see a loading splash when page is rendered for system feedback
 * As a User I want to close the view in order to access the rest of the application
 * As a User I want to 
 */

/**
 * Behavior
 * Awesome View when view is rendered should show loading splash
 * Awesome View when user clicks close link should close view
 * /
 * 
describe('Awesome View', function () {

    describe('when view is rendered', function () {
    
        it('should show loading splash');
        
    });
    
    describe('when user clicks close link', function () {
    
        it('should close view');
    
    });
    
});

describe('Awesome View', function () {

    describe('when view is rendered', function () {
    
        it('should show loading splash', function () {
            view.render();
            view.ui.loadingSplash.is(':visible').should.equal(true);
        });
    
    });
    
    describe('when user clicks close link', function () {
    
        it('should close view', function () {
            sinon.spy(View.prototype, 'closeFunction')
            view.render();
            view.ui.closeLink.trigger('click');
            view.closeSpy.should.have.been.calledOnce;
        });
    
    });
    
});

View = Backbone.View.extend({
    ui: {
        closeLink: '#close-link',
        loadingSplash: '#splash-view'
    },
    events: {
        'click #close-link': 'closeFunction'
    },
    closeFunction: function () {
        this.$el.remove()
    }
});