angularjs中的单元测试实例_AngularJS

npm install karma --save-dev
npm install karma-junit-reporter --save-dev

"peerDependencies": {
"karma-jasmine": "~0.1.0",
"karma-requirejs": "~0.2.0",
"karma-coffee-preprocessor": "~0.1.0",
"karma-html2js-preprocessor": "~0.1.0",
"karma-chrome-launcher": "~0.1.0",
"karma-firefox-launcher": "~0.1.0",
"karma-phantomjs-launcher": "~0.1.0",
"karma-script-launcher": "~0.1.0"
}

module.exports = function(config){
config.set({
// 下面files里的基础目录
basePath : '../',
// 测试环境需要加载的JS信息
files : [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/js/**/*.js',
'test/unit/**/*.js'
],
// 是否自动监听上面文件的改变自动运行测试
autoWatch : true,
// 应用的测试框架
frameworks: ['jasmine'],
// 用什么环境测试代码,这里是chrome`
browsers : ['Chrome'],
// 用到的插件,比如chrome浏览器与jasmine插件
plugins : [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-jasmine',
'karma-junit-reporter'
],
// 测试内容的输出以及导出用的模块名
reporters: ['progress', 'junit'],
// 设置输出测试内容文件的信息
junitReporter : {
outputFile: 'test_out/unit.xml',
suite: 'unit'
}

});
};

describe("A spec (with setup and tear-down)", function() {
var foo;

beforeEach(function() {
foo = 0;
foo += 1;
});

afterEach(function() {
foo = 0;
});

it("is just a function, so it can contain any code", function() {
expect(foo).toEqual(1);
});

it("can have more than one expectation", function() {
expect(foo).toEqual(1);
expect(true).toEqual(true);
});
});

karma start test/karma.conf.js

beforeEach(module('myApp.filters'));

beforeEach(module(function($provide) {
$provide.value('version', 'TEST_VER');
}));

angular.module('myApplicationModule', [])
.value('mode', 'app')
.value('version', 'v1.0.1');

describe('MyApp', function() {

// You need to load modules that you want to test,
// it loads only the "ng" module by default.
beforeEach(module('myApplicationModule'));

// inject() is used to inject arguments of all given functions
it('should provide a version', inject(function(mode, version) {
expect(version).toEqual('v1.0.1');
expect(mode).toEqual('app');
}));

// The inject and module method can also be used inside of the it or beforeEach
it('should override a version and test the new version is injected', function() {
// module() takes functions or strings (module aliases)
module(function($provide) {
$provide.value('version', 'overridden'); // override version here
});

inject(function(version) {
expect(version).toEqual('overridden');
});
});
});

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

myApp.controller('MyController', function($scope) {
$scope.spices = [{"name":"pasilla", "spiciness":"mild"},
{"name":"jalapeno", "spiciness":"hot hot hot!"},
{"name":"habanero", "spiciness":"LAVA HOT!!"}];
$scope.spice = "hello feenan!";
});

describe('myController function', function() {

describe('myController', function() {
var $scope;

beforeEach(module('myApp'));

beforeEach(inject(function($rootScope, $controller) {
$scope = $rootScope.$new();
$controller('MyController', {$scope: $scope});
}));

it('should create "spices" model with 3 spices', function() {
expect($scope.spices.length).toBe(3);
});

it('should set the default value of spice', function() {
expect($scope.spice).toBe('hello feenan!');
});
});

});

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

app.directive('aGreatEye', function () {
return {
restrict: 'E',
replace: true,
template: '

lidless, wreathed in flame, 1 times

'
};
});

describe('Unit testing great quotes', function() {
var $compile;
var $rootScope;

// Load the myApp module, which contains the directive
beforeEach(module('myApp'));

// Store references to $rootScope and $compile
// so they are available to all tests in this describe block
beforeEach(inject(function(_$compile_, _$rootScope_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$compile = _$compile_;
$rootScope = _$rootScope_;
}));

it('Replaces the element with the appropriate content', function() {
// Compile a piece of HTML containing the directive
var element = $compile("</a-great-eye>")($rootScope);
// fire all the watches, so the scope expression 1 will be evaluated
$rootScope.$digest();
// Check that the compiled element contains the templated content
expect(element.html()).toContain("lidless, wreathed in flame, 2 times");
});
});

</a-great-eye>

var app = angular.module('myApp', []);
app.filter('interpolate', ['version', function(version) {
return function(text) {
return String(text).replace(/\%VERSION\%/mg, version);
};
}]);

describe('filter', function() {
beforeEach(module('myApp'));

describe('interpolate', function() {

beforeEach(module(function($provide) {
$provide.value('version', 'TEST_VER');
}));

it('should replace VERSION', inject(function(interpolateFilter) {
expect(interpolateFilter('before %VERSION% after')).toEqual('before TEST_VER after');
}));
});
});