1. 关于Karma
- Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。
- 该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）。
- 这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。
2. Karma集成Jasmine进行单元测试
a.初始化 NPM
实现初始化 NPM 包管理，创建 package.json 项目管理文件。
使用参数 -y 直接按照默认值创建 packgae.json 项目管理文件。
PS C:\study\mykarma> npm init -y
Wrote to C:\study\mykarma\package.json:
{
"name": "mykarma",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
现在，可以在项目文件夹中看到 package.json 文件已经创建了。
b.安装 Karma
现在，可以直接使用 NPM 来安装 karma。
i 是 install 命令的缩写，-D 是 --save-dev 的缩写。
PS C:\study\mykarma> npm i -D karma npm WARN package.json [email protected]1.0.0 No description npm WARN package.json [email protected]1.0.0 No repository field. npm WARN package.json [email protected]1.0.0 No README data npm WARN optional dep failed, continuing [email protected]1.0.7 [email protected]0.13.21 node_modules\karma ├── [email protected]0.5.3 ├── [email protected]0.0.1 ├── graceful[email protected] ├── [email protected]2.5.2 ├── [email protected]1.3.4 ├── [email protected]1.1.2 ├── source[email protected] ├── [email protected]3.0.0 ├── [email protected]2.10.2 ├── dom[email protected] ([email protected], void[email protected], [email protected], [email protected]) ├── http[email protected] ([email protected], [email protected]) ├── [email protected]0.6.1 ([email protected], [email protected]) ├── [email protected]7.0.0 ([email protected], [email protected], [email protected], [email protected]) ├── [email protected]2.1.8 ([email protected]) ├── [email protected]3.0.0 ([email protected]) ├── [email protected]3.10.1 ├── expand[email protected] ([email protected], [email protected], [email protected]) ├── [email protected]0.6.31 ([email protected], [email protected]) ├── [email protected]3.4.1 ([email protected], [email protected], [email protected], [email protected]) ├── core[email protected] ├── body[email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) ├── [email protected]1.4.5 ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) └── [email protected]1.4.2 ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]) PS C:\study\mykarma>
现在我们可以使用 node 来运行 karma 了。
>node ./node_modules/karma/bin/karma
c.为了能在命令行直接执行 karma 命令，我们再安装一个 karma-cli.
-g 表示全局安装，这样可以在系统的任何文件夹中直接执行 karma 命令。
PS C:\study\mykarma> npm i -g karma-cli C:\Users\XXX\AppData\Roaming\npm\karma -> C:\Users\XXX\AppData\Roaming\npm\node_modules\karma-cli\bin\karma karma[email protected] C:\Users\guanjun\AppData\Roaming\npm\node_modules\karma-cli └── [email protected]1.1.7
安装之后，可以直接使用 karma 来启动测试了，首先检查一下当前的版本。
PS C:\study\mykarma> karma --version Karma version: 0.13.21 PS C:\study\mykarma>
祝贺你， 基本的 Karma 已经安装成功了。
d. 安装 Jasmine 和 chrome-launcher
我们使用 Karma 来驱动单元测试，所以只有 Karma 是不行的，还需要安装单元测试库以便运行测试脚本，安装测试库与 Karma 的适配器，还有各种浏览器的适配器。
这里我们安装 Jasmine 的测试支持和 chrome 浏览器的适配器。
对于 jasmine 来说，我们需要 Jasmine 的适配器，还必须有 jasmine-core 库。
karma-chrome-launcher 则提供了 karma 与 chrome 的适配器。
PS C:\study\mykarma> npm i -D jasmine-core karma-jasmine karma-chrome-launcher npm WARN package.json [email protected]1.0.0 No description npm WARN package.json [email protected]1.0.0 No repository field. npm WARN package.json [email protected]1.0.0 No README data npm WARN peerDependencies The peer dependency jasmine[email protected]* included from karma-jasmine will no npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly. jasmine[email protected] node_modules\jasmine-core karma[email protected] node_modules\karma-jasmine karma[email protected] node_modules\karma-chrome-launcher ├── fs[email protected] (null[email protected]) └── [email protected]1.2.4 ([email protected], [email protected])
现在涉及单元测试的基本工具已经安装就绪了。
e.Karma 的命令
karma 支持三个命令。
• start [<configFile>] [<options>] 启动 Karma 持续执行，也可以执行单次的测试，然后直接收集测试结果.
• init [<configFile>] 初始化配置文件.
• run [<options>] [ -- <clientArgs>] Trigger a test run.
创建 karma 配置文件
Karma 需要进行配置，配置文件比较复杂，可以使用 karma 提供的 init 命令来直接创建基础的配置文件。在处理过程中，我们可以使用交互方式提供测试的信息，Karma 根据这些信息生成一个基本的配置文件。配置文件的默认名称是 karma.conf.js。如果你提供了配置文件的名称，karma 会将配置信息写入到你提供的文件名中。
创建 Karma 配置文件
PS C:\study\mykarma> karma init Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine Do you want to use Require.js ? This will add Require.js plugin. Press tab to list possible options. Enter to move to the next question. > no Do you want to capture any browsers automatically ? Press tab to list possible options. Enter empty string to move to the next qu ion. > Chrome > What is the location of your source and test files ? You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js". Enter empty string to move to the next question. > src/**/*.js 02 2016 22:32:26.698:WARN [init]: There is no file matching this pattern. > test/**/*.spec.js 02 2016 22:33:26.513:WARN [init]: There is no file matching this pattern. > Should any of the files included by the previous patterns be excluded ? You can use glob patterns, eg. "**/*.swp". Enter empty string to move to the next question. > Do you want Karma to watch all the files and run the tests on change ? Press tab to list possible options. > yes Config file generated at "C:\study\mykarma\karma.conf.js". PS C:\study\mykarma>
由于我们没有提供配置文件名称，这里生成的是默认的配置文件 karma.conf.js 。
f. 启动 Karma
由于已经有了 karma 配置文件，现在可以使用 karma start 启动 karma 了，由于还没有测试，所以看不到测试结果是正常的。
需要注意的是 karma 配置中的 singleRun 这个参数，设置为 false 的话，karma 会自动监控测试环境，默认是 Chrome, 如果你关掉了，karma 会自动重新启动一个。如果配置为 true，执行一次测试之后，karma 会自动停掉。
在 singleRun 为 false 的情况下，执行的结果可能是这样的。
PS C:\study\mykarma> karma start 22 02 2016 10:54:11.796:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/ 22 02 2016 10:54:11.806:INFO [launcher]: Starting browser Chrome 22 02 2016 10:54:13.206:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#rbiYFxG0uTVJxpVoAAAA with id 13601272
g.单元测试
现在我们可以使用 Jasmine 开始写测试了。
在项目文件夹中，创建一个名为 test 的子文件夹来保存测试用例。然后在 test 文件夹中创建一个 unit 的文件夹来保存单元测试用例。
在这个文件夹中创建一个名为 hello.spec.js 的测试文件。
一般来说，我们会为测试用例的文件名称提供一个特定的模式，以便对测试用例进行统一处理，这里我们约定测试用例的文件名以 .spec.js 为结尾。
hello.spec.js
describe(‘hello, unit test.‘, function(){
it(‘should also be able to test‘, function(){
expect(true).toBe(true);
});
it(‘should be failed‘, function(){
expect(true).toBe(false);
})
});
这个测试包含了两个测试用例，一个一定成功，一个一定失败。
确认在我们 karma 的配置文件中，包含了我们的测试用例。
// list of files / patterns to load in the browser files: [ ‘test/**/*.spec.js‘ ],
现在，使用 karma start 启动测试，在控制台应该会看到如下的输出。
PS C:\study\mykarma> karma start 02 2016 11:09:31.137:WARN [karma]: No captured browser, open http://localhost:9876/ 02 2016 11:09:31.157:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/ 02 2016 11:09:31.167:INFO [launcher]: Starting browser Chrome 02 2016 11:09:32.561:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#ymfXfb-xI2a3fZ82AAAA with id 31292195 Chrome 47.0.2526 (Windows 7 0.0.0) hello, unit test. should be failed FAILED Expected true to be false. at Object.<anonymous> (C:/study/mykarma/test/unit/hello.spec.js:7:20) Chrome 47.0.2526 (Windows 7 0.0.0): Executed 2 of 2 (1 FAILED) (0.016 secs / 0.006 secs)
可以看到执行了两个测试，其中一个失败了，失败的测试为 hello, unit test 中的 should be failed 测试用例。
测试实际的代码
在项目文件夹中，创建一个名为 src 的子文件夹来保存我们的应用代码，在其中创建一个名为 add.js 的脚本文件，我们将来测试它的工作是否正确。
function add(a, b){
return a + b;
}
这个脚本非常简单，仅仅用来计算两个数字之后，没有任何的验证。
然后，我们针对它写两个测试用例，保存到 ./test/unit/add.spec.js 文件中。
describe(‘add function unit test.‘, function(){
it(‘2 + 3 = 5‘, function(){
var result = add( 2, 3 );
expect( result ).toBe( 5 );
});
it(‘2 + 3 = 6, this should faild.‘, function(){
var result = add( 2, 3 );
expect(result).toBe( 6 );
})
});
确认你的 karma 配置文件中，包含了被测试代码和测试代码。
// list of files / patterns to load in the browser files: [ ‘src/**/*.js‘, ‘test/**/*.spec.js‘ ],
现在的控制台输出应该是这样的。
PS C:\study\mykarma> karma start 02 2016 11:22:18.800:WARN [karma]: No captured browser, open http://localhost:9876/ 02 2016 11:22:18.810:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/ 02 2016 11:22:18.820:INFO [launcher]: Starting browser Chrome 02 2016 11:22:20.232:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#i6GaDaxNTy8HWL52AAAA with id 89457157 Chrome 47.0.2526 (Windows 7 0.0.0) add function unit test. 2 + 3 = 6, this should faild. FAILED Expected 5 to be 6. at Object.<anonymous> (C:/study/mykarma/test/unit/add.spec.js:9:24) Chrome 47.0.2526 (Windows 7 0.0.0) hello, unit test. should be failed FAILED Expected true to be false. at Object.<anonymous> (C:/study/mykarma/test/unit/hello.spec.js:7:20) Chrome 47.0.2526 (Windows 7 0.0.0): Executed 4 of 4 (2 FAILED) (0.021 secs / 0.007 secs)
祝贺你，现在你已经可以测试你的代码了！
如果你的应用是由一个一个独立的函数定义出来的，现在就已经可以进行测试了。
可以看到，使用 Karma 集成 Jasmine 测试是很方便的组合。
3. 代码覆盖率(Code coverage)
karma 的插件 karma-coverage 提供了测试代码覆盖率的支持。
karma 的页面：http://karma-runner.github.io/0.8/config/coverage.html 进行了说明。karma 使用 Istanbul.实现覆盖率统计。
首先你需要安装这个 Karma 插件，然后需要在配置文件的三个地方进行配置。
a.安装 karma-coverage
当然了，你必须安装这个组件才能完成覆盖率统计。可以看到，在安装这个插件的时候，已经安装了 Istanbul 。
npm i -D karma-coverage ├─┬ [email protected]0.13.21 │ ├─┬ [email protected]0.6.31 │ │ └── [email protected]4.3.6 │ └─┬ [email protected]0.6.1 │ ├── [email protected]0.0.10 │ └── [email protected]0.0.3 └─┬ karma[email protected] ├─┬ [email protected]1.0.12 │ └─┬ [email protected]3.7.0 │ ├── [email protected]1.2.0 │ └─┬ normalize[email protected] │ └── [email protected]5.1.0 └─┬ [email protected]0.4.2 ├─┬ [email protected]1.7.1 │ └─┬ [email protected]0.5.0 │ └── [email protected]0.0.3 └── [email protected]1.0.0
b.配置
涉及三个配置信息，两个是必须的，一个是可选的。
(1) 配置预处理器
这里配置哪些文件需要统计测试覆盖率，例如，如果你的所有代码文件都在 lib 文件夹中，你就需要如下配置。
preprocessors = {
‘**/lib/*.js‘: ‘coverage‘
};
注意不要包含你所依赖的库，测试文件等等，下面就是一个错误的配置信息。
files = [
JASMINE,
JASMINE_ADAPTER,
‘lib/*.js‘,
‘test/*.js‘
];
preprocessors = {
‘**/*.js‘: ‘coverage‘
};
(2) 配置报告
在配置文件中包含下面的信息来激活覆盖率报告器。
reporters = [‘coverage‘];
这样将会对每个浏览器创建一个覆盖率报告，另外，它还会创建一个 Json 文件，其中包含输出的中间数据。
配置报告选项
默认的报告格式如下：
coverageReporter = {
type : ‘html‘,
dir : ‘coverage/‘
}
type 是一个字符串值，取值可以是：
• html (default)
• lcov (lcov and html)
• lcovonly
• text
• text-summary
• cobertura (xml format supported by Jenkins)
dir 则用来配置报告的输出目录。如果是一个相对路径的话，将相对与 basePath 参数。
如果类型是 text 或者 text-summary，你可以配置 file 参数来指定保存的文件名。
coverageReporter = {
type : ‘text‘,
dir : ‘coverage/‘,
file : ‘coverage.txt‘
}
如果没有文件名，就会输出到控制台。
4.其它
a. Karma+Jasmine+ Require JS示例程序及介绍: https://github.com/kjbekkelund/karma-requirejs
b. 代码覆盖率效果图：
