Angular testing page load spinner

by amindunited

HTML

<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.css"/>




<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.js'></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-aria.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.min.js"></script>
<!-- -->
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine-html.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/boot.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-mocks.js"></script>
<div id="appWrap" class="appWrap" ng-controller="appController as appCtrl">
    <div class="magoo" ng-class="{'loading': appCtrl.loading}">
        {{appCtrl.doneText}}
    </div>
</div>

CSS

.magoo {
    width: 200px;
    height: 200px;
}
.loading {
    background-color: red;
}
.true {
    background-color: blue;
}

JavaScript

var app = angular.module('app', ['ngMaterial'])
var ctrlr = app.controller('appController', ['$scope', '$timeout', function($scope, $timeout){
	this.loading = true;
    this.doneText="Loading...";
    this.doneLoading = function(){
        console.log("done loading running");
        this.doneText = "DONE!!!";
    	this.loading = false;
    };

    var that = this;
    $timeout(function(){
        console.log("..... ", that);
        that.loading = false;
        that.doneLoading();
        console.log("then ..... ", that);
    }, 3000);
    
}]);


//Set the material theme...
//try on of the Palettes from
//https://material.angularjs.org/#/Theming/01_introduction
app.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('docs-dark', 'default')
    .dark()
  //  .primaryPalette('blue-grey',{})
});


/* 
 * Specs
 */
describe("Application", function() {

    it("Application Starts", function () {
        //
        expect(1).toBe(1);
    });
    
    var scope, $location, createController;

    beforeEach(inject(function ($rootScope, $controller) {
        //module('app');
       // scope = $rootScope.$new();
        console.log("merp ", app);
		$timeout = {};
        createController = function() {
           return $controller('appController', {});
        };
    }));
    
    it('Should show a red background while loading', function(){
    	//app.loading = false;
        var theDiv = document.querySelector('#appWrap > .magoo');
        var backgroundColor = getComputedStyle(theDiv).getPropertyValue("background-color");
        
        expect(backgroundColor).toBe('rgb(255, 0, 0)');
    });
    
    it('Should remove the red background when loading is complete', function(){
        var ctrl = createController();
        console.log('after ', ctrl);
        expect(1).toBe(0);
        
    });
  

});

describe('Material Theme', function(){

    it("Should use Google Material", function(){

        //Check that ngMaterial is included in angular's...