javascript - 错误 : Unexpected request: GET/src/app/modules/login/resources/en. json 与 karma

Question

我在我的应用程序中使用 Angular 翻译，在编写单元测试时，它们因错误而失败

  Error: Unexpected request: GET /src/app/modules/login/resources/en.json
      No more request expected

这就是我的 karma.config 的样子:

'use strict';

var baseDir = 'client';

module.exports = {

  //This is the list of file patterns to load into the browser during testing.
  files: [
    baseDir + '/src/vendor/angular/angular.js',
    baseDir + '/src/vendor/angular-mocks/angular-mocks.js',
    baseDir + '/src/vendor/angular-ui-router/release/angular-ui-router.js',
    baseDir + '/src/vendor/angular-bootstrap/ui-bootstrap.min.js',
    baseDir + '/src/vendor/angular-bootstrap/ui-bootstrap-tpls.min.js',
    baseDir + '/src/vendor/angular-translate/angular-translate.js',
    baseDir + '/src/vendor/angular-translate-loader-partial/angular-translate-loader-partial.js',
    baseDir + '/src/app/modules/home/home.module.js',
    baseDir + '/src/app/modules/login/login.module.js',
    baseDir + '/src/app/app.js',
    baseDir + '/src/app/**/*.js',
    baseDir + '/src/app/modules/**/*.html',
    baseDir + '/test/unit/**/*.spec.js'
  ],

  //used framework
  frameworks: ['jasmine'],

  plugins: [
    'karma-chrome-launcher',
    'karma-phantomjs-launcher',
    'karma-jasmine',
    'karma-coverage',
    'karma-html-reporter',
    'karma-mocha-reporter',
    'karma-ng-html2js-preprocessor'
  ],

  preprocessors: {
    '**/client/src/**/*.js': 'coverage',
    '**/client/src/**/*.html': ['ng-html2js']
  },

  reporters: ['mocha', 'html', 'coverage'],

  coverageReporter: {
    type: 'html',
    dir: baseDir + '/test/unit-results/coverage',
    file: 'coverage.html'
  },

  htmlReporter: {
    outputDir: baseDir + '//test/unit-results/html'
  },

  ngHtml2JsPreprocessor: {
    moduleName: 'templates',
    cacheIdFromPath : function(filepath) {
      return filepath.substr(filepath.indexOf("appname")+8);
    }
  },

  logLevel: 'info',

  urlRoot: '/__test/',

  //used browsers (overriding in some gulp task)
  browsers: ['PhantomJS']
};

我已经尝试了一些解决方案，例如将 Angular-translate 添加到新的 .js 文件而不是 app.js 文件，然后在 karma.config.js 中排除该文件。这也是我的测试的简短代码。也许我可以以某种方式忽略这个 en.json 文件或者？

/* jshint undef:false*/
(function() {
  'use strict';

  describe('LoginCtrl', function() {
    var loginController, rootScope, q, state, mockLoginService, mockSessionService, scope;
    var mockupUser = {username: 'Test', password: 'Test1'};
    var mockupBadUser = {username: 'Test', password: 'Test123'};

    beforeEach(module('app'));
    beforeEach(module('login'));
    beforeEach(inject(function($rootScope, $controller, $q, $state, _LoginService_, _SessionService_) {
      rootScope = $rootScope;
      scope = rootScope.$new();
      q = $q;
      state = $state;
      mockLoginService = _LoginService_;
      mockSessionService = _SessionService_;
      //spyOn(mockLoginService , 'userLogin').and.returnValue(q.when({}));
      loginController = $controller('LoginCtrl as loginvm', {
        $scope : scope,
        mockLoginService : _LoginService_,
        mockSessionService : _SessionService_
      });
    }));
    describe('loginUser with good credentials',function(){
      beforeEach(function(){
        spyOn(mockLoginService , 'userLogin').and.callFake(function(mockupUser) {
          var deferred = q.defer();
          if (mockupUser.username === "Test" && mockupUser.password === "Test1") {
            deferred.resolve(mockupUser);
          }
          else {
            deferred.reject();
          }
          return deferred.promise;
        });
        spyOn(state, 'go');
        spyOn(mockSessionService, 'setUser');
      });
      it("should call loginUser from LoginService with good credentials", function() {
        var expectedState = 'root.home';
        loginController.loginUser(mockupUser);

        rootScope.$digest();

        expect(mockLoginService.userLogin).toHaveBeenCalledWith(mockupUser);
        expect(mockSessionService.setUser).toHaveBeenCalled();
        expect(state.go).toHaveBeenCalledWith(expectedState);
      });
    });
    describe('loginUser with bad credentials',function(){
      beforeEach(function(){
        spyOn(mockLoginService , 'userLogin').and.callFake(function(mockupBadUser) {
          var deferred = q.defer();
            deferred.reject();

          return deferred.promise;
        });
      });
      it("should call loginUser from LoginService with bad credentials", function() {
        loginController.loginUser();

        rootScope.$digest();

        expect(mockLoginService.userLogin).toHaveBeenCalled();
      });
    });
  });
})();

Zakaria 答案更新

beforeEach(function(){
    var $injector, $httpBackend;
    $injector = angular.injector (['ngMock']);
    $httpBackend = $injector.get ('$httpBackend');
    $httpBackend.whenGET("/src/app/modules/home/resources/en.json").respond({ title: 'Title' });
    $httpBackend.whenGET("/src/app/modules/login/resources/en.json").respond({ title: 'Title' });
  });

  describe('HomeCtrl', function() {
    var homeController, rootScope, q, state, mockDataService, mockSessionService, scope, modal;
    var mockupUsers = [....

我尝试添加其中一个测试，但它们仍然失败...唯一有效的解决方案是正如我之前所说的添加这两行:

$httpBackend.whenGET("/src/app/modules/home/resources/en.json").respond({ title: 'Title' });
    $httpBackend.whenGET("/src/app/modules/login/resources/en.json").respond({ title: 'Title' });

在每个单元测试中......我也尝试在 karma.config 中添加此 lins:

 baseDir + '/test/unit/**/*.spec.js',
  {
    pattern:  baseDir + '/src/app/modules/**/*.json',
    included: false,
    served: true
 ],

但也没有成功...

Answer 1

您可以使用 $httpBackend 服务来提供模拟翻译文件:

$httpBackend.whenGET("/src/app/modules/login/resources/en.json").respond({ title: 'Title' });

编辑 为了避免重复您的 beforeEaches(因为您的 $httpBackend.whenGET 应该出现在那里)，您可以引用 this post这解决了测试重复的问题。