搭建Ionic2的单元测试环境(基于angular2的环境下延伸)

这里搭建的环境是Jasmine作为单元测试框架,Karma框架作为自动化测试的框架。

1.首先需要下载相关的依赖,

"jasmine""^2.8.0",

"jasmine-core""^2.8.0",

"jasmine-spec-reporter""^4.2.1",

"karma""^1.7.1",

"karma-chrome-launcher""^2.2.0",

"karma-cli""^1.0.1",

"karma-coverage-istanbul-reporter ""^1.3.0",

"karma-jasmine""^1.1.0",

"karma-jasmine-html-reporter""^0.2.2",

"karma-mocha-reporter""^2.2.4",

"karma-remap-istanbul""^0.6.0",

"typescript""2.3.4"

2.配置相关的文件

1.新建typings.json文件,写入如下内容

{

    "globalDependencies": {

        "jasmine""registry:dt/jasmine#2.5.2+20170317130948",

    }

}

 

2.新建karma.conf.js文件,并写入如下内容

module.exports = function (config) {

    config.set({

        basePath: '',

        frameworks: ['jasmine''@angular/cli'],

        plugins: [

            require('karma-jasmine'),

            require('karma-chrome-launcher'),

            require('karma-remap-istanbul'),

            require('karma-mocha-reporter'),

            require('@angular/cli/plugins/karma')

        ],

    files: [

        { pattern: './src/libriary/testing/preprocessors.ts'watched: false }

    ],

    preprocessors: {

        './src/libriary/testing/preprocessors.ts': ['@angular/cli']

    },

    mime: {

        'text/x-typescript': ['ts','tsx']

    },

    remapIstanbulReporter: {

        reports: {

            html: 'coverage',

            lcovonly: './coverage/coverage.lcov'

        }

    },

    angularCli: {

        config: './angular-cli.json',

        environment: 'dev'

    },

    reporters: config.angularCli && config.angularCli.codeCoverage

        ? ['mocha''karma-remap-istanbul']

        : ['mocha'],

    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: true,

    browsers: ['Chrome'],

    singleRun: false

    });

};

3.新建angular-cli.json,并写入如下内容

{

    "project": {

        "version""1.0.0",

        "name""app name"

    },

    "apps": [

        {

            "root""src",

            "outDir""dist",

            "assets": [

                "assets"

            ],

        "index""index.html",

        "main""./app/main.ts",

        "polyfills""../src/libriary/testing/polyfills.ts",

        "test""../src/libriary/testing/preprocessors.ts",

        "tsconfig""../src/libriary/testing/tsconfig.spec.json",

        "prefix""app",

        "mobile"false,

        "styles": [

            "styles.css"

        ],

        "scripts": ["../src/assets/lib/leaflet.js"],

        "environmentSource""../src/libriary/testing/environments/environment.ts",

        "environments": {

        "dev""../src/libriary/testing/environments/environment.ts",

        "prod""../src/libriary/testing/environments/environment.prod.ts"

    }

}

],

"addons": [],

"packages": [],

"test": {

"karma": {

"config""./karma.conf.js"

}

},

"defaults": {

"styleExt""css",

"prefixInterfaces"false,

"inline": {

"style"false,

"template"false

},

"spec": {

"class"false,

"component"true,

"directive"true,

"module"false,

"pipe"true,

"service"true

}

}

}

接下来是编写相关的文件,具体地址是

转载自 http://skyfly.xyz/2017/10/11/Front_End/ionic/how-to-settingup-unittest-for-ionic3x/

你可能感兴趣的:(工作记录)