使用Jasmine和Webpack对Angularjs进行单元测试,错误未知提供程序

时间:2017-02-01 13:19:49

标签: javascript angularjs unit-testing webpack jasmine

我想问一下如何解决这个错误,这个错误不会让我写任何测试。 这是Angularjs工厂(service.es6)我想测试一下:

import Rx from 'rxjs/Rx'
var TheMiddleModule = angular.module('TheMiddleModule', [])
TheMiddleModule.factory('TheMiddleOp', function ($http){
  var api = 'someUrl'
  var TheMiddleOp = {}

  TheMiddleOp.getSsoidFromService = () => {
     return Rx.Observable.fromPromise(
        $http({
            method: 'GET',
            url: api
        })
     )
   }

   return TheMiddleOp
})

这是我测试的webpack配置:

var JasmineWebpackPlugin = require('jasmine-webpack-plugin');
module.exports = {
  entry: ['./app/scripts/test/service.js'],
  plugins: [new JasmineWebpackPlugin()],
  output: {
      path: __dirname,
      filename: 'test.js'
  },
  module: {
      loaders: [
      {
          test: /\.es6$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel?presets[]=es2015!eslint-loader'
      },
      {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel?presets[]=es2015!eslint-loader'
      }
  ]
  }
 }
};

这是我的js测试文件:

import 'angular';
import 'angular-mocks';
import '../services/service.es6';

var service;

describe('service test', function() {
    var $httpBackend, $httpProvider;
    var module = angular.mock.module();
    var url = 'someUrl';

    beforeEach(function () {

        module('TheMiddleModule');

        inject(function ( _$httpBackend_, _TheMiddleOp_) {
            $httpBackend = _$httpBackend_;
            service = _TheMiddleOp_;

            $httpBackend.when('POST', url)
            .respond(200, {'sso-id':'test'});
        });
    });

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

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

    it('should call the ssoid service', function (){
        var getFromService = service.getSsoidFromService()
        getFromService.subscribe(
            (response) => {},
            (e) => {},
            () => {
                $httpBackend.expectGET(url);
                $httpBackend.flush();
            }
        )
    });

    afterEach(function() {
        $httpBackend.verifyNoOutstandingExpectation();
        $httpBackend.verifyNoOutstandingRequest();
    });
});

茉莉花给我的错误是:

Error: [$injector:unpr] Unknown provider: TheMiddleOpProvider <- TheMiddleOp

如果我对该行发表评论:

service = _TheMiddleOp_;

$ httpBackend测试正确传递,当然,它会使其他测试失败。 我还试图导入service.es6而没有任何导出,只有模块作为默认导出和更多组合。 提前感谢您提供给我的任何帮助。

1 个答案:

答案 0 :(得分:0)

看起来您的模块未定义。因为工厂已注册到该模块。所以错误在模块定义中。

如果我猜错,可能会出现三件事:

var module = angular.mock.module();

为什么需要这个?为什么不在每个之前写出angular.mock.module?

angular.mock.module('TheMiddleModule');

另一个选择是您的工厂和变量的选择。我建议将其改写如下:

angular.module('TheMiddleModule', [])
  .factory('TheMiddleOp', function ($http){
    var api = 'someUrl';

    return {
     getSsoidFromService = () => {
        return Rx.Observable.fromPromise(
          $http({
            method: 'GET',
            url: api
        });
     )
    };
  });

最后一个选项是您的webpack配置错误。但您可以调试测试,将其配置为不是singleRun;

最后评论,单元测试本身没有测试任何东西;并删除检查$ httpBackend是否存在,因为那时你的测试角度模拟工作?

相关问题