2015-01-07 122 views
0

这是我第一次在Angular中测试,也是我第一次在新工作中测试。我试图编写一个测试,看看MainCtrl.lables包含的东西(或理想情况下从dataRepository获取值) 有谁知道如何做到这一点或知道任何好的资源角度测试需要服务的控制器?我很难找到如何使用嘲笑的好信息。Angular中的单元测试

MainCtrl.js

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

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

DataSrv.js

angular.module("ChartApp") 
    .factory('dataRepository', function() { 
     return { 
      labels: ["Reading", "Coding", "Thinking About Coding", "Reddit", "StackOverflow"], 
      data: [500, 300, 300, 40, 220], 
      type: 'PolarArea', 
      title: "Angular Chart Expriment" 
     }; 
    }); 

MainCtrlSpec.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("Controller: MainCtrl", function() { 
    beforeEach(module("ChartApp")); 

    var ctrl, scope; 

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

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

回答

0

如果你想测试该服务,那么你应该写该服务的测试,而不是控制器。但是,如果你想测试它的控制器,你可以像这样:

describe('Controller: NewCtrl', function() { 
var NewCtrl, scope; 
    beforeEach(module('myApp')); 
    beforeEach(inject(function (_myService_, $controller, $injector, $rootScope) { 
    var scope = $rootScope.$new(); 
    ... 
     NewCtrl = $controller('NewCtrl', { 
        $scope: scope, // here you specify the custom mocked value you wish to set for the injected service 
     }); 
    ... 

    }); 
it('should have labels defined', function(){ 
     expect(scope.labels).toBeDefined(); 
     }); 
    ... 
    }); 

而在你的控制,你会做这样的事情:

$scope.labels = dataRepository.labels;

我也建议使用Karma runner,因为它有很多伟大的附加组件,如:

  1. karma-coverage
  2. karma-phantomjs launcher

还有,如果您使用的是现代的IDE它可能会与你的工作流程整合好;) 非常好的资源,开始使用单元测试控制器this one,因为它也潜入$httpBackend这是在代码中使用$resource$http时非常重要的工具。