本篇博客主要就是针对现在日新月异的技术和快速开发，测试被很多人忽略，其实在开发中如何保证代码的质量以及逻辑的完整性，测试显得十分重要，本文就是负责karma+jasmine来测试。
{
"name": "karma-jsmin",
"version": "1.0.0",
"description": "",
"main": "karma.conf.js",
"directories": {
"test": "test"
},
"dependencies": {
"jasmine-core": "^2.5.2",
"karma": "^0.12.33",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.1.0"
},
"devDependencies": {},
"scripts": {
"test": "node node_modules/karma/bin/karma start"
},
"author": "",
"license": "ISC"
}
// Karma configuration
// Generated on Thu Apr 20 2017 10:43:31 GMT+0800 (中国标准时间)
module.exports = function(config) {
config.set({
/**
*如果所有文件处于同样的路径，则可以在这里配置基础的路径,用在files，exclude属性上
*例如 dest/one.js 和 dest/one-test.js 这里配置dest/
*后面的files就可以写成['one.js','one-test.js']*/
basePath: '',
/**
* 测试框架
* 可用的框架：jasmine,mocha...
*/
frameworks: ['jasmine'],
// 需要测试的文件
files: [
// 'need/app.js',
// 'test/app-test.js'
'angular/angular.js',
'angular/angular-mocks.js',
'ng-js/filter.js',
'ng-test-js/filter-test.js'
],
/**
* 排除的文件列表
*/
exclude: ['karma.conf.js'],
//预处理程序，
// preprocessors: {
// 'test/**/*.js': ['webpack', 'coverage'] //新增 coverage为覆盖率测试
// },
preprocessors: {
'ng-js/demo1.js':'coverage'
},
/**
* 使用测试结果报告者
* 可能的值: "dots", "progress"
* 可用的报告者：https://npmjs.org/browse/keyword/karma-reporter
*/
reporters: ['progress','coverage'],
//在coverage目录下生成html文件，用来监测这个测试项目的功能是否完全
coverageReporter:{
type:'html',
dir:'coverage/'
},
// 测试执行会打开一个页面，就是这个页面的端口，可以随意设置
port: 9876,
//启用或禁用输出报告或者日志中的颜色
// 测试命令执行的时候，出错误或者测试不通过显示不同的颜色，否则只有白色，
colors: true,
/**
* 日志等级
* 可能的值：
* config.LOG_DISABLE //不输出信息
* config.LOG_ERROR //只输出错误信息
* config.LOG_WARN //只输出警告信息
* config.LOG_INFO //输出全部信息
* config.LOG_DEBUG //输出调试信息
*/
logLevel: config.LOG_INFO,
// 是否自动监测测试文件的改动并及时重新测试
autoWatch: true,
// 测试执行打开的页面，可以使用火狐，ie，Opera等浏览器
browsers: ['Chrome'],
/**
* 开启或禁用持续集成模式
* 设置为true, Karma将打开浏览器，执行测试并最后退出
*/
singleRun: false
});
};
"scripts": {
"test": "node node_modules/karma/bin/karma start",
"init": "node node_modules/karma/bin/karma init"
},
function add(x,y){
return x+y;
}
files: [
"js/one.js",
"test/one-test.js"
],
var app = angular.module('demoApp', []);
//在测试之前要先引入angular以及对应版本的angular-mock
app.controller('test1Ctrl',function($scope){
$scope.name = "app"
$scope.num = 0;
$scope.incrementNum = function () {
$scope.num++;
}
})
/*beforeEach 用来做测试前的准备工作，
inject利用angular的依赖注入，将需要的模块,服务插入作用域。真正的测试代码在it函数里，*/
describe('第一个angular测试',function(){
var scope;
//beforeEach 表示在运行所有测试前的准备工作。
//这里生成demoApp 的module
beforeEach(module('demoApp'));//模拟我们的demoApp模块并注入我们自己的依赖
beforeEach(inject(function($rootScope,$controller){//inject解决依赖关系注入到一个函数。
//模拟生成scope, $rootScope是angular中的顶级scope，angular中每个controller中的
//scope都是rootScope new出来的
scope = $rootScope.$new();//把全局scope等于new出来的scope
//模拟生成controller并且注入已创建的空的 scope
$controller('test1Ctrl', {$scope: scope});//把这个全局的scope和测试的angular的controller里面的$scope连通
}))
it("scope里面的 name 为 app", function () {
expect(scope.name).toEqual('bpp');
})
it('incrementNum执行后，scope内的num变成1',function(){
scope.incrementNum()//执行scope内的incrementNum函数
expect(scope.num).toEqual(1);
})
})
var app = angular.module('demoApp', [])
.directive("unorderedList", function () {
return function (scope, element, attrs) {
var data = scope[attrs["unorderedList"]];
if (angular.isArray(data)) {
var listElem = angular.element("<ul>");
element.append(listElem);
for (var i = 0; i < data.length; i++) {
listElem.append(angular.element('<li>').text(data[i].name));
}
}
}
})
describe('directive的测试',function(){
var scope={},
compileServer;
beforeEach(module("demoApp"));
//我们需要一个叫做$compile的服务来完成实际的编译
beforeEach(inject(function ($rootScope, $compile) {
compileService = $compile;
//模拟scope里面的数据
scope.data = [
{ name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
{ name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
{ name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }];
}));
it("创建列表的元素", function () {
/*在要被测试的scope中，一个directive需要被compiled(也就是下面代码中的$compile(tpl)(scope);这句话在做的事情）*/
var elem = compileService("<div unordered-list='data'></div>")(scope);//$compile(html)(scope);
//我们将这个元素编译到一个作用域，它现在就可以被测试了
// var elem = compileFn(scope);
expect(elem.children("ul").length).toEqual(1);
expect(elem.find("li").length).toEqual(3);
expect(elem.find("li").eq(0).text()).toEqual("Apples");
expect(elem.find("li").eq(1).text()).toEqual("Bananas");
expect(elem.find("li").eq(2).text()).toEqual("Pears");
});
})
var app = angular.module('demoApp', []);
app.filter("labelCase", function () {
return function (value) {
return value.toUpperCase()
};
})
describe("Filter的测试", function () {
var filterInstance;
beforeEach(module("demoApp"));//模块
beforeEach(inject(function (labelCaseFilter) {
//引入需要测试的filter
filterInstance = labelCaseFilter;
}));
it("test phrase经过过滤器后变成 TEST PHRASE", function () {
var result = filterInstance("test phrase");
expect(result).toEqual("TEST PHRASE");
});
});