góc Unit Test cung cấp Unknown: $ scopeProvider

Question

Xin chào Tôi viết bài kiểm tra góc đầu tiên của tôi với Jasmine nhưng tôi tiếp tục nhận được lỗi

------ thử nghiệm bắt đầu: File: C: \ Users \ Regan \ Documents \ Visual Studio 2013 \ WebSites \ Regan \ testApp \ TestProject \ ng-tests \ MainCtrlSpec.js ------ Kiểm tra 'MainCtrl với nội tuyến giả: cần phải có lables' thất bại Lỗi: [$ injector: unh] Unknown provider : $ scopeProvider < - $ scope < - MainCtrl

Tôi đã thử chơi với nó nhưng bị kẹt. Nếu bạn gặp sự cố, vui lòng cho tôi biết. Nếu bạn cần thêm mã, vui lòng cho tôi biết nhưng tôi nghĩ rằng vấn đề nằm trong hai tệp này.

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

Vì không có $scope dịch vụ, nhà cung cấp $controller không thể nhanh chóng tiêm $scope tranh cãi.

Bạn cần cung cấp phạm vi trong khi khởi tạo bộ điều khiển bằng cách sử dụng nhà cung cấp $controller. Bạn có thể tiêm $rootScope trong thiết lập của mình và bạn có thể nhận phạm vi con bằng cách thực hiện $rootScope.$new(). Tiêm nó như một đối số cho các đối tượng $controller. tức là $controller("MainCtrl", {$scope:scope }) phạm vi là phạm vi con mới ngay cả khi bạn có thể chuyển vào $ rootScope.

tức là

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

phạm vi Bạn chưa xác định bất cứ nơi nào để vượt qua vào bộ điều khiển

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