欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解karma & jasmine自动化测试

程序员文章站 2022-04-26 18:57:54
前端包管理工具 代码重用和复用是快捷开发的一种重要方式,但是原始的代码模块散布于各个平台上,不好寻找,程序员对其进行有效管理也成为了一大难题。此时,依赖(包、插件、工具都可以称呼,本质是他人...

前端包管理工具

代码重用和复用是快捷开发的一种重要方式,但是原始的代码模块散布于各个平台上,不好寻找,程序员对其进行有效管理也成为了一大难题。此时,依赖(包、插件、工具都可以称呼,本质是他人写好封装后的代码模块)管理工具应需而生。依赖管理工具使用简单的命令即可提供 依赖的查找、安装、卸载等操作,深受广大程序员喜爱。
前端 Node.js 最为常用的依赖管理工具 是npm,npm 之于Node.js,就如?pip 之于 Python,gem 之于 Ruby,pear 之于 PHP , maven 之于Java

?

Karma 环境的搭建

安装 karma (karma用于run自动化测试脚本)

npm install karma --save-dev

安装karma-jasmine (jasmine用于编写单元测试用例)

npm install karma-jasmine --save-dev
npm install jasmine-core --save-dev

安装karma-chrome-launcher(用于启动chrome浏览器;如果是firefox可以使用karma-firefox-launcher;同理可得其他)

npm install karma-chrome-launcher --save-dev
npm install karma-firefox-launcher --save-dev

安装coverage(测试代码覆盖率)

npm install karma-coverage --save-dev

?

Jasmine

jasmine有四种类型的函数:

1. 分组 describe????

// 声明一类测试用例
describe('add algorithm',function(){
    // 在里面可以定义一些变量,如
    var a=1,b=2;
});

2. 用例 it

// 声明一类测试用例
describe('add algorithm',function(){
    // 在里面可以定义一些变量,如
    var a=1,b=2;
    // 声明一种测试用例
    it('test add one',function(){

    });

    it('test add two',function(){

    });
});

3. 期望 expect

4. 匹配to****

// 声明一类测试用例
describe('add algorithm',function(){
    // 可以定义一些变量,如
    var a=1,b=2;
    // 声明一种测试用例
    it('test add one',function(){
        // 期望 自定义的函数 addOne(1) 结果为 2, 反向读代码
        expect(2).toEqual(addOne(a));
        expect(3).toEqual(addOne(b));
    });

    it('test add two',function(){
        expect(3).toEqual(addTwo(a));
        expect(5).toEqual(addTwo(b));
    });
});

你可以在 github 或者 入门指导网站 了解到 jasmine 的详细信息?

github地址:?https://github.com/jasmine/jasmine

guide地址: ?https://jasmine.github.io/2.0/introduction.html

?

Karma 配置文件

读到这里,可能会有疑问:被测试函数 和 测试脚本应该放在哪里?

下面来看?karma 配置文件

在 karma.exe 所在目录下 或者 已将 karma 安装至 global

命令行输入(当然你也可以 命名为 **.conf.js)

karma init karma.conf.js

然后根据提示配置文件

配置 被测试代码路径 和 测试脚本路径 ( ** /?* 通配 文件路径/名称)

省略省略省略…………

出现以下提示表示配置完成

如果想做一些个性化的处理,可以打开文件并 添加/修改 配置项

/**
 * Created by lonelydawn on 2017-03-04.
 */

module.exports = function (config) {
    config.set({

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',


        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['jasmine'],


        // list of files / patterns to load in the browser
        files: [
            'public/bower_components/angular/angular.js',
            'app/javascripts/**/*.js',
            'test/**/*.js'
        ],


        // list of files to exclude
        exclude: [],


        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        //代码覆盖率测试 ,使用 karma-coverage
        preprocessors: {
            'app/javascripts/**/*.js': 'coverage'
        },


        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress','coverage'],
        coverageReporter: {
            type: 'html',
            dir: 'coverage/'
        },

        // web server port
        port: 9876,


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


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


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


        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['Chrome'],


        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false

    })
};

之后 命令行执行 ,即可开始测试 ( 在配置和启动的时候一定要注意路径问题 )

karma start karma.conf.js

?

Gulp下 karma 的使用

gulp 是一款非常简单好用的自动化构建工具,中文文档很详细。

gulp 中文文档地址 : http://www.gulpjs.com.cn/?

?

在 gulp 中使用karma 不再需要安装 gulp-karma组件

github原文:

Karma?integration into?Gulp.js-based build.?

?

将 Karma 配置到项目 node_modules中并将配置文件建好之后

在 gulpfile.js 中写入

var gulp=require('gulp');
var Karma=require('karma').Server;

// 前端自动化测试
gulp.task('test', function (done) {
    new Karma({
        // 配置文件所在路径
        configFile: __dirname + '/karma.conf.js',
        // 执行测试结束后退出
        singleRun:true
    }, done).start();
});

gulp.task('tdd', function (done) {
    new Karma({
        configFile: __dirname + '/karma.conf.js'
    }, done).start();
});

之后在命令行键入

gulp test

gulp tdd

执行测试即可.