Angular中的單元測試

這是我第一次在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(); 
    }); 
});

來源

2015-01-07 ReganPerkins

如果你想測試該服務，那麼你應該寫該服務的測試，而不是控制器。但是，如果你想測試它的控制器，你可以像這樣：

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，因爲它有很多偉大的附加組件，如：

還有，如果您使用的是現代的IDE它可能會與你的工作流程整合好;）非常好的資源，開始使用單元測試控制器this one，因爲它也潛入$httpBackend這是在代碼中使用$resource或$http時非常重要的工具。

來源

2015-01-07 00:29:29

Angular中的單元測試

回答

相關問題