在 Karma 单元测试中使用 ui-router 和指令时出现意外 GET

Question

我刚刚切换到使用 ui-router。我有一个调用 templateURL 的简单导航栏指令，但在 Karma 单元测试中它导致了异常

Error: Unexpected request: GET /directives/nav-bar/nav-bar.html No more request expected

导航栏指令：

'use strict';

angular.module('kitchenapp')
  .directive('navBar', function () {
    return {
      restrict: 'E',
      templateUrl: '/directives/nav-bar/nav-bar.html'
    };
  });

导航栏规范：

'use strict';

describe('Directive: nav-bar', function () {

  beforeEach(module('kitchenapp', 'templates'));

  var element, scope;

  beforeEach(inject(function ($compile, $rootScope, $httpBackend) {
    scope = $rootScope.$new();
    element = angular.element('<nav-bar></nav-bar>');
    element = $compile(element)(scope);
    scope.$apply();
    //$httpBackend.expectGET("/directives/nav-bar/nav-bar.html");
    $urlRouterProvider.otherwise(function(){return false;});
  }));

  it('\'s brand link should be titled \'KitchenApp\' and should       navigate to the root address when clicked', function () {
       console.log('Element', element);

  });
});

正如您在规范中看到的那样，我在 beforeEach 中尝试了很多方法，但似乎没有什么不同。

非常感谢任何帮助。

编辑 Karma.conf.js

'use strict';

module.exports = function (config) {
  config.set({

    basePath: 'client',

    frameworks: ['jasmine'],

    preprocessors: {
      '**/*.html': ['ng-html2js']
    },

    ngHtml2JsPreprocessor: {
      stripPrefix: 'client/',
      moduleName: 'templates'
    },

    plugins: [
      'karma-phantomjs-launcher',
      'karma-jasmine',
      'karma-ng-html2js-preprocessor'
    ],

    files: [
      'bower_components/angular/angular.js',
      'bower_components/angular-ui-router/release/angular-ui-router.js',
      'bower_components/angular-mocks/angular-mocks.js',
      'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
      'bower_components/angular-ui-grid/ui-grid.js',
      'bower_components/angular-ui-calendar/src/calendar.js',
      'bower_components/angular-animate/angular-animate.js',
      'bower_components/angular-sanitize/angular-sanitize.js',
      'bower_components/angular-cookies/angular-cookies.js',
      'bower_components/angular-resource/angular-resource.js',
      'bower_components/angular-socket-io/socket.min.js',
      'app.js',
      'views/**/*.js',
      'services/**/*.js',
      'directives/**/*.js',
      'directives/**/*.html',
      'filters/**/*.js'
    ],

    exclude: [
      'views/**/*.e2e.js',
      'services/socket/socket.service.js'
    ],

    reporters: ['progress'],

    port: 9876,

    colors: true,

    // possible values:
    // config.LOG_DISABLE
    // config.LOG_ERROR
    // config.LOG_WARN
    // config.LOG_INFO
    // config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    autoWatch: false,

    browsers: ['PhantomJS'],

    singleRun: true
  });
};

Answer 1

对！！明白了！！

好的，所以我使用 karma-ng-html2js-preprocessor 将我的文件从 .html 转换为 .html.js 文件，以便注入到页面中。如果您指定一个模块名称，那么您不必单独调用它们。

这里的问题主要是路径。我使用了 bangular 并且以某种方式在模板指令中添加了前面的斜杠，但在视图中没有。确保你做对了...

使用 ui-router 时，您需要访问 $urlRouterProvider - 您必须使用模块来完成，注入服务无法找到它。如果您将它包含在一系列参数中，那么注入器将完全失效并且将提供 none（有关更多信息，请参见）...

上面提供的 link @Christt 将在您进行单元测试时进一步帮助您，尽管我无法获得 '$urlRouterProvider.deferIntercept();'以任何有意义的方式工作...

在 Karma 单元测试中使用 ui-router 和指令时出现意外 GET

Unexpected GET when using ui-router and directive in Karma unit test

javascript

angularjs

karma-runner

angular-ui-router