Categories
Programming Tech

Google Glass Unboxing and Review, Jasmine-Jquery+SquireJS example

Google Glass Review

I just got my Google Glass Explorer 2.0 edition in not that long ago, and I know alot of people are curious about how this gadget works, so I’ve put up a video of it (an unboxing one, and a review).

httpv://youtu.be/NPBNNwQB_Ss

httpv://youtu.be/RHg-bnx7r3A

Example client side Jasmine unit test using the jasmine-jquery + SquireJS libraries
Ok, so I finally figured out these client side tests. I have an example test here that uses Backbone Models as objects, the Jasmine-jquery library to test DOM interactions and the SquireJS library to mock out requireJS dependencies. Hope this helps someone.

//your jasmine test suite
describe('Car View', function() {

        beforeEach(function () {
            this.injector = new Squire();
            this.car = new Car();
        });

        afterEach(function () {
            this.injector.clean();
            this.injector.remove();
        });

       it('test car creation with a mocked out owner', function () {

            var ownerInput, brandInput, modelInput;
            var carMock = this.car;
            var injector = this.injector;

            //squire injector runs asynchronously inside its own closure so we need to run synchronously in Jasmine via run and wait
            runs(function() {
                carMock.set({
                    brand: 'Honda',
                    model: 'Civic',
                    owner: 'John Wayne',
                    url: '/car/civic/123456'
                });
                //Owner is some backbone model that is pulled in via requireJS that we want to mock because it can't be mocked normally
                var ownerMock = new Owner({ name: 'John Wayne' });
                injector.mock('dep/owner', ownerMock).require(['car.view'],function(CarView) {
                    var carView = new CarView({
                       model: carMock
                    });
                //lets say on render, your car view populates some owner field with the owner name, and the brand and model fields the same way.
                CarView.render(); 
                ownerInput = carView.$el.find('.owner input');
                brandInput = carView.$el.find('.brand input');
                modelInput = carView.$el.find('.model input');            
                });
            });

            //wait for dom to render 
            waits(1000);

            //do your assertions
            runs(function() {
                expect(brandInput[0]).toHaveValue(carMock.get('brand'));
                expect(modelInput[0]).toHaveValue(carMock.get('model'));
                expect(ownerInput[0]).toHaveValue(carMock.get('owner'));
            });

        });

});