Web前端自動化單元測試

Web前端自動化單元測試

單元測試的不少，好比輔助開發，預測開發，提升模塊可靠性等。

還能夠提升項目開發思路。

前提需求

本文基於nodejs環境，使用jasmine參數框架和 Karma機器人。

nodejs:很少說，很突出。

https://nodejs.org

jasmine:老牌js測試框架，負責單元測試，測試腳本都是根據它的規範進行編寫。

https://github.com/jasmine/jasmine.github.io

Karma:負責自動化執行測試腳本，批量處理腳本。

http://karma-runner.github.io

安裝環境

1. 初始化npm

npm init

2. 安裝Karma

npm install karma --save-dev

3. 全局安裝karma-cli，方便調用karma

npm install karma-cli -g

4. 安裝jasmine框架支持

npm install karma-jasmine --save-dev

5. 安裝jasmine-core框架核心

npm install jasmine-core --save-dev

6. 安裝chrome瀏覽器控制器

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

7. 安裝執行結果插件karma-jasmine-html-reporter，插件有不少，不必定安裝該插件

npm install karma-mocha-reporter --save-dev
npm install karma-jasmine-html-reporter --save-dev

karma 參數配置

1. 初始化karma，生成karma.conf.js文件，該文件是karma配置文件

karma init

2. 執行後，終端會提示一些信息，一路回車確認便可。

3. 配置karma參數，修改karma.conf.js文件

// Karma configuration
// Generated on Fri Mar 22 2019 10:58:15 GMT+0800 (China Standard Time)

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

        // karma 傳參數
        client: {
            // jasmine 框架參數
            jasmine: {
                // 隨機測試關閉,改成順序模式
                random: false,
            },
            // 不清除結果,直接在瀏覽器中顯示結果
            // karma-jasmine-html-reporter 插件參數
            clearContext: false
        },

        // 基礎路徑，用在files，exclude屬性上
        basePath: './VC',


        // 測試框架
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['jasmine'],


        // 須要加載到瀏覽器的文件列表
        // 好比框架文件,依賴文件,插件
        // 被測試的腳本文件 和 對應的測試規範腳本文件
        files: [
            //包含文件的詳細模式。相似地，能夠使用其餘選項
            // 框架文件,依賴文件,插件 中止監控
            {pattern: 'PC/Public/Common/JS/AngularJS/1.7.6/angular.min.js', watched: false },
            {pattern: 'PC/Public/Common/JS/AngularJS/1.7.6/*.min.js', watched: false },
            // 此文件將根據磁盤的要求提供，觀察者將忽略該文件
            {pattern: 'PC/Public/Common/JS/AngularJS/1.7.6/*.map', included: false, served: true, watched: false, nocache: true },
            {pattern: 'PC/Public/Common/JS/AngularJS/1.7.6/angular-mocks.js', watched: false },
            {pattern: 'PC/Public/Common/JS/ocLazyLoad/1.1.0/ocLazyLoad.min.js', watched: false },
            {pattern: 'PC/Public/Common/JS/layui/2.4.5/layui.js', watched: false },
            {pattern: 'PC/Public/Common/JS/layui/2.4.5/lay/modules/*.js', watched: false },
            {pattern: 'PC/Public/Common/JS/layui/2.4.5/css/**/*.css', watched: false },
            // 自定義類包文件,服務文件,
            'PC/Public/Common/JS/CommonJS.js',
            'PC/Public/Common/JS/CommonJS.spec.js',
            'PC/Public/Common/JS/Service/*.js',
            'PC/Public/Common/JS/Service/*/*.js',
            // 加載全部腳本文件
            'PC/Public/Template/**/*.js',
            // 加載全部 *.spec.js 結尾對測試規範文件
            'PC/Public/Template/**/*.spec.js'
        ],


        // 排除的文件列表
        exclude: [],


        // 在瀏覽器使用以前處理匹配的文件
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {},


        // 使用測試結果報告者
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['mocha','kjhtml'],


        // web server port
        port: 9876,


        // 啓用或禁用輸出報告或者日誌中的顏色
        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,


        // 啓用或禁用自動檢測文件變化進行測試
        autoWatch: true,


        // 測試啓動的瀏覽器
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['Chrome'],


        // 開啓或禁用持續集成模式
        // 設置爲true, Karma將打開瀏覽器，執行測試並最後退出
        singleRun: false,

        // 併發級別（啓動的瀏覽器數）
        // how many browser should be started simultaneous
        concurrency: Infinity,

        // 依賴插件
        plugins: [
            'karma-chrome-launcher',
            'karma-jasmine',
            'karma-mocha-reporter',
            'karma-jasmine-html-reporter'
        ],


    })
}

執行測試

1. 執行代碼

karma start karma.conf.js