前端单元测试的摸索(环境搭建)

前言

昨天说到建立一个通用的测试环境,像我这么正直的人当然不会跳票,结合昨天所学并看了一堆文档,对于最基础的单元测试自动化环境如何搭建基本就有了个底。

本文的代码我放到github上,有兴趣的点这里

正文

首先我们再次确定我们用到的工具和环境。

环境:Node.js最新版本 工具:karma mocha should

断言工具选择should是因为它更符合BDD测试的语义。而且它与mocha同出自TJ大神。用起来肯定更加顺手。

对于Karma,建议去看官方文档,直接戳这里

对于should,也是看官方文档,直接戳这里

对于mocha,也是官方文档走起,直接戳这里

搭建之前

我们需要在搭建之前考虑一些东西,因为是第一版本,需要它能够扩展,也就是我们只需要它提供正常的单元测试自动化功能而且可以和别的环境不冲突。

然后因为大多数测试都可以在命令行下看到结果,虽然mocha提供了web显示单元测试结果的内容,但是需要你手动去配置。这显然不符合我们的自动化需求。而且我们主要还是用karma来作为载体,mocha只是其中的一个框架,因此我们需要karma来完成这样的可视化需求。幸好社区比较给力,我们有karma-htmlfilealt-reporter来帮助我们完成这项任务。

建议看搭建内容之前去阅览一下karma的官方文档,这样不至于一头雾水。

搭建

我们搭建之前先确定所需要的依赖。也就是我们package.json里面的内容:

  "dependencies": {
    "karma-should ": "^1.0.0",
    "colors": "^0.6.2",
    "karma": "^0.12.22",
    "karma-chrome-launcher": "^0.1.4", //以chrome启动,可以在配置文件中选择
    "karma-coverage": "^0.2.6",
    "karma-firefox-launcher": "^0.1.3",
    "karma-mocha-reporter": "^1.1.3", //因为最后不管是命令行还是web形式,我们都是需要mocha来完成输出结果,因此需要
    "karma-mocha": "^0.1.8",
    "karma-htmlfilealt-reporter": "~0.1",
    "mocha": "^1.21.4"
  },

可以很清晰的看到我们基本都是以karma插件来完成我们的需求。

然后我们确定环境的结构,如下:

├── README.md
├── coverage
│   └── Chrome //这是chrome浏览器下的测试
├── karma.conf.js //主要的配置文件
├── node_modules
│   ├── colors
│   ├── karma
│   ├── karma-chrome-launcher
│   ├── karma-coverage
│   ├── karma-firefox-launcher
│   ├── karma-htmlfilealt-reporter
│   ├── karma-mocha
│   ├── karma-mocha-reporter
│   ├── karma-should
│   ├── mocha
│   └── should
├── package.json
├── src
│   └── test1.js //作为测试的源文件
├── test
│   └── linshui.js //测试脚本
└── unitTestResult //最后输出的web形式的报告
    ├── assets
    └── units.html
    

之后我们就是来配置karma.conf.js

// base path, that will be used to resolve files and exclude
        basePath: './',

        frameworks: ['mocha'], //我们主体框架就是Mocha,因此在这里添加

// list of files / patterns to load in the browser
        files: [
            {pattern: 'node_modules/should/should.js', include: true}, //这是浏览器加载的断言
            'src/*.js',//浏览器加载的源文件
            'test/*.js'//浏览器加载的测试文件
        ],


// list of files to exclude
        exclude: [
            'karma.conf.js'
        ],


// use dots reporter, as travis terminal does not support escaping sequences
// possible values: 'dots', 'progress', 'junit', 'teamcity'
// CLI --reporters progress
			//这是最终报告结构,可以多个输出,htmlalt就是我们web形式的输出
        reporters: ['progress', 'mocha', 'coverage','htmlalt'],
			
        mochaReporter: {
          output: 'autowatch' //自动监听测试文件是否修改
        },

        preprocessors: {
            'src/*.js': 'coverage'
        },

        htmlReporter: {
          outputFile: 'unitTestResult/units.html', //web形式输出目录
                
          // Optional 
          pageTitle: '临水照影单元测试', //描述
          subPageTitle: '项目描述'
        },



//Code Coverage options. report type available:
//- html (default)
//- lcov (lcov and html)
//- lcovonly
//- text (standard output)
//- text-summary (standard output)
//- cobertura (xml format supported by Jenkins)
        coverageReporter: {
            // cf. http://gotwarlost.github.com/istanbul/public/apidocs/
            type: 'lcov',
            dir: 'coverage/'
        },

// web server port
        port: 9876, //监听端口


// cli runner port
        runnerPort: 9100,


// enable / disable colors in the output (reporters and logs)
        colors: true,


// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
        logLevel: karma.LOG_DEBUG,


// enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,


// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
// CLI --browsers Chrome,Firefox,Safari
        browsers: ['Chrome'],


// If browser does not capture in given timeout [ms], kill it
        captureTimeout: 6000, //超时处理


// Continuous Integration mode
// if true, it capture browsers, run tests and exit
        singleRun: false,

			//插件管理,记住每当你在上面配置了一些插件里的内容,都需要在这里加载
        plugins: [
            'karma-mocha',
            'karma-chrome-launcher',
            'karma-firefox-launcher',
            'karma-mocha-reporter',
            'karma-coverage',
            'karma-htmlfilealt-reporter'
        ]
    });

之后我们写个测试例子:

test1.js


var linshuizhaoying = function  (num) {
	return num + 1;
}

linshui.js

describe('karma tests with should', function() {
  var user = {
    name: 'foo'
  };
 
  it('should have a name', function() {
    user.should.have.property('name', 'foo');
  });
});
describe('自增加函数测试', function() {
 	var b = linshuizhaoying(2);
  it('正向测试,自增加结果应该为3', function() {
    b.should.be.eql(3);
  });
  it('反向测试,自增加结果不为1', function() {
    b.should.not.be.eql(1);
  });
});

从上面可以看到我们并不需要自己去加载一些东西,都是karma已经帮我们完成了。比如如果你需要jquery依赖,你可以直接修改package.json添加karma-jquery,然后在配置文件中添加插件.

之后我们来运行看看。

imgn

可以看到不仅命令行显示了而且打开unitTestResult目录下的units.html可以看到web形式的输出报告。

现在比较麻烦的就是每当你第一次运行测试想要看到web形式报告都需要自己去手动打开units.html,之后修改测试可以直接刷新页面。

结尾

这只是第一个版本的单元测试自动化环境,它还可搭配webpack,配合vue等等扩展。以及如何在项目中配合单元测试,如何编写比较好的可测试的代码等等。都将在未来一一去尝试去总结。

Table of Contents