Komponententest auf Angularjs mit Jasmine und Webpack, Fehler Unbekannter Provider

Question

Ich möchte fragen, wie man diesen Fehler löst, der mich keinen Test schreiben lässt. Dies ist die AngularJS Fabrik (service.es6) ich testen möchte:

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 
}) 

Diese Konfiguration mein Test webpack ist:

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' 
     } 
    ] 
    } 
} 
}; 

und dies ist meine Datei js Test:

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(); 
    }); 
}); 

der Fehler Jasmin mir gibt, ist:

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

Wenn ich die Zeile Kommentar:

service = _TheMiddleOp_; 

die $ httpBackend Test bestanden wird korrekt und es nicht die anderen, natürlich. Ich habe auch versucht, die service.es6 ohne jeden Export zu importieren, mit nur dem Modul als Standard-Export und mit mehr Kombinationen. Vielen Dank im Voraus für jede Hilfe, die Sie mir geben könnten.

Answer 1

Offenbar ist Ihr Modul nicht definiert. Weil die Fabrik für dieses Modul registriert ist. Der Fehler liegt also in der Moduldefinition.

Es könnte drei Dinge falsch, wenn ich denke, kann:

var module = angular.mock.module(); 

Warum benötigt wird, um das? Warum schreibst du nicht vorher das angular.mock.module?

angular.mock.module('TheMiddleModule'); 

Die andere Option ist Ihre Fabrik und die Wahl der Variablen. Mein Vorschlag, es wie folgt umzuschreiben:

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

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

Die letzte Option ist, dass Ihre Webpack-Konfiguration falsch ist. Aber Sie können Ihren Test debuggen Sie konfigurieren es nicht zu einem singleRun;

Letzter Kommentar, der Komponententest selbst testet nichts; Und entfernen Sie den Haken, wenn $ httpBackend da ist, weil dann Ihr Test-Winkel-Mock funktioniert?