javascript - Angular 和 Karma - 为什么这个测试失败?

标签 javascript angularjs unit-testing karma-runner

我正在处理 Angular Phonecat tutorial ,并纳入 Opinionated AngularJS Styleguide 中的一些建议

但是,我很难理解为什么特定的 Karma 测试失败。

我的应用程序代码是:

function routeProvider(provider){ ... }

function phoneListCtrl(scope, http){ ... }

function phoneDetailCtrl(scope, http, routeParams){
    http.get("/phones/" + routeParams.phoneId + ".json").success(function(data){
        scope.phone = data;
    });
}

angular.module("phonecatApp", ["ngRoute"])
    .controller('PhoneListCtrl', ["$scope", "$http",  function($scope, $http){
         phoneListCtrl($scope, $http);
    }])
    .controller('PhoneDetailCtrl', ['$scope', '$routeParams', '$http', function($scope,     $routeParams, $http){
        phoneDetailCtrl($scope, $http, $routeParams);
    }])
    .config(['$routeProvider',function($routeProvider) {
        routeProvider($routeProvider);
    }]);

此应用程序代码在浏览器中运行,电话列表和电话详细信息 View 均按预期显示。控制台中没有报告任何错误。

但是,由于

,PhoneDetailCtrl 的此测试失败
PhoneCat Controllers PhoneDetailCtrl should fetch phone detail FAILED
Error: [$injector:unpr] Unknown provider: $routeParamsProvider <- $routeParams

describe("PhoneDetailCtrl", function(){
    var scope, $httpBackend, ctrl;

    beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller){
        $httpBackend = _$httpBackend_;
        $httpBackend.expectGET("phones/xyz.json").respond({name : "phone xyz"});

        $routeParams.phoneId = "xyz";
        scope = $rootScope.$new();
        ctrl = $controller("PhoneDetailCtrl", {$scope : scope});
    }));

    it("should fetch phone detail", function(){
        expect(scope.phone).toBeUndefined();
        $httpBackend.flush();

        expect(scope.phone).toEqual({name : "phone xyz"});
    });
});

具体来说,beforeEach(inject(function( ... ) { ... })); 在进入 angular-mocks.js< 中编码之前先抛出错误.

为什么在重新组织应用程序代码后测试代码就失败了,但在浏览器中仍然可以工作?仅当运行 Karma 测试时才会发生这种情况,所有 Protractor 测试均通过。

预计到达时间

有些人询问了 karma.conf.js 中的 files 数组。设置为:

files : [
  'app/bower_components/angular/angular.js',
  'app/bower_components/angular-route/angular-route.js',
  'app/bower_components/angular-mocks/angular-mocks.js',
  'app/js/**/*.js',
  'test/unit/**/*.js'
],

最佳答案

我在完全相同的测试中遇到了类似的错误。我发现问题在于模块是在内部 describe block 之一内定义的。将模块创建语句移动到顶级 describe block 修复了此错误。

错误代码如下:

'use strict';

describe('Controller: MainCtrl', function () {

    describe('PhoneListCtrl', function() {
        var scope, ctrl, $httpBackend;

        beforeEach(module('phonecatApp'));
        ...
    });

    describe('PhoneDetailCtrl', function() {
        var scope, $httpBackend, ctrl;
        ...
    });

正确应该是:

'use strict';

describe('Controller: MainCtrl', function () {

    beforeEach(module('phonecatApp'));

    describe('PhoneListCtrl', function() {
        var scope, ctrl, $httpBackend;
        ...
    });

    describe('PhoneDetailCtrl', function() {
        var scope, $httpBackend, ctrl;
        ...
    });

关于javascript - Angular 和 Karma - 为什么这个测试失败?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24985778/

相关文章:

javascript - 向 json 添加新值

javascript - AngularJS 将变量从自定义指令传递到模板

java - testng 类中的 Spring @ContextConfiguration 测试配置每个测试类只创建一次 beans,而不是每个测试

c# - 在 C# 中对 HTTP 请求进行单元测试

python - 通过修补 Flask 请求对 Python 包中的装饰器进行单元测试

javascript - 我如何才能等到 IndexedDB 实例关闭?

javascript - React Native 使用什么来允许 JavaScript 在 iOS 和 Android 上本地执行?

javascript - 令人困惑的 JavaScript 数组语法

javascript - NPM 审计警告

javascript - Angular 路由和 Bootstrap - 在不更改页面内容的情况下显示模式对话框?