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頁面

 

當當當測試成功，我們可以回家睡覺啦。