Angular Unit Test Unknown provider: $ scopeProvider

Question

Hi, I am writing my first angular test with Jasmine, but I keep getting the error

------ Testing started: File: C: \ Users \ Regan \ Documents \ Visual Studio 2013 \ WebSites \ Regan \ testApp \ TestProject \ ng-tests \ MainCtrlSpec.js ------ Test 'MainCtrl with built-in layout: must have invalid tables Error: [$ injector: unpr] Unknown provider: $ scopeProvider <- $ scope <- MainCtrl

I tried to play with him, but got stuck. If you see a problem, let me know. If you need another code, please let me know, but I think the problem is in these two files.

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

Since there is no $scope service, the $controller provider cannot create an instance of the $scope argument entered.

You must provide scope when creating the controller instance using the $controller provider. You can enter $rootScope in your setUp, and you can get the child scope by doing $rootScope.$new() . Add it as an argument to the $controller constructor. ie $controller("MainCtrl", {$scope:scope }) , where scope is the new content area, even if you can go to $ rootScope.

i.e

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

Answer 2

You did not define an area anywhere to go to the 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(); }); });