Skip to content
This repository has been archived by the owner on Aug 30, 2021. It is now read-only.

Commit

Permalink
feat(chat): Modify chat module to implement johnpapa styleguide.
Browse files Browse the repository at this point in the history
  • Loading branch information
rhutchison committed Dec 31, 2015
1 parent b12be5f commit 5d15e64
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 70 deletions.
8 changes: 5 additions & 3 deletions modules/chat/client/chat.client.module.js
Original file line number Diff line number Diff line change
@@ -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);
15 changes: 10 additions & 5 deletions modules/chat/client/config/chat.client.config.js
Original file line number Diff line number Diff line change
@@ -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'
});
}
]);
})();
17 changes: 12 additions & 5 deletions modules/chat/client/config/chat.client.routes.js
Original file line number Diff line number Diff line change
@@ -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']
}
});
}
]);
})();
68 changes: 40 additions & 28 deletions modules/chat/client/controllers/chat.client.controller.js
Original file line number Diff line number Diff line change
@@ -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'];

// Make sure the Socket is connected
if (!Socket.socket) {
Socket.connect();
}
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');
}

// Add an event listener to the 'chatMessage' event
Socket.on('chatMessage', function (message) {
$scope.messages.unshift(message);
});
// 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');
});
}

// 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 = '';
}
}
]);
})();
10 changes: 5 additions & 5 deletions modules/chat/client/views/chat.client.view.html
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<!-- The chat view -->
<section class="container" ng-controller="ChatController">
<section class="container">
<div class="page-header">
<h1>Chat Example</h1>
</div>
<!-- The message form -->
<form class="col-xs-12 col-md-offset-4 col-md-4" ng-submit="sendMessage();">
<form class="col-xs-12 col-md-offset-4 col-md-4" ng-submit="vm.sendMessage();">
<fieldset class="row">
<div class="input-group">
<input type="text" id="messageText" name="messageText" class="form-control" ng-model="messageText" placeholder="Enter new message">
<input type="text" id="messageText" name="messageText" class="form-control" ng-model="vm.messageText" placeholder="Enter new message">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary" ng-disabled="!messageText.length">Submit</button>
<button type="submit" class="btn btn-primary" ng-disabled="!vm.messageText.length">Submit</button>
</span>
</div>
</fieldset>
</form>
<ul class="list-unstyled">
<!-- List all messages -->
<li class="col-xs-12 col-md-offset-4 col-md-4 chat-message" ng-repeat="message in messages">
<li class="col-xs-12 col-md-offset-4 col-md-4 chat-message" ng-repeat="message in vm.messages">
<small class="pull-right text-muted" ng-bind="message.created | date:'mediumTime'"></small>
<img ng-src="{{message.profileImageURL}}" alt="{{message.username}}" class="pull-left chat-profile-image" />
<div class="pull-left chat-message-details">
Expand Down
48 changes: 24 additions & 24 deletions modules/chat/tests/client/chat.client.controller.tests.js
Original file line number Diff line number Diff line change
@@ -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
});
}));

Expand All @@ -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 () {
Expand All @@ -91,4 +91,4 @@
});
});
});
}());
})();

0 comments on commit 5d15e64

Please sign in to comment.