引入Froala导致Karma单元测试失败

这种情况我碰到过好几次，核心原因是Karma测试环境并不会自动加载你在index.html里引入的Froala资源，而且Froala依赖jQuery，测试环境里没加载这些依赖的话，模块初始化直接就会报错。下面给你两种可行的解决方案：

方案一：在Karma配置中加载必要的依赖文件 #

打开你的karma.conf.js，找到files数组，把jQuery、Froala核心JS以及Angular-Froala插件按顺序加进去（顺序很重要，jQuery必须先加载）：

files: [
  // 优先加载Froala依赖的jQuery
  'bower_components/jquery/dist/jquery.min.js',
  // 加载Froala核心编辑器JS
  'bower_components/froala-wysiwyg-editor/js/froala_editor.min.js',
  // 加载AngularJS适配的Froala插件
  'bower_components/froala-wysiwyg-editor/js/angular-froala.min.js',
  // 保留你原本的项目文件和测试文件
  'app.js',
  'tests/**/*.js'
]

如果你的Froala安装路径和上面不一样，根据bower实际下载的目录调整路径即可。要是测试中某些指令初始化依赖样式，也可以把Froala的CSS加进files数组：

'bower_components/froala-wysiwyg-editor/css/froala_editor.min.css'

方案二：Mock Froala模块（适合不需要测试编辑器功能的场景） #

如果你的单元测试根本不需要验证Froala编辑器的功能，只是不想因为模块依赖导致测试失败，那直接mock一个空的froala模块就行。在你的测试文件的beforeEach块里添加：

beforeEach(function() {
  // 创建空的froala模块，替代真实依赖
  angular.module('froala', []);
  // 加载你的应用模块
  module('app');
});

这样Karma就不会去寻找真实的Froala模块，测试就能正常跑起来了。

额外检查点 #

• 确认bower安装的Froala版本和AngularJS 1.5兼容，部分新版本可能对老版本AngularJS支持不佳；
• 查看测试报错信息，如果是$injector:modulerr类型的错误，基本就是模块找不到或者依赖没加载全，对应上面的方案就能解决。

内容的提问来源于stack exchange，提问作者Leroy Greene