在angularjs控制器中調用全局javascript函數的可測試方法

Question

全局描述

您具有必須在全局范圍內存在的功能。 您需要一種以可依賴注入的方式封裝這些功能的功能的方法，以便對其進行測試。 正確的方法是什么？

有點具體的描述

我遇到的情況是，我有一個現有的JavaScript庫，該庫在全局范圍內使用很多變量和函數。 該庫是SCORM引擎，該標准的一部分規定這些功能必須在全局范圍內可用（以便用戶創建的內容可以訪問它們）。

但是，在各種控制器中有兩個地方也必須稱為它們。 目前，我只是打電話給他們，但這使測試這些行變得困難，並且似乎違反了一般的角度觀念。

Plnkr

只是說明現在的情況

var globalVariable = 1;

function globalFunction(){
  return "cats";
}

var app = angular.module('plunker', []);

app.controller('MainCtrl', [ '$scope', function($scope) {
  $scope.name = 'World';
  $scope.cats = globalFunction(); //This line is hard to test and makes me feel dirty.
}]);

一個將函數包裝在工廠中的插件（也許在注釋中推薦了什么？）

var globalVariable = 1;

function globalFunction(){
  return "cats";
}

var app = angular.module('plunker', []);

app.factory('angularFriendly', function(){
  this.globalFunction = globalFunction;
  return this;
});

app.controller('MainCtrl', ['$scope', 'angularFriendly',
  function($scope, angularFriendly) {
    $scope.name = 'World';
    $scope.cats = angularFriendly.globalFunction();
  }
]);

當我說我考慮將其包裝在服務中時，這或多或少是我在原始評論中的意思。 我將函數設為可注入的（這很好，並且可測試性更高），但是我不確定這是一個好習慣（因為我剛剛將難以測試的代碼移到了其他位置）。

Answer 1

我更喜歡將第三方非Angular應用程序包裝到值對象中（這在功能上與使用工廠相同，並在注入之前立即調用它，這感覺更干凈）。

var globalVariable = 1;

function globalFunction(){
  return "cats";
}

var app = angular.module('plunker', []);
app.value('external', globalFunction);

app.controller('MainCtrl', ['$scope', 'external',
  function($scope, external) {
    $scope.name = 'World';
    $scope.cats = external();  // Treat the dependency as a service to resolve into the scope
  }
]);