karma单元测试

karma是单元测试工具

不叨叨，直接撸起袖子就是干

首先我们先使用node npm

npm install karma -g //安装到全局里

　npm install jasmine-core karam-coverage karma-jasmine karma-phantomjs-launcher --save-dev　 //安装依赖文件

然后使用

karma init  //初始化我们的配置文件 会生成karma.conf.js

我们进行选择Jasmine框架测试，使用无头浏览器PhantomJS（没有界面）：配置如上图

我们新建文件夹在根文件夹里unit 创建一个index.js方便测试。然后我们在创建一个docs文件夹方便放我们的最后测试结果的页面

//index.js  
window.test = function (a) {
    return a + 1
}
test(1)


function add(a) {
    return function (b) {
        return a + b
    }
}


function multi(x) {
    return function (y) {
        return x * y + 1
    }
}

接下来我们来写测试文件，新建一个index.spce.js代码如下

//index.spce.js  测试test如果传入1值会不会是2   依次类推
describe("运算功能测试", function () {
    it("运算", function () {
        expect(test(1)).toBe(2)
    })
    it("加法函数测试", function () {
        var add5 = add(1);
        expect(add5(2)).toBe(3)
    });
    it("乘法测试", function () {
        var multis = multi(1)
        expect(multis(5)).toBe(6)
    })
})

接下来我们把kamar.conf.js配置一下如下

// Karma configuration
// Generated on Sun Jun 03 2018 22:36:00 GMT+0800 (中国标准时间)

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: ["./unit/**.js", "./unit/**.spec.js"],


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


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      // source files, that you wanna generate coverage for
      // do not include tests or libraries
      // (these files will be instrumented by Istanbul)
      './unit/**/*.js': ['coverage']
    },

    // optionally, configure the reporter
    coverageReporter: {
      type: 'html',
      dir: './docs/coverage/'
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', '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: false,


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


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

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

接下来我们使用配置一下pageage.json 下的scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "unit": "karma start"
  },

接下来我们使用node命令行来运行一下

npm run unit

我们先把index.spec.js里的文件修改一下好让我们报错。

describe("运算功能测试", function () {
    it("运算", function () {
        expect(test(1)).toBe(3)//我把这里的值改了 正确应该是2
    })
    it("加法函数测试", function () {
        var add5 = add(1);
        expect(add5(2)).toBe(3)
    });
    it("乘法测试", function () {
        var multis = multi(1)
        expect(multis(5)).toBe(6)
    })
})

我把it("运算")//的最后输出值改了结果肯定不对接下来我们来执行一下

npm run unit

失败如下图：

接下来我们把值改回去，运行一下

npm run unit

成功如下：

然后打开根文件夹下的docs会生成如下

我们打开index.html页面

当当当测试成功，我们可以回家睡觉啦。

下次我们一起学习一下backstop构建自动化前端样式回归测试。加油！！

karma是单元测试工具

猜你喜欢