Угловой Unit Test Неизвестный поставщик: $ scopeProvider

Question

Здравствуйте, я пишу свой первый угловой тест с Жасмин, но я получаю ошибку

------ Тестирование началось: Файл: C: \ Users \ Regan \ Documents \ Visual Studio 2013 \ WebSites \ Regan \ testApp \ TestProject \ ng-tests \ MainCtrlSpec.js ------ Тест 'MainCtrl с inline mock: должен иметь недопустимые lables Ошибка: [$ 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; 
     } 
    ]); 

Answer 1

Поскольку нет $scope службы, $controller провайдера не может создать экземпляр впрыскиваемых $scope аргумента.

Необходимо предоставить область действия при создании экземпляра контроллера с помощью поставщика $controller. Вы можете ввести $rootScope в свой setUp, и вы можете получить дочернюю область, выполнив $rootScope.$new(). Внесите его в качестве аргумента в конструктор $controller. i.e $controller("MainCtrl", {$scope: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 
    })); 

Answer 2

Вы не определили сферу в любом месте, чтобы передать в контроллер

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(); 
    }); 
});