为什么在浏览器不测试 AngularJS 应用程序时测试失败？

Question

最近几天我一直在尝试测试 AngularJS 1.3.15 代码。今天它让我发疯，给我无法在普通 GUI 浏览器上重现的错误。

第一个问题是 $route 的 current 属性。控制器如下：

...
.controller('HomeCtrl', ['$route', function($route) {
    var user = $route.current.locals.user;
...

上面的代码在测试时会抛出错误，但它会在浏览器上提示任何错误。

测试输出

在Chrome中失败了！

Chrome 41.0.2272 (Linux) Controller: HomeCtrl $controller.user should have an user FAILED
    TypeError: Cannot read property 'locals' of undefined
        at new <anonymous> (/home/lucio/chatbeats/app/app.js:26:28)

在 PhantomJS 中它失败了！

PhantomJS 1.9.8 (Linux) Controller: HomeCtrl $controller.user should have an user FAILED
    TypeError: Cannot read property 'locals' of undefined
        at new <anonymous> (/home/lucio/chatbeats/app/app.js:26:28)

浏览器输出

在 Chrome 中有效！

在 Firefox 中有效！

在 Chromium 中有效！

第二期是 $scope。为了检查之前的问题不是由处理不当的异步调用引起的（如前所述 here），我尝试使用 $scope.$on:

设置监听器

...
.controller('HomeCtrl', ['$scope', '$route', function($scope, $route) {
    $scope.$on('$routeChangeError', function() {
      console.log($route.current);
    });
...

测试套件无法识别 $scopeProvider 而浏览器可以。

测试输出

在Chrome中失败了！

Chrome 41.0.2272 (Linux) Controller: HomeCtrl $controller.user should not have the user signed in FAILED
    Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- HomeCtrl
    http://errors.angularjs.org/1.3.15/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20HomeCtrl

在 PhantomJS 中它失败了！

PhantomJS 1.9.8 (Linux) Controller: HomeCtrl should do something FAILED
    Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- HomeCtrl

浏览器输出

在 Chrome 中有效！

在 Firefox 中有效！

在 Chromium 中有效！

注意： 我运行两个应用程序都在同一个 grunt 任务下，这意味着它们都是运行 almost同时

正在使用的工具：

茉莉花 v2.2.0
业力 v0.12.32
PhantomJS 1.9.8 (Linux)（用于从 CLI 进行单元测试）
Chrome 41.0.2272（用于从 CLI 进行单元测试）
Chrome 版本 42.0.2311.90（64 位）（用于从 GUI 手动测试）
Chromium 版本 41.0.2272.76 Ubuntu 14.10（64 位）（用于从 GUI 手动测试）
Firefox 版本 37.0.2（用于从 GUI 手动测试）

您可以从 here 查看整个项目。

如果我在代码中遗漏了什么，请纠正我。

为什么会这样？有什么方法可以避免对 AngularJS 应用程序进行手动测试？

Answer 1

$route

单元测试通常独立于路由，因此您看到的文档和大多数示例不会在测试运行程序中包含 angular-route.js。这意味着 $route 服务将不存在于被测应用程序中（因此未定义）。所以当你实例化一个以$route为依赖的controller时，为了模拟当前的路由状态，你需要提供一个mock对象作为依赖。

$controller('HomeCtrl', {
    $route: {
        current: {
            locals: {
                user: { name: 'someUser' }
            }
        }
    }
});

$scope

当 angular 在浏览器中正常应用运行期间为您实例化控制器时，控制器关联的范围会自动为您确定。在测试中，由于您是自己创建控制器，因此您还需要自己创建作用域并将其分配给控制器。您可能在文档中遇到过以下内容。这只是创建一个新范围作为 $rootScope 的子级，并将其作为控制器的依赖项传递。您直接使用新范围而不是 $rootScope，这样您的测试就不会污染 $rootScope（又名全局范围）。

var scope = $rootScope.$new();

$controller('HomeCtrl', {
    $scope: scope
});

结合两者：

var scope = $rootScope.$new();

$controller('HomeCtrl', {
    $scope: scope,
    $route: {
        current: {
            locals: {
                user: { name: 'someUser' }
            }
        }
    }
});

为什么在浏览器不测试 AngularJS 应用程序时测试失败？

Why does test fails while browsers doesn't testing AngularJS apps?

javascript

unit-testing

google-chrome

phantomjs

angularjs