Mercurial > hg > thermostat-ng > web-client
changeset 208:0f0ca4f48c22
Implement lifecycle hooks in app navbar
Reviewed-by: jkang
Review-thread: http://icedtea.classpath.org/pipermail/thermostat/2017-September/025050.html
author | Andrew Azores <aazores@redhat.com> |
---|---|
date | Mon, 18 Sep 2017 10:35:51 -0400 |
parents | 07e0f128e67c |
children | eebc9b8f9e61 |
files | src/app/app.controller.js src/app/app.controller.spec.js src/app/index.html |
diffstat | 3 files changed, 46 insertions(+), 57 deletions(-) [+] |
line wrap: on
line diff
--- a/src/app/app.controller.js Fri Sep 15 17:29:12 2017 -0400 +++ b/src/app/app.controller.js Mon Sep 18 10:35:51 2017 -0400 @@ -28,28 +28,33 @@ import authModule from 'components/auth/auth.module.js'; class AppController { - constructor ($scope, environment, $state, authService) { + constructor ($scope, environment, authService) { 'ngInject'; - - this._scope = $scope; + this.env = environment; this._authService = authService; + $scope.$on('userLoginChanged', () => this._updateUsernameLabel()); + } + + $onInit () { angular.element('logoutButton').removeAttr('hidden'); - if (environment !== 'production') { - $scope.env = environment; + if (this.env !== 'production') { angular.element('envHeader').removeAttr('hidden'); } - $scope.loginStatus = () => authService.status(); + this._updateUsernameLabel(); + } - $scope.logout = () => authService.logout(); - - $scope.$on('userLoginChanged', () => this.updateUsernameLabel()); - this.updateUsernameLabel(); + get loginStatus () { + return this._authService.status(); } - updateUsernameLabel () { - this._scope.username = this._authService.username; + logout () { + return this._authService.logout(); + } + + _updateUsernameLabel () { + this.username = this._authService.username; } }
--- a/src/app/app.controller.spec.js Fri Sep 15 17:29:12 2017 -0400 +++ b/src/app/app.controller.spec.js Mon Sep 18 10:35:51 2017 -0400 @@ -44,79 +44,62 @@ beforeEach(angular.mock.module('AppController')); ['testing', 'development', 'production'].forEach(env => { - describe(env + ' $scope', () => { - let scope, authService; - beforeEach(inject(($controller, $rootScope) => { + describe(env, () => { + let ctrl, scope, authService; + beforeEach(inject($controller => { 'ngInject'; - scope = $rootScope.$new(); + scope = { $on: sinon.spy() }; authService = { status: sinon.stub().returns(true), login: sinon.spy(), logout: sinon.spy() }; - $controller('AppController', { + ctrl = $controller('AppController', { + environment: env, $scope: scope, - environment: env, authService: authService }); + ctrl.$onInit(); })); it('should set loginStatus', () => { - scope.should.have.ownProperty('loginStatus'); - scope.loginStatus.should.be.a.Function(); - - scope.loginStatus(); + ctrl.loginStatus.should.be.True(); authService.status.should.be.calledOnce(); }); - - if (env === 'production') { - it('should not copy env to $scope', () => { - scope.should.not.have.ownProperty('env'); - }); - } else { - it('should copy env to $scope', () => { - scope.should.have.ownProperty('env'); - scope.env.should.equal(env); - }); - } }); }); - describe('$scope.logout()', () => { - let scope, authService; - beforeEach(inject(($controller, $rootScope) => { + describe('logout()', () => { + let ctrl, scope, authService; + beforeEach(inject($controller => { 'ngInject'; - scope = $rootScope.$new(); + scope = { $on: sinon.spy() }; authService = { status: sinon.stub().returns(true), login: sinon.spy(), logout: sinon.spy() }; - $controller('AppController', { + ctrl = $controller('AppController', { + environment: 'testing', $scope: scope, - environment: 'testing', authService: authService }); + ctrl.$onInit(); })); - it('should exist', () => { - scope.should.have.ownProperty('logout'); - scope.logout.should.be.a.Function(); - }); - it('should delegate to AuthService', () => { authService.logout.should.not.be.called(); - scope.logout(); + ctrl.logout(); authService.logout.should.be.calledOnce(); }); }); - describe('$scope.username', () => { - let rootScope, scope, authService; + describe('username', () => { + let rootScope, scope, ctrl, authService; beforeEach(inject(($controller, $rootScope) => { 'ngInject'; @@ -129,23 +112,24 @@ username: 'fake-username' }; - $controller('AppController', { + ctrl = $controller('AppController', { $scope: scope, environment: 'testing', authService: authService }); + ctrl.$onInit(); })); it('should be set on init', () => { - scope.should.have.ownProperty('username'); - scope.username.should.equal(authService.username); + ctrl.should.have.ownProperty('username'); + ctrl.username.should.equal(authService.username); }); it('should be set on userLoginChanged according to authService username', () => { authService.username = 'new-username'; rootScope.$broadcast('userLoginChanged'); - scope.should.have.ownProperty('username'); - scope.username.should.equal(authService.username); + ctrl.should.have.ownProperty('username'); + ctrl.username.should.equal(authService.username); }); });
--- a/src/app/index.html Fri Sep 15 17:29:12 2017 -0400 +++ b/src/app/index.html Mon Sep 18 10:35:51 2017 -0400 @@ -10,13 +10,13 @@ <meta name="viewport" content="width=device-width"/> </head> <body id="pf-app" class="pf-body apf-body ng-cloak"> - <div ng-controller="AppController"> + <div ng-controller="AppController as $ctrl"> <nav class="navbar navbar-pf-vertical"> <div class="navbar-header"> <a ui-sref="landing" class="navbar-brand"> <img id="brandLogoImg" class="navbar-brand-icon" src="~images/thermostat_logo_white_600px.png" height="57" alt="Thermostat"/> </a> - <p hidden id="envHeader" class="navbar-text label label-info infotip">{{env}}</p> + <p hidden id="envHeader" class="navbar-text label label-info infotip">{{$ctrl.env}}</p> </div> <nav class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility"> @@ -31,13 +31,13 @@ </ul> </li> - <li id="userMenu" hidden ng-show="loginStatus()" class="dropdown"> + <li id="userMenu" hidden ng-show="$ctrl.loginStatus" class="dropdown"> <a class="dropdown-toggle nav-item-iconic" id="userDropwdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> - <span translate-attr="{title: 'navbar.USERNAME'}" class="fa pficon-user"></span> {{username}} <span class="caret"></span> + <span translate-attr="{title: 'navbar.USERNAME'}" class="fa pficon-user"></span> {{$ctrl.username}} <span class="caret"></span> </a> <ul class="dropdown-menu" aria-labelledby="userDropwdown"> <li><a ui-sref="user-prefs" translate>navbar.USER_PREFS</a></li> - <li><a id="logoutButton" ng-click="logout()" style="cursor: pointer; cursor: hand" translate>navbar.LOGOUT</a></li> + <li><a id="logoutButton" ng-click="$ctrl.logout()" style="cursor: pointer; cursor: hand" translate>navbar.LOGOUT</a></li> </ul> </li> </ul>