如何在不使用$ scope的情況下爲控制器編寫單元測試用例

我需要爲控制器中的方法編寫測試用例。在該控制器中，我使用的是this而不是$scope。如果我們使用$scope，我們可以寫下如下的測試用例。但是如果我在控制器中使用this，我該如何編寫測試用例。

app.controller('ExampleController', function(){ 
     var test = this; 
      this.testFunction = function(){ 
      return "Hello"; 
     } 
    });

卡瑪測試用例文件

describe('app module', function() { 

    beforeEach(module('testAngularApp')); 

    describe('ContentController', function() { 
     var scope, controller; 
     beforeEach(inject(function ($rootScope, $controller) { 
      scope = $rootScope.$new(); 
      controller = $controller; 
      controller('ContentController', { 
       $scope: $scope 
     }); 


     it('Should return Hello', function() { 
      expect(scope.testFunction()).toBe(true); 
     }); 
    });

來源

2017-03-03 Venkat Lokeswar

在這裏你去：

//--- CODE -------------------------- 
 
(function(angular) { 
 
    angular.module('myApp', []) 
 
    .controller('ExampleController', function() { 
 
     var vm = this; 
 
     vm.data = "HI!"; 
 
     this.testFunction = function(val) { 
 
     vm.data = val; 
 
     } 
 
    }); 
 

 
})(angular); 
 

 
// ---SPECS------------------------- 
 

 
describe('myApp', function() { 
 

 
    describe('Example Controller', function() { 
 
    var scope, controller; 
 

 
    beforeEach(module('myApp')); 
 

 
    beforeEach(inject(function($rootScope, $controller) { 
 
     scope = $rootScope.$new(); 
 
     controller = $controller('ExampleController', { 
 
     $scope: scope 
 
     }); 
 
     spyOn(controller, 'testFunction').and.callThrough(); 
 
    })); 
 

 
    it('expect controller should be defined', function() { 
 
     expect(controller).toBeDefined(); 
 
    }); 
 

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

 
    it('expect data should be initialized', function() { 
 
     expect(controller.data).toEqual("HI!"); 
 
    }); 
 

 
    it('expect data is updated when testFunction is called', function() { 
 
     controller.testFunction('Bye!'); 
 
     scope.$apply(); 
 
     expect(controller.testFunction).toHaveBeenCalled(); 
 
     expect(controller.data).toEqual("Bye!"); 
 
    }); 
 

 
    }); 
 

 
}); 
 

 
// --- Runner ------------------------- 
 
(function() { 
 
    var jasmineEnv = jasmine.getEnv(); 
 
    jasmineEnv.updateInterval = 1000; 
 

 
    var htmlReporter = new jasmine.HtmlReporter(); 
 

 
    jasmineEnv.addReporter(htmlReporter); 
 

 
    jasmineEnv.specFilter = function(spec) { 
 
    return htmlReporter.specFilter(spec); 
 
    }; 
 

 
    var currentWindowOnload = window.onload; 
 

 
    window.onload = function() { 
 
    if (currentWindowOnload) { 
 
     currentWindowOnload(); 
 
    } 
 
    execJasmine(); 
 
    }; 
 

 
    function execJasmine() { 
 
    jasmineEnv.execute(); 
 
    } 
 

 
}());

<body> 
 
    <!-- because we are testing our controller and not running we don't need a controller or even a module --> 
 
    <!-- so there is no ng-app or ng-controller in the markup --> 
 

 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.css"> 
 

 
    <!-- the order that these files load is critical, think twice before changing --> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine-html.js"></script> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/boot.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-mocks.js"></script> 
 

 
    <h2>Finished jasmine unit test</h2> 
 

 
</body>

來源

2017-03-03 16:16:30 Gaurav

如何在不使用$ scope的情況下爲控制器編寫單元測試用例

回答

相關問題