javascript - 在 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 文件，以便注入(inject)到页面中。如果您指定 moduleName，则不必单独调用它们。

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

当使用 ui-router 时，您需要访问 $urlRouterProvider - 您必须使用模块来执行此操作，注入(inject)服务无法找到它。如果将其包含在一系列参数中，则注入(inject)器将完全失败并且不会提供任何内容(有关更多信息，请参阅 here)...

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