参考来源： http://www.cnblogs.com/vipyoumay/p/5331787.html

这篇是学习基于Angularjs的nodejs平台的单元测试报告和覆盖率报告。用到的都是现有的工具，只是一些配置的地方需要注意。

环境前提：

1. nodejs 安装(https://nodejs.org/en/download/)

步骤：

1. npm init 创建一个nodejs工程。

2. 使用以下npm install 命令 下载node modules, 然后在package.json的scripts节点添加start命令如下：

npm install angular -D

npm install angular-mocks -D

npm install jasmine-core -D

npm install karma -D

npm install karma-chrome-launcher -D

npm install karma-coverage -D

npm install karma-html-reporter -D

npm install karma-jasmine -D

  "scripts": {"test": "karma start karma.conf.js"

  },

注： karma-chrome-launcher可以替换成你想要的其他浏览器，每个浏览器都有配套的karma luancher插件（http://karma-runner.github.io/1.0/config/configuration-file.html）

3. 创建一个以Angularjs为框架的demo做为测试的站点，只是为了测试用，不用太复杂。

新建html/index.html

<!DOCTYPE html>

<html lang="en" ng-app="app">

<head>

    <meta charset="UTF-8">

    <title>index</title>

</head>

<body>

<div ng-controller="indexCtrl">

    <input type="text" ng-model="a" value="0">

    +

    <input type="text" ng-model="b" value="0">

    =<span id='result'>{{add(a,b)}}</span>

</div>

</body>

</html>

<script src="../node_modules/angular/angular.min.js"></script>

<script src="../node_modules/angular-mocks/angular-mocks.js"></script>

<script src="../js/index.js"></script>

index.html

新建js/index.js

var angular = window.angular

var app = angular.module('app', []);

app.controller('indexCtrl', function($scope) {

        $scope.add = function (a, b) {

            if(a&&b) {

                return Number(a) + Number(b)

            }

            return 0;

        },

        $scope.minus = function(a, b) {

            if(a&&b) {

                return Number(a) - Number(b)

            }

            return 0;

        }

});

index.js

新建单元测试文件unittest/index-test.js

'use strict';

describe('app', function () {

    beforeEach(module('app'));

    describe('indexCtrl', function () {

        it('add 测试', inject(function ($controller) {

            var $scope = {};

            //spec body

            var indexCtrl = $controller('indexCtrl', {$scope: $scope});

            expect(indexCtrl).toBeDefined();

            expect($scope.add(2, 3)).toEqual(5);

            expect($scope.add(null, null)).toEqual(0);

        }));

        it('minus 测试', inject(function ($controller) {

            var $scope = {};

            //spec body

            var indexCtrl = $controller('indexCtrl', {$scope: $scope});

            expect(indexCtrl).toBeDefined();

            expect($scope.minus(3, 2)).toEqual(1);

            expect($scope.minus(null, null)).toEqual(0);

        }));

    });

});

index-test.js

4. 新建karma.conf.js文件，然后配置如下：

// Karma configuration

// Generated on Thu Jun 29 2017 13:30:09 GMT+0800 (China Standard Time)

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: [

        'node_modules/angular/angular.min.js',

        'node_modules/angular-mocks/angular-mocks.js',

        'js/*.js',

        'unittest/*.js'

    ],

    // list of files to exclude

    exclude: [

    ],

    // preprocess matching files before serving them to the browser

    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor

    preprocessors: {

    },

    // test results reporter to use

    // possible values: 'dots', 'progress'

    // available reporters: https://npmjs.org/browse/keyword/karma-reporter

    reporters: ['progress', 'html', '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: true,

    // start these browsers

    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher

    browsers: ['Chrome'],

    // 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,

    plugins: [

            'karma-chrome-launcher',

            'karma-jasmine',

            'karma-html-reporter',

            'karma-coverage'

        ],

    htmlReporter: {

      outputDir: 'report/', // where to put the reports

      templatePath: null, // set if you moved jasmine_template.html

      focusOnFailures: true, // reports show failures on start

      namedFiles: false, // name files instead of creating sub-directories

      pageTitle: null, // page title for reports; browser info by default

      urlFriendlyName: false, // simply replaces spaces with _ for files/dirs

      reportName: 'html', // report summary filename; browser info by default 

    },

    coverageReporter: {

           type: 'html',

           dir: 'report/coverage'

       },

    preprocessors: {'js/*.js': ['coverage']}

  })

}

files: 选择浏览器要导入的文件

reporters: 添加'html', 'coverage' 用以生成单元测报告和覆盖率测试报告

singleRun: 设置为ture, karma会在测试结束后自动关闭浏览器

plugins: 导入我们需要的四个插件

htmlReporter: 配置html报告的存放位置

coverageReporter: 配置覆盖率报告的存放位置

preprocessors: 添加要测试的js文件位置以及'coverage'标志。

配置全部完成， 项目目录结构如下：

unitTest

|- html

    |-- index.html

|- js

    |-- index.js

|- unittest

    |-- index-test.js

|- report

    |- html  //存放单元测试报告

    |- coverage  //存放覆盖率报告

karma.conf.js

package.json

执行命令npm test就会在report目录下产生html格式的报告了

参考文档： http://karma-runner.github.io/1.0/config/configuration-file.html

AngularJS unit test report / coverage report的更多相关文章

  1. Quickstart: Embed a Power BI Report Server report using an iFrame in SharePoint Server

    In this quickstart you will learn how to embed a Power BI Report Server report by using an iFrame in ...

  2. coverage report

    转载:http://blog.sina.cn/dpool/blog/s/blog_7853c3910102yn77.html VCS仿真可以分成两步法或三步法, 对Mix language, 必须用三 ...

  3. [Unit Testing] AngularJS Unit Testing - Karma

    Install Karam: npm install -g karma npm install -g karma-cli Init Karam: karma init First test: 1. A ...

  4. QT unit test code coverage

    准备环境: qt-creator5.2.1 , gcov(gcc 默认安装),lcov(gcov 的图形化显示界面),qt_testlib 各环境介绍: 1.gcov   gcov 是一个可用于C/C ...

  5. Jmeter Dash Report(HTML Report)删除Hits Per Second graph的方法

    通过命令行 Non GUI的方式执行jmeter的jmx脚本可以生成HTML Report(Dash Report). 这个report默认自带了很多种图表报告,比如statistics,Over t ...

  6. [AngularJS + Unit Testing] Testing Directive's controller with bindToController, controllerAs and isolate scope

    <div> <h2>{{vm.userInfo.number}} - {{vm.userInfo.name}}</h2> </div> 'use str ...

  7. [Angular + Unit] AngularJS Unit testing using Karma

    http://social.technet.microsoft.com/wiki/contents/articles/32300.angularjs-unit-testing-using-karma- ...

  8. [AngularJS Unit tesint] Testing keyboard event

    HTML: <div ng-focus="vm.onFocus(month)", aria-focus="{{vm.focus == month}}", ...

  9. [AngularJS + Unit Testing] Testing a component with requiring ngModel

    The component test: describe('The component test', () => { let component, $componentController, $ ...

随机推荐

  1. js常用骚操作总结

    打开网址 window.open("http://www.runoob.com"); 判断是否为url var url = $("#url").val(); i ...

  2. apache简介与安装

    1.1 apache简介 apache当前全世界排名点击这里 1.1.1 当前互联网主流web服务说明 静态服务 apache --->中小型静态web服务的主流,web服务器中的老大哥 ngi ...

  3. 安装docker fastdfs

    # step 1: 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data lvm2# Step 2: 添加软件 ...

  4. Springboot定时任务实现动态配置Cron参数(从外部数据库获取)

    https://blog.csdn.net/qq_35992900/article/details/80429245 我们主要讲解它的动态配置使用方法. 在刚开始使用的时候,我们更改一个任务的执行时间 ...

  5. timestamp和datetime

    datetime数据类型在MySQL之前占8个字节,5.6之后占5个字节,datetime的范围1000-01-01 00:00:00------9999-12-31 23:59:59,格式采用YYY ...

  6. React造轮子：拖拽排序组件「Dragact」

    先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...

  7. React组件：拖拽布局Dragact v0.1.6 发布

    仓库地址:Dragact爽滑的拖拽组件 大家好,新年已经过去,大家又投入了繁忙的工作当中,由于我在国外,因此压根儿没有休息... 少说废话,上周一周的时间里,我陆陆续续的为Dragact组件进行了一系 ...

  8. 全国主要城市（电信）ip地址

    全国主要城市(电信)ip地址 2011-09-08 16:17:18 标签:ip地址 全国主要城市(电信) 职场 休闲 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声 ...

  9. itop4412编译内核时出现“recipe for target 'arch/arm/mach-exynos/cpu-exynos4.o' failed”的解决方法

    依次执行如下命令 #su root 输入root用户密码 #cd #vim .bashrc 到达最底行,确保环境变量如下图所示 保存退出后,执行如下指令 #source .bashrc 重启Termi ...

  10. jquery mouseenter()方法 语法

    jquery mouseenter()方法 语法 作用:当鼠标指针穿过元素时,会发生 mouseenter 事件.该事件大多数时候会与 mouseleave 事件一起使用.mouseenter() 方 ...