Angular.Js的自动化测试详解

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

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' } });};

karma start test/karma.conf.js

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); });});

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

it('should provide a version', inject(function(mode, version) { expect(version).toEqual('v1.0.1'); expect(mode).toEqual('app'); }));

var todoApp = angular.module('todoApp',[]);todoApp.controller('TodoController',function($scope,notesFactory){ $scope.notes = notesFactory.get(); $scope.createNote = function(){ notesFactory.put($scope.note); $scope.note=''; $scope.notes = notesFactory.get(); }});todoApp.factory('notesFactory',function(){ return { put: function(note){  localStorage.setItem('todo' + (Object.keys(localStorage).length + 1), note); }, get: function(){ var notes = []; var keys = Object.keys(localStorage); for(var i = 0; i < keys.length; i++){  notes.push(localStorage.getItem(keys[i])); } return notes; }  };});

describe('TodoController Test', function() { beforeEach(module('todoApp')); // 将会在所有的it()之前运行 // 我们在这里不需要真正的factory。因此我们使用一个假的factory。 var mockService = { notes: ['note1', 'note2'], //仅仅初始化两个项目 get: function() { return this.notes; }, put: function(content) { this.notes.push(content); } }; // 现在是真正的东西，测试spec it('should return notes array with two elements initially and then add one', inject(function($rootScope, $controller) { //注入依赖项目 var scope = $rootScope.$new(); // 在创建控制器的时候，我们也要注入依赖项目 var ctrl = $controller('TodoController', {$scope: scope, notesFactory:mockService}); // 初始化的技术应该是2 expect(scope.notes.length).toBe(2); // 输入一个新项目 scope.note = 'test3'; // now run the function that adds a new note (the result of hitting the button in HTML) // 现在运行这个函数，它将会增加一个新的笔记项目 scope.createNote(); // 期待现在的笔记数目是3 expect(scope.notes.length).toBe(3); }) );});

describe('notesFactory tests', function() { var factory; // 在所有it()函数之前运行 beforeEach(function() { // 载入模块 module('todoApp'); // 注入你的factory服务 inject(function(notesFactory) { factory = notesFactory; }); var store = { todo1: 'test1', todo2: 'test2', todo3: 'test3' }; spyOn(localStorage, 'getItem').andCallFake(function(key) { return store[key]; }); spyOn(localStorage, 'setItem').andCallFake(function(key, value) { return store[key] = value + ''; }); spyOn(localStorage, 'clear').andCallFake(function() { store = {}; }); spyOn(Object, 'keys').andCallFake(function(value) { var keys=[]; for(var key in store) { keys.push(key); } return keys; }); }); // 检查是否有我们想要的函数 it('should have a get function', function() { expect(angular.isFunction(factory.get)).toBe(true); expect(angular.isFunction(factory.put)).toBe(true); }); // 检查是否返回3条记录 it('should return three todo notes initially', function() { var result = factory.get(); expect(result.length).toBe(3); }); // 检查是否添加了一条新纪录 it('should return four todo notes after adding one more', function() { factory.put('Angular is awesome'); var result = factory.get(); expect(result.length).toBe(4); });});

todoApp.filter('truncate',function(){ return function(input,length){ return (input.length > length ? input.substring(0,length) : input); }});

describe('filter test',function(){ beforeEach(module('todoApp')); it('should truncate the input to 1o characters',inject(function(truncateFilter){ expect(truncateFilter('abcdefghijkl',10).length).toBe(10); }); );});

todoApp.directive('customColor', function() { return { restrict: 'A', link: function(scope, elem, attrs) { elem.css({'background-color': attrs.customColor}); } };});

describe('directive tests',function(){ beforeEach(module('todoApp')); it('should set background to rgb(128, 128, 128)', inject(function($compile,$rootScope) { scope = $rootScope.$new(); // 获得一个元素 elem = angular.element("<span custom-color=/"rgb(128, 128, 128)/">sample</span>"); // 创建一个新的自作用域 scope = $rootScope.$new(); // 最后编译HTML $compile(elem)(scope); // 希望元素的背景色和我们所想的一样 expect(elem.css("background-color")).toEqual('rgb(128, 128, 128)'); }) );})；

describe('my app', function() { beforeEach(function() { browser().navigateTo('../../app/notes.html'); }); var oldCount = -1; it("entering note and performing click", function() { element('ul').query(function($el, done) { oldCount = $el.children().length; done(); }); input('note').enter('test data'); element('button').query(function($el, done) { $el.click(); done(); }); }); it('should add one more element now', function() { expect(repeater('ul li').count()).toBe(oldCount + 1); }); });