AngualrJS与Karma - 我如何为工厂编写单元测试?

时间:2017-01-23 20:52:04

标签: angularjs unit-testing karma-jasmine

我正在编写一个简单的AngularJS 1.x网络应用程序。

我有一个模块:

main.js:

var app = angular.module('app', []);

factory.js

app.factory('DataFactory', function(){

  var DataService = {};

  DataService.something = function() {
    return 5;
  };

  return DataService;

});

controller.js

app.controller('DataController', function ($scope, DataFactory) {
    $scope.searchText = null;
    $scope.results = DataFactory.something();
});

的index.html:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</script>
    </head>
    <body ng-app="app" ng-controller="DataController">
        <script src="app.js"></script>
        <script src="factory.js"></script>
        <script src="controller.js"></script>
    </body>
</html>

测试文件:

  describe('Data Factory Test', function() {

    var Factory;

    beforeEach(function() {
      angular.module('app');
    });

    beforeEach(inject(function() {
      var $injector = angular.injector(['app']);
      Factory = $injector.get('DataFactory');
    }));

    it('is very true', function(){
        expect(Factory).toBeDefined();
      // var output = Factory.something();
      // expect(output).toEqual(5);
    });

  });

karma.conf.js:

frameworks: ['jasmine'],


// list of files / patterns to load in the browser
files: [
    'node_modules/angular/angular.js',
    'node_modules/angular-mocks/angular-mocks.js',
    'app.js',
    'factory.js',
    'controller.js',
    'test/*.js'
]

如何编写单元测试以检查工厂是否存在,并检查某些内容的返回情况?

当我运行业力开始时,我一直收到错误: 错误:[$ injector:modulerr]由于以下原因无法实例化模块应用程序:         错误:[$ injector:unpr]未知提供者:$ controllerProvider

编辑:我搞定了。如果有和没有工厂,我如何编写控制器的单元测试?

2 个答案:

答案 0 :(得分:2)

第一部分展示了如何测试服务/工厂。 第二部分展示了两种控制器测试方式

  • 我们只是期望来自$ scope的一些变量已被更改
  • 我们希望某个服务/工厂被称为

可能所有这些测试都涵盖了我们所有的需求。

&#13;
&#13;
angular.module('app', []).factory('DataFactory', function() {

  var DataService = {};

  DataService.something = function() {
    return 5;
  };

  return DataService;

}).controller('DataController', function($scope, DataFactory) {
  $scope.searchText = null;
  $scope.results = DataFactory.something();
});

describe('Data Factory Test', function() {
  var Factory;

  beforeEach(module('app'));

  beforeEach(inject(function(_DataFactory_) {
    Factory = _DataFactory_
  }));

  it('is very true', function() {
    expect(Factory).toBeDefined();
    var output = Factory.something();
    expect(output).toEqual(5);
  });
});

describe('DataController ', function() {

  var $scope, instantiateController, DataFactory

  beforeEach(module('app'));

  beforeEach(inject(function($rootScope, $controller, _DataFactory_) {
    $scope = $rootScope.$new()
    DataFactory = _DataFactory_
    instantiateController = function() {
      $controller('DataController', {
        $scope: $scope,
        DataFactory: DataFactory
      })
    }
  }))

  // It shows that controller chenges $scope.results
  it('Calculates results', function() {
    expect($scope.results).toBe(undefined)
    instantiateController()
    expect($scope.results).toBe(5)
  })

  // It shows that DataFactory was called
  it('Calls `DataFactory.something`', function() {
    spyOn(DataFactory, 'something');
    instantiateController()
    expect(DataFactory.something).toHaveBeenCalled()
  })
});
&#13;
<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-mocks.js"></script>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您需要致电angular.injector

'use strict';

(function() {
  describe('Factory Spec', function() {

    var Factory;

    beforeEach(function() {
      angular.module('app');
    });

    beforeEach(inject(function() {
      var $injector = angular.injector(['app']);
      Factory = $injector.get('DataFactory');
    }));

    it('is very true', function(){
      var output = Factory.something();
      expect(output).toEqual(5);
    });

  });
  }());

测试控制器:

describe('PasswordController', function() {
  beforeEach(module('app'));

  var $controller;

  beforeEach(inject(function(_$controller_){
    // The injector unwraps the underscores (_) from around the parameter names when matching
    $controller = _$controller_;
  }));

  describe('$scope.grade', function() {
    it('sets the strength to "strong" if the password length is >8 chars', function() {
      var $scope = {};
      var controller = $controller('PasswordController', { $scope: $scope });
      $scope.password = 'longerthaneightchars';
      $scope.grade();
      expect($scope.strength).toEqual('strong');
    });
  });
});

来自here;