角度单位测试未知提供者:$ scopeProvider

时间:2015-01-07 01:41:24

标签: angularjs unit-testing

您好我正在使用Jasmine编写我的第一个角度测试,但我一直收到错误

------测试开始:文件:C:\ Users \ Regan \ Documents \ Visual Studio 2013 \ WebSites \ Regan \ testApp \ TestProject \ ng-tests \ MainCtrlSpec.js ------ 使用内联模拟测试' MainCtrl:应该有​​标签'失败     错误:[$ injector:unpr]未知提供者:$ scopeProvider< - $ scope< - MainCtrl

我试过玩它但是卡住了。如果您发现问题,请告诉我。如果您还需要更多代码,请告诉我,但我认为问题出在这两个文件中。

MainCtrlSvc.js

/// <reference path="../../Scripts/angular/angular.js" />
/// <reference path="../../Scripts/angular/angular-mocks.js" />
/// <reference path="../../Scripts/chartjs/Chart.js" />
/// <reference path="../../Scripts/angular-chart.js-master/dist/angular-chart.js" />
/// <reference path="../../Scripts/controller/main-controller.js" />
/// <reference path="../../Scripts/service/data-service.js" />
/// <reference path="../../libs/jasmine/jasmine.js" />

describe("MainCtrl with inline mock", function () {
    beforeEach(module("ChartApp"));

    var ctrl, mockDataSrv;

    beforeEach(module(function($provide) {
        mockDataSrv = {
            labels: ["Reading", "Coding", "Thinking About Coding", "Reddit", "StackOverflow"],
            data: [500, 300, 300, 40, 220],
            type: "PolarArea",
            title: "Angular Chart Expriment"
        };
        $provide.value("DataSrv", mockDataSrv);
    }));

    beforeEach(inject(function ($controller) {
        ctrl = $controller("MainCtrl");
    }));

    it("should have lables", function () {
        expect(scope.labels).toBeDefined();
    });
});

MainCtrl.js

var app = angular.module("ChartApp", ["chart.js"]);

    app.controller("MainCtrl", ["$scope",
      function ($scope, DataSrv) {
          $scope.labels = DataSrv.labels;
          $scope.data = DataSrv.data;
          $scope.type = DataSrv.type;
          $scope.title = DataSrv.title;
      }
    ]);

2 个答案:

答案 0 :(得分:15)

由于没有$scope服务,$controller提供程序无法实例化注入的$scope参数。

您需要在使用$controller提供程序实例化控制器时提供范围。您可以在setUp中注入$rootScope,然后通过执行$rootScope.$new()来获取子范围。将其作为$controller contstructor的参数注入。即$controller("MainCtrl", {$scope:scope })其中范围是新的子范围,即使您可以传入$ rootScope。

   var ctrl, mockDataSrv, scope;
    //... Your code
    //...
    beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new(); //get a childscope
        ctrl = $controller("MainCtrl", {$scope:scope }); //Pass it as argument as $scope's value
    }));

答案 1 :(得分:3)

您没有在任何地方定义范围以传递到控制器

describe("MainCtrl with inline mock", function () {
    beforeEach(module("ChartApp"));

    var ctrl, mockDataSrv;

    beforeEach(module(function($provide) {
        mockDataSrv = {
            labels: ["Reading", "Coding", "Thinking About Coding", "Reddit", "StackOverflow"],
            data: [500, 300, 300, 40, 220],
            type: "PolarArea",
            title: "Angular Chart Expriment"
        };
        $provide.value("DataSrv", mockDataSrv);
    }));

    var scope; //<--- define scope
    beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new(); //<--- initialize scope
        ctrl = $controller("MainCtrl", {$scope: scope}); //<--- inject scope

    }));

    it("should have lables", function () {
        expect(scope.labels).toBeDefined();
    });
});