Question

我需要为控制器中的方法编写测试用例。在该控制器中，我使用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);
        });
    });

Answer 1

你走了：

//--- 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>

如何在不使用$ scope的情况下为控制器编写单元测试用例

1 个答案: