Contents
我决定从开始就对QToolKit相关项目进行严格测试。由于对测试程序框架不熟悉,在选择测试程序框架时遇到一些问题。最初打算使用jest,倒不是看中它有强大自动mock功能,而是相信facebook自己使用的东西错不了。但是我在测试程序中使用XMLHTTPRequest时,总是提示网络不可用。在网上找到的答案都是关于如何mock XMLHTTPRequest的,而我更想进行实际的网络请求测试。所以只好重新审视自己的需求,希望找一个真正合适的测试程序框架:
1.能够在真实浏览器中测试。除了karma,好像没有什么可以选择。这货功能确实非常强大:
1 2 3 4 5 6 7 8 9
| *.You want to test code in real browsers. *.You want to test code in multiple browsers (desktop, mobile, tablets, etc.). *.You want to execute your tests locally during development. *.You want to execute your tests on a continuous integration server. *.You want to execute your tests on every save. *.You love your terminal. *.You don't want your (testing) life to suck. *.You want to use Istanbul to automagically generate coverage reports. *.You want to use RequireJS for your source files.
|
2.使用起来方便,支持同步和异步功能的测试。karma不是测试程序框架也不是assert库,还需要自己选择相应的插件。我开始选择的是jasmine,用jasmine的人很多,上手也很简单。用了两天后,发现没法测试异步函数(后来找到了相应的插件),又去研究了人气很高的mocha,它对异步测试支持非常完美。果断选择了mocha, mocha也没有提供assert库,由使用者自己选择第三方assert库。我选择了better-assert,主要原因是它简单,而且合乎我的习惯。
3.能提供代码覆盖率的报表。karma也有converage相应的插件。使用起来比较方便。当然也有些小问题,一是源代码会被改得面目全非,如果有问题没法调试,所以调试版本需要关掉代码覆盖率的测试功能。二是第三方库也会被统计起来,而这些库通常没有专门的测试程序,这会拉低整体的覆盖率。为了让报表好看一点,也可以为这些库写一些测试程序。
4.方便集成github持续集成的功能。karma也支持第三方的持续集成系统,其中不少支持github,这一部分看起来比较简单,用到的时候再深入研究。
QToolKit是用Typescript开发的,先用tsc编译成JS,然后用webpack打包成一个文件,再使用上面的框架,整个过程还是比较流畅的:
1.先安装node及npm,为了避免不必要的麻烦,请安装最新的版本。
2.创建一个项目。
1 2 3 4 5 6
| mkdir foo cd foo npm init //test command输入下面的内容: //tsc && webpack && ./node_modules/karma/bin/karma start
|
3.安装依赖的软件包,软件包比较多,建议使用淘宝的镜像。
1
| npm install karma karma-chrome-launcher karma-coverage karma-firefox-launcher karma-mocha mocha ts-loader typescript typings webpack --save
|
4.初始化Typescript项目,生成tsconfig.json。
5.编写代码。
src/sum.ts
1 2 3
| export = function sum(x:number, y:number) : number { return x + y; }
|
src/index.ts
1
| export import sum = require("./sum");
|
tests/sum.test.js
1 2 3 4 5
| describe('sum', function() { it('test sum', () => { assert(foo.sum(100, 200) === 300);; }); });
|
6.创建一个webpack的配置文件webpack.config.js。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| var webpack = require('webpack'); var libraryName = 'foo'; module.exports = { cache: true, entry: { index : './src/index.js' }, output: { path: '', filename: '[name].js', library: libraryName }, resolve: { extensions: ['', '.webpack.js', '.web.js', '.js'] } }
|
7.创建karma的配置文件,先运行下面的命令,再手工修改:
1
| ./node_modules/karma/bin/karma init
|
加入测试需要的JS文件:
1 2 3 4 5
| files: [ 'index.js', '__tests__/assert.js', '__tests__/*.test.js' ],
|
增加覆盖率支持:
1 2 3 4 5 6 7 8 9 10
| preprocessors: { 'index.js': ['coverage'] }, reporters: ['progress', 'coverage'], overageReporter: { type : 'html', dir : 'coverage/' },
|
基本功能完成了,运行测试:
这时会自动启动浏览器进行测试,浏览器中有个Debug按钮,点击Debug按钮可以打开被测试的页面,如果有问题可以在浏览器中调试。覆盖率的数据在coverage目录下,这个是在karma的配置文件中指定的。
里面的配置参数很多,等用到了再去研究。
参考:Foo