3

这是我的目录层次结构：

  • 应用程序
    • 后端/
    • 前端/
      • 控制器/
      • ...
    • 测试/
      • 控制器/
      • ...
      • 测试主cfg.js
    • 小贩/
      • 角/角.min.js
      • 下划线/下划线.js
      • ...
    • 业力.conf.js

这是 karma.conf.js 的内容：

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'requirejs'],
    files: [
      {pattern: 'test/**/*.spec.js', included: false},
      {pattern: 'vendor/angular/angular.min.js', included: false},
      {pattern: 'vendor/angular/angular-route.min.js', included: false},
      {pattern: 'vendor/angular/angular-mocks.js', included: false},
      {pattern: 'backend/public/**/*.js', included: false},
      {pattern: 'test/main.spec.js', included: false},
      'test/test-main-cfg.js'
    ],
    exclude: [
      '**/*.swp'
    ],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome', 'Firefox', 'Safari'],
    captureTimeout: 60000,
    singleRun: false
  });
};

下面是test/test-main-cfg.js，requires的配置文件和karma的起点：

var tests = [],
    file;
for (file in window.__karma__.files) {
  if (window.__karma__.files.hasOwnProperty(file)) {
    if (/.spec\.js$/.test(file)) {
      tests.push(file);
    }
  }
}

require.config({
  baseUrl: '/base/',
  paths: {
    'jquery': "vendor/jquery/dist/jquery.min",
    'angular': 'vendor/angular/angular.min',
    'angularRoute': 'vendor/anguar-route.min',
    'angularMocks': 'vendor/angular/angular-mocks',
    'underscore': 'vendor/underscore/underscore'
  },
  shim: {
    'underscore': {
      exports: '_'
    },
    // added
    'jquery': {
      exports: 'jquery'
    },
    'angular': {
      deps: ['jquery'],
      exports: 'angular'
    },
    'angularRoute': {
      deps: ['angular'],
      exports: 'angularRoute'
    },
    'angularMocks': {
      deps:['angular'],
      exports: 'angularMocks'
    }
  },
  deps: tests,
  callback: window.__karma__.start
});

我的规范文件之一是：

define(['underscore', 'jquery', 'angular', 'angularRoute', 'angularMocks'], function(_) {
  describe('UnitTest: ParamsSettings', function(_) {
    it('is defined', function() {
      expect(_.size([1,2,3])).toEqual(3);
    })
  })
});

我无法在规范文件中加载任何依赖项。非常感谢您的回答。

编辑：

karma.conf.js中的main.spec.js 可以使用 url 找到http://localhost:9876/base/test/main.spec.js，但是我有一个名为another.spec.js的文件，它与前一个文件在同一目录下，无法通过 url 找到http://localhost:9876/base/test/another.spec.js。

添加了@glepretre 提供的内容

4

2 回答 2

3

问题解决了。实际上，Karma 服务器没有提供我的任何 lib 文件。我们应该通过设置karma.conf.js的正确文件选项来指定 Karma 服务器提供的文件的位置。

所以我编辑如下：

...,
files: [
  {pattern: 'vendor/angular/angular.min.js', included: false},
  {pattern: 'vendor/angular/angular-route.min.js', included: false},
  {pattern: 'vendor/angular/angular-mocks.js', included: false},
  {pattern: 'vendor/jquery/dist/jquery.min.js', included: false},
  {pattern: 'vendor/underscore/underscore.js', included: false},
  {pattern: 'backend/public/**/*.js', included: false},
  {pattern: 'test/*.spec.js', included: false},
  {pattern: 'test/**/*.spec.js', included: false},
  {pattern: 'test/main.spec.js', included: false},
  'test/test-main-cfg.js'
],
...

实际上它可以更简单：

...,
files: [
  {pattern: 'vendor/**/*.js', included: false},
  {pattern: 'backend/public/**/*.js', included: false},
  {pattern: 'test/*.spec.js', included: false},
  {pattern: 'test/**/*.spec.js', included: false},
  {pattern: 'test/main.spec.js', included: false},
  'test/test-main-cfg.js'
],
...

这是文件选项的官方文档：这里

于 2014-03-08T00:03:03.697 回答
2

你不应该添加一些垫片吗？

在您的要求配置中：

require.config({
  baseUrl: '/base/',
  paths: {
    'jquery': "vendor/jquery/dist/jquery.min",
    'angular': 'vendor/angular/angular.min',
    'angularRoute': 'vendor/anguar-route.min',
    'angularMocks': 'vendor/angular/angular-mocks',
    'underscore': 'vendor/underscore/underscore'
  },
  shim: {
    'underscore': {
      exports: '_'
    },

    // added
    'jquery': {
      exports: 'jquery'
    },
    'angular': {
      deps: ['jquery'],
      exports: 'angular'
    },
    'angularRoute': {
      deps: ['angular'],
      exports: 'angularRoute'
    },
    'angularMocks': {
      deps:['angular'],
      exports: 'angularMocks'
    }
  },
  deps: tests,
  callback: window.__karma__.start
});

在您的规范文件中：

// moved underscore first to get the module in the function args
define(['underscore', 'jquery', 'angular', 'angularRoute', 'angularMocks'], 
  function(_) {
    describe('UnitTest: ParamsSettings', function() {
      it('is defined', function() {
        expect(_.size([1,2,3])).toEqual(3);
      });
  });
});

编辑：顺便说一句，如果您想查看使用我们与我的团队开发的 requireJS 的角度项目的入门应用程序结构。它基于App 结构的官方 Angular 最佳实践，您可以在此处获取：angular-requirejs-ready。

于 2014-03-07T16:06:35.443 回答