Question

我正在开发一个位于Android WebView内的Angular应用程序。为了与我的Android应用程序进行交互，我在窗口范围内公开了一个对象：

window.MyAndroidApp

其中包含以下方法：

window.MyAndroidApp.doStuff();
window.MyAndroidApp.doOtherStuff();

我对如何通过Angular控制器与此对象进行交互而不直接引用它感到困惑，以便我可以通过单元测试来模拟它？

// How do I define androidFunctions as window.MyAndroidApp so that
// I may mock it for unit testing?
app.controller("MyCtrl", ["$scope", "androidFunctions", function($scope, androidFunctions) {
    androidFunctions.doStuff();
    androidFunctions.doOtherStuff();
}]);

Answer 1

将其转变为服务 - 然后您可以按正常方式模拟它。

angular.module('myApp').factory('androidManager', [$window, function ($window) {
   return $window.MyAndroidApp;
});

当你把它放在窗口上时，它也会在$ window上，因为你甚至可以用sinon

这样的方式模仿它

sinon.mock($window, 'MyAndroidApp', {
   doStuff: function () {....},
   doOtherStuff: function () {..}
});

Answer 2

您可以使用有角度的$window服务

来自docs

对浏览器窗口对象的引用。虽然窗口在JavaScript中是全局可用的，但它会导致可测试性问题，因为它是一个全局变量。在angular中，我们总是通过$ window服务引用它，因此可以覆盖，删除或模拟测试。 https://docs.angularjs.org/api/ng/service/$window

<script>
  angular.module('windowExample', [])
    .controller('ExampleController', ['$scope', '$window', function ($scope, $window) {
      $scope.greeting = 'Hello, World!';
      $scope.doGreeting = function(greeting) {
        $window.alert(greeting);
      };
    }]);
</script>

自定义角度窗口依赖项

2 个答案: