如何将 Karma 与 Rails 资产管道集成？答案

【问题标题】：How to integrate Karma with Rails asset pipeline?如何将 Karma 与 Rails 资产管道集成？
【发布时间】：2013-08-15 00:06:13
【问题描述】：

我想在我的 AngularJS + Rails 项目中使用 Karma 测试运行器。有没有人成功整合它们？更具体地说，我很想知道如何与资产管道集成（我有扩展名为 .coffee.erb 的文件，需要对其进行两次预处理）。

我使用 Karma 版本 0.10.1 和 Rails 4。

任何帮助/示例将不胜感激。

【问题讨论】：

标签： ruby-on-rails angularjs asset-pipeline karma-runner

【解决方案1】：

我一直在努力在我的 rails 应用程序中标记 Karma 了解 Sprockets，并设法提供了解决方案。您需要一个 rake 任务来获取在 application.js 中声明的资产列表，并将它们注入到 Karma 配置文件的 files 数组中。

在我的 rake 任务中，我有这个：

sprockets = Rails.application.assets
sprockets.append_path Rails.root.join("spec/karma")
files = Rails.application.assets.find_asset("application_spec.js").to_a.map {|e| e.pathname.to_s }

连同我的业力配置文件：

files: [
  APPLICATION_SPEC,
  'app/assets/javascripts/angular/*/*.{coffee,js}',
  'spec/javascripts/**/*_spec.{coffee,js}'
]

我将APPLICATION_SPEC 替换为所有链轮files。如果您想了解全局，我写了tutorial。

【讨论】：

【解决方案2】：

我还没有将它们集成在一起，但是对于我的项目，我选择了另一种方式，完全独立地为每个项目提供服务。因此，我在单独的目录中创建了一个 rails 应用程序和一个 angular 应用程序，然后我将 angular 应用程序符号链接到 rails 应用程序的公共目录，以便 rails 服务器将提供 angular 脚本和模板。

我这样做的逻辑是，我不希望在同一组代码中使用两个不同的预处理器，而且我不相信测试工具会相互配合。我还选择了使用 ng-boilerplate 附带的构建脚本，这些脚本正在做相当多的工作，否则 rake 或其他工具会完成这些工作。

我一直在写一个基于此的教程系列，可以在这里找到：http://technpol.wordpress.com/2013/08/11/rails-app-for-angularjs-simple-application/

【讨论】：

【解决方案3】：

目前我看到的一些替代方案：

在 Karma 配置中定义您的 erb 文件，可能适用于简单的情况。（来自http://jaketrent.com/post/import-erb-into-karma/）
使用 Middleman 构建 rails 应用程序并使用基于 Middleman 输出的 Karma 配置
在 Karma 配置中使用 http://localhost:port/assets/application.js 而不是直接引用文件 (http://danott.co/posts/rails-javascript-testing-using-karma.html)
使用/调整 Sebastien (http://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html) 的 karma.rake 任务
使用 karma 插件来填补空白（目前看到以下内容：karma-sprockets、https://github.com/steel/karma-sprockets-mincer）

【讨论】：

【解决方案4】：

我通过执行以下操作让 Karma 和 Angular 发挥得很好：

添加到您的development.rb 文件：

config.assets.prefix = "/dev-assets"

这会将您的资产预编译到public/dev-assets 文件夹中，与生产将转到public/assets 的方式相同。然后你可以添加到你的 karma 配置中：

files: [
    ...
    './public/dev-assets/*.js'`,
    ...
];

【讨论】：