Tag: reality

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