前端自动化测试

原文链接 fanshunkai的博客

gulp

使用gulp实现起服务，自动编译less和ES6

安装gulp

$ npm install gulp -g

安装connect,less和babel

$ npm init -y  //npm初始化
$ npm install gulp gulp-connect gulp-less gulp-babel babel-core babel-preset-es2015 --save-dev

创建gulpfile.js并编写gulp task

var gulp = require('gulp'),
connect = require('gulp-connect'),
less = require('gulp-less'),
babel = require('gulp-babel')


gulp.task('server',function(){
    connect.server({
        port:'8000'
    })
})

gulp.task('css',function(){
    gulp.src('style/*.less')
    .pipe(less())
    .pipe(gulp.dest('./style'))
})

gulp.task('es6',function(){
    gulp.src('./scripts/index.js')
    .pipe(babel())
    .pipe(gulp.dest('./dest'))
})
gulp.task('watch',function(){
        gulp.watch('./style/**/*.less',['css']);
        gulp.watch('./scripts/**/*.js',['es6']);
})
gulp.task('default',['css','es6','watch','server'],function(){
    console.log('success')
})

运行gulp，出现如下画面，gulp配置成功

配置karma

安装karma

$ npm install karma karma-jasmine jasmine-core karma-phantomjs-launcher --save-dev

配置scripts 在package.json中配置相关scripts命令

"scripts": {
   "test": "karma start",
   "karmainit":"karma init",
   "start": "gulp"
 },

初始化karma

$ npm run karmainit

选择 jasmine phantomjs 其余默认
生成karma.conf.js文件

配置karma.conf.js files中配置目标测试文件和测试用例,singleRun设为true

files: [
      './dest/add.js',
      './test/add.spec.js'
  ],...
singleRun:true

写测试用例 在./test/add.spec.js文件中写用例

describe('测试加法函数',function(){
    it('测试add(1)是否等于2',function(){
        expect(add(1)).toBe(2);
    })
})

运行karma进行单元测试

$ npm run test

出现以下画面，说明测试通过

GitHub: GitHub