angolare Unit Test Unknown fornitore: $ scopeProvider

Question

Ciao sto scrivendo il mio primo test angolare con Jasmine, ma continuo a ricevere l'errore

------ prova iniziata: file: C: \ Users \ Regan \ Documents \ Visual Studio 2013 \ WebSites \ Regan \ testApp \ TestProject \ ng-tests \ MainCtrlSpec.js ------ Test 'MainCtrl con inline mock: i lables' dovrebbero fallire Errore: [$ injector: unpr] Fornitore sconosciuto : $ scopeProvider < - $ scope < - MainCtrl

Ho provato a giocarci ma sono bloccato. Se vedi il problema per favore fammi sapere. Se hai bisogno di più codice per favore fammi sapere, ma penso che il problema sia in questi due file.

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

Poiché non v'è alcuna $scope servizio, $controller fornitore non può un'istanza $scope argomento iniettato.

È necessario fornire l'ambito durante l'istanziazione di un controller tramite il provider $controller. È possibile iniettare $rootScope nel setUp ed è possibile ottenere un ambito figlio eseguendo $rootScope.$new(). Iniettarlo come argomento per il contstructor $controller. vale a dire $controller("MainCtrl", {$scope:scope }) dove scope è il nuovo ambito figlio di anche tu puoi passare in $ rootScope.

cioè

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

portata non è stata definita da nessuna parte per passare al controller

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