refactor(hintService): move communication through developer tools to backend service

To improve testability, the backend communication with the developer tools is moved to
a service that can then be mocked for testing purposes. Moving functionality to
a service means that an app file is needed to create the module before the controller
and the service and that the app, service, and controller should be contained in the
application html page.

hint.html

@@ -5,7 +5,9 @@
     <script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
     <script src="bower_components/jquery/dist/jquery.js"></script>
 
-    <script src="HintCtrl.js"></script>
+    <script src="hintApp.js"></script>
+    <script src="hintService.js"></script>
+    <script src="hintCtrl.js"></script>
 
     <link rel="stylesheet" href="bower_components/angular/angular-csp.css">
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

hintApp.js

@@ -0,0 +1 @@
+angular.module('ngHintUI',[]);

hintCtrl.js

@@ -1,21 +1,7 @@
-angular.module('ngHintUI',[]);
-
 angular.module('ngHintUI')
-  .controller('HintCtrl', ['$scope', '$timeout',
-    function($scope, $timeout){
-      $scope.module, $scope.type, $scope.suppressedMessages = {}, $scope.suppressedMessagesLength = 0;
-      var currentPromises;
-      //message data will be an array sent from hint log to batarang to here
-
-      // connect to background page
-      var port = chrome.extension.connect();
-      port.postMessage(chrome.devtools.inspectedWindow.tabId);
-      port.onMessage.addListener(function(msg) {
-        if(msg == 'refresh') {
-          $scope.messageData = {};
-          return;
-        }
-
+  .controller('HintCtrl', ['$scope', '$timeout', 'hintService',
+    function($scope, $timeout, hintService) {
+      hintService.setHintFunction(function(msg) {
         $scope.messageData = $scope.messageData || {};
         var result = msg.split('##'); //[modName, message, messageType]
         if(!$scope.messageData[result[0]]) {
@@ -28,10 +14,10 @@ angular.module('ngHintUI')
         $scope.messageData[result[0]][result[2]].push(result[1]);
         debounceUpdateAll();
       });
-      port.onDisconnect.addListener(function (a) {
-        console.log(a);
-      });
 
+      $scope.module, $scope.type, $scope.suppressedMessages = {}, $scope.suppressedMessagesLength = 0;
+      var currentPromises;
+      //message data will be an array sent from hint log to batarang to here
       $scope.labels = ['All Messages', 'Error Messages', 'Warning Messages', 'Suggestion Messages'];
 
       function updateAll(){

hintService.js

@@ -0,0 +1,26 @@
+angular.module('ngHintUI').
+  service('hintService', function() {
+    var onHintFunction;
+
+    this.setHintFunction = function(hintFunction) {
+      onHintFunction = hintFunction;
+    }
+
+    this.getHintFunction = function() {
+      return onHintFunction;
+    }
+
+    var port = chrome.extension.connect();
+    port.postMessage(chrome.devtools.inspectedWindow.tabId);
+    port.onMessage.addListener(function(msg) {
+      if(msg == 'refresh') {
+        this.messageData = [];
+        return;
+      }
+      onHintFunction(msg);
+    });
+
+    port.onDisconnect.addListener(function (a) {
+      console.log(a);
+    });
+});

hintService_test.js

@@ -0,0 +1,40 @@
+describe('hintService', function() {
+  var hintService;
+
+  beforeEach(module('ngHintUI'));
+  beforeEach(inject(function(_hintService_) {
+    hintService = _hintService_;
+  }));
+
+  var messageFunction = {
+    addListener: jasmine.createSpy('messageFunction')
+  }
+  var postMessageFunction = jasmine.createSpy('postMessageFunction');
+  var onDisconnectFunction = {
+    addListener: jasmine.createSpy('onDisconnect')
+  }
+  chrome = {
+    extension: {
+      connect: function() {
+        return {
+          onMessage: messageFunction,
+          postMessage: postMessageFunction,
+          onDisconnect: onDisconnectFunction
+        };
+      }
+    },
+    devtools: {
+      inspectedWindow: {
+        tabId: 1
+      }
+    }
+  };
+
+  it('should set the function to be executed for each hint', function() {
+    var onHintFunction = function() {
+      console.log('Do this when passed a hint.');
+    };
+    hintService.setHintFunction(onHintFunction);
+    expect(hintService.getHintFunction()).toEqual(onHintFunction);
+  });
+});