Mercurial > hg > thermostat-ng > web-client

changeset 208:0f0ca4f48c22

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>