使用karma做多瀏覽器的UI測試


avalon1.6開發得差不多,這次使用先進的開發理念進行開發,比如模塊化,單元測試什么。。。

ui測試是重要的一環,之前用阿里的totoro,但打開瀏覽器不方便。於是從webdrieverio, nightwatch,一直找到karma!

karma的官網尤其爛,我搞了好久才能運行起來

用到的npm模塊有:

karma
karma-mocha
karma-mocha-reporter
karma-firefox-launcher
karma-chrome-launcher
karma-opera-launcher
karma-safari-launcher

在你項目下添加karma.config.js

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['mocha'],
        files: [
            {pattern: 'node_modules/chai/chai.js', include: true},
            'karma/index.js'
        ],
        exclude: [],
        reporters: ['mocha'],
        mochaReporter: {
            output: 'autowatch',
            colors: {
                success: 'green',
                info: 'bgGreen',
                warning: 'cyan',
                error: 'bgRed'
            }
        },
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
//autoWatch為true,Karma將自動執行測試用例
        autoWatch: true,
//http://www.cnblogs.com/NetSos/p/4371075.html
        browsers: ['Opera','Chrome', 'Firefox',"Safari"],
        singleRun: false,
        plugins: [
            'karma-mocha',
            'karma-mocha-reporter',
            'karma-firefox-launcher',
            'karma-chrome-launcher',
            'karma-opera-launcher',
            'karma-safari-launcher'
        ]
    })
}

然后我們在此項目中建立一個叫karma的目錄,里面建index.js


/**
 * Created with IntelliJ IDEA.
 * User: shenyanchao
 * Date: 3/5/13
 * Time: 5:51 PM
 * To change this template use File | Settings | File Templates.
 */

var assert = chai.assert;
var should = chai.should();

describe('Array', function(){

    before(function(){
        console.log('this called in before all');
    });
    beforeEach(function(){
        console.log('invoke before each method');
    });

    afterEach(function(){
        console.log('invoke after each method');
    });
    after(function(){
        console.log('this called in after all');
    });



    describe('#indexOf()', function(){

        it('should return -1 when the value is not present', function(){
            console.log('invoke one assert');
            assert.equal(-1, [1,2,3].indexOf(5));
            assert.equal(-1, [1,2,3].indexOf(0));

        });
    });

    describe('#indexOf()', function(){

        it('should return -1 when the value is not present', function(){
            console.log('invoke second should');
            [1,2,3].indexOf(5).should.equal(-1);
            [1,2,3].indexOf(0).should.equal(-1);
        });
    });
})

然后執行karma start命令就能看到效果

大家還看不懂,可以看這里


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM