From 5d15e64a6deef0528f331093b6825d94b005f3a0 Mon Sep 17 00:00:00 2001 From: Ryan Hutchison Date: Wed, 30 Dec 2015 02:34:54 -0500 Subject: [PATCH] feat(chat): Modify chat module to implement johnpapa styleguide. --- modules/chat/client/chat.client.module.js | 8 ++- .../chat/client/config/chat.client.config.js | 15 ++-- .../chat/client/config/chat.client.routes.js | 17 +++-- .../controllers/chat.client.controller.js | 70 +++++++++++-------- .../chat/client/views/chat.client.view.html | 10 +-- .../client/chat.client.controller.tests.js | 48 ++++++------- 6 files changed, 97 insertions(+), 71 deletions(-) diff --git a/modules/chat/client/chat.client.module.js b/modules/chat/client/chat.client.module.js index 80ef9c29..5e7669f8 100644 --- a/modules/chat/client/chat.client.module.js +++ b/modules/chat/client/chat.client.module.js @@ -1,4 +1,6 @@ -'use strict'; +(function (app) { + 'use strict'; -// Use Applicaion configuration module to register a new module -ApplicationConfiguration.registerModule('chat'); + app.registerModule('chat'); + app.registerModule('chat.routes', ['ui.router']); +})(ApplicationConfiguration); diff --git a/modules/chat/client/config/chat.client.config.js b/modules/chat/client/config/chat.client.config.js index 381ef5d6..d0efbebe 100644 --- a/modules/chat/client/config/chat.client.config.js +++ b/modules/chat/client/config/chat.client.config.js @@ -1,12 +1,17 @@ -'use strict'; +(function () { + 'use strict'; -// Configuring the Chat module -angular.module('chat').run(['Menus', - function (Menus) { + angular + .module('chat') + .run(menuConfig); + + menuConfig.$inject = ['Menus']; + + function menuConfig(Menus) { // Set top bar menu items Menus.addMenuItem('topbar', { title: 'Chat', state: 'chat' }); } -]); +})(); diff --git a/modules/chat/client/config/chat.client.routes.js b/modules/chat/client/config/chat.client.routes.js index 38649c68..edfc959e 100644 --- a/modules/chat/client/config/chat.client.routes.js +++ b/modules/chat/client/config/chat.client.routes.js @@ -1,15 +1,22 @@ -'use strict'; +(function () { + 'use strict'; -// Configure the 'chat' module routes -angular.module('chat').config(['$stateProvider', - function ($stateProvider) { + angular + .module('chat.routes') + .config(routeConfig); + + routeConfig.$inject = ['$stateProvider']; + + function routeConfig($stateProvider) { $stateProvider .state('chat', { url: '/chat', templateUrl: 'modules/chat/client/views/chat.client.view.html', + controller: 'ChatController', + controllerAs: 'vm', data: { roles: ['user', 'admin'] } }); } -]); +})(); diff --git a/modules/chat/client/controllers/chat.client.controller.js b/modules/chat/client/controllers/chat.client.controller.js index edb9b272..85c060fe 100644 --- a/modules/chat/client/controllers/chat.client.controller.js +++ b/modules/chat/client/controllers/chat.client.controller.js @@ -1,43 +1,55 @@ -'use strict'; +(function () { + 'use strict'; -// Create the 'chat' controller -angular.module('chat').controller('ChatController', ['$scope', '$location', 'Authentication', 'Socket', - function ($scope, $location, Authentication, Socket) { - // Create a messages array - $scope.messages = []; + angular + .module('chat') + .controller('ChatController', ChatController); - // If user is not signed in then redirect back home - if (!Authentication.user) { - $location.path('/'); + ChatController.$inject = ['$scope', '$state', 'Authentication', 'Socket']; + + function ChatController($scope, $state, Authentication, Socket) { + var vm = this; + + vm.messages = []; + vm.messageText = ''; + vm.sendMessage = sendMessage; + + init(); + + function init() { + // If user is not signed in then redirect back home + if (!Authentication.user) { + $state.go('home'); + } + + // Make sure the Socket is connected + if (!Socket.socket) { + Socket.connect(); + } + + // Add an event listener to the 'chatMessage' event + Socket.on('chatMessage', function (message) { + vm.messages.unshift(message); + }); + + // Remove the event listener when the controller instance is destroyed + $scope.$on('$destroy', function () { + Socket.removeListener('chatMessage'); + }); } - // Make sure the Socket is connected - if (!Socket.socket) { - Socket.connect(); - } - - // Add an event listener to the 'chatMessage' event - Socket.on('chatMessage', function (message) { - $scope.messages.unshift(message); - }); - // Create a controller method for sending messages - $scope.sendMessage = function () { + function sendMessage() { // Create a new message object var message = { - text: this.messageText + text: vm.messageText }; // Emit a 'chatMessage' message event Socket.emit('chatMessage', message); // Clear the message text - this.messageText = ''; - }; - - // Remove the event listener when the controller instance is destroyed - $scope.$on('$destroy', function () { - Socket.removeListener('chatMessage'); - }); + vm.messageText = ''; + } } -]); +})(); diff --git a/modules/chat/client/views/chat.client.view.html b/modules/chat/client/views/chat.client.view.html index c50632b0..b1ffe841 100644 --- a/modules/chat/client/views/chat.client.view.html +++ b/modules/chat/client/views/chat.client.view.html @@ -1,22 +1,22 @@ -
+

Chat Example

-
+
- + - +
    -
  • +
  • {{message.username}}
    diff --git a/modules/chat/tests/client/chat.client.controller.tests.js b/modules/chat/tests/client/chat.client.controller.tests.js index 23c3e31f..354f0e39 100644 --- a/modules/chat/tests/client/chat.client.controller.tests.js +++ b/modules/chat/tests/client/chat.client.controller.tests.js @@ -1,52 +1,52 @@ -'use strict'; - /** * Chat client controller tests */ (function () { + 'use strict'; + describe('ChatController', function () { //Initialize global variables - var scope, + var $scope, Socket, ChatController, $timeout, - $location, + $state, Authentication; // Load the main application module beforeEach(module(ApplicationConfiguration.applicationModuleName)); - beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$location_) { - scope = $rootScope.$new(); + beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$state_) { + $scope = $rootScope.$new(); Socket = _Socket_; $timeout = _$timeout_; - $location = _$location_; + $state = _$state_; Authentication = _Authentication_; })); describe('when user logged out', function () { - beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$location_) { + beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$state_) { Authentication.user = undefined; - spyOn($location, 'path'); - ChatController = $controller('ChatController', { - $scope: scope, + spyOn($state, 'go'); + ChatController = $controller('ChatController as vm', { + $scope: $scope }); })); it('should redirect logged out user to /', function () { - expect($location.path).toHaveBeenCalledWith('/'); + expect($state.go).toHaveBeenCalledWith('home'); }); }); describe('when user logged in', function () { - beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$location_) { + beforeEach(inject(function ($controller, $rootScope, _Socket_, _Authentication_, _$timeout_, _$state_) { Authentication.user = { name: 'user', roles: ['user'] }; - ChatController = $controller('ChatController', { - $scope: scope, + ChatController = $controller('ChatController as vm', { + $scope: $scope }); })); @@ -55,34 +55,34 @@ }); it('should define messages array', function () { - expect(scope.messages).toBeDefined(); - expect(scope.messages.length).toBe(0); + expect($scope.vm.messages).toBeDefined(); + expect($scope.vm.messages.length).toBe(0); }); describe('sendMessage', function () { var text = 'hello world!'; beforeEach(function () { - scope.messageText = text; - scope.sendMessage(); + $scope.vm.messageText = text; + $scope.vm.sendMessage(); $timeout.flush(); }); it('should add message to messages', function () { - expect(scope.messages.length).toBe(1); + expect($scope.vm.messages.length).toBe(1); }); it('should add message with proper text attribute set', function () { - expect(scope.messages[0].text).toBe(text); + expect($scope.vm.messages[0].text).toBe(text); }); it('should clear messageText', function () { - expect(scope.messageText).toBe(''); + expect($scope.vm.messageText).toBe(''); }); }); describe('$destroy()', function () { beforeEach(function () { - scope.$destroy(); + $scope.$destroy(); }); it('should remove chatMessage listener', function () { @@ -91,4 +91,4 @@ }); }); }); -}()); +})();