首先讲一下大致的流程:
需要node环境,首先先要安装node,node不会?请自行搜索.版本&0.8
安装node完成之后先要测试下npm是否测试通过,如下图所示
首先看下目录结构 目录为:F:\karma&
其中karma.config.js另外说,因为这个是安装karma之后,karma的运行完全依赖这个配置文件
接下来安装karma&
//为了能够让全局都可以运行karma的命令行npm install -g karma-cli
//推荐全局,简单不出错
npm install karma -g --save-dev
//接下来安装你项目需要的组件, 这个是为了保证运行karma可有直接调用系统的chrome浏览器,如果没有chrome浏览器,还是建议安装吧,不然只能呵呵了..
npm install karma-jasmine karma-chrome-launcher -g --save-dev
　到现在为止基本完成80%了,接下来就是生成karma.config.js文件
enter完之后,在F:\karma\下就生成了karma.config.js
=== 广告大法& ===&/NetSos/p/4371075.html
打开配置文件
// Karma configuration
// Generated on Mon Mar 23 :18 GMT+0800 (中国标准时间)
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
"js/plugin/angular.js",
"js/plugin//angular-mocks.js",
"js/*.js",
"tests/*.tests.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'],
// 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: false
每个配置的意思可以自行搜索,重要的配置在files这个配置里面,把必须的文件引入进去,其他的*表示就可以了
由于咱们用的是jasmine测试框架,首先你需要了解jasmine的测试语法 duang~~&http://jasmine.github.io/edge/introduction.html
接下来贴出home.js(angular写法的js) 和 对应测试文件home.tests.js,由于是测试js,目前是不需要html页面的
'use strict';
var app = angular.module('',[]);
app.controller('Hevily',['$scope',function($scope){
$scope.text = 'hello';
home.tests.js
'use strict';
describe('Hevily',function(){
//module都是angular.mock.module的缩写
beforeEach(module(''));
//inject都是angular.mock.inject的缩写
beforeEach(inject(function($rootScope,$controller){
scope = $rootScope.$new();
$controller('Hevily',{$scope:scope});
it('text = hello',function(){
expect(scope.text).toBe('hello');
　　运行karma
简单的单元测试入门就这样结束了,么么么....
点击下载示例代码: &
如果是seajs的话 需要增加这个文件
(function(__karma__, seajs) {
var tests = [],
// var alias = {
'testfile':'testfile/test',
'login':'webapp/resources/view/src/login',
'test':'testjs/test'
alias = {};
for (file in __karma__.files) {
if (__karma__.files.hasOwnProperty(file)) {
// if (/test\.js$/i.test(file)) {
tests.push(__karma__.basePath+file); //所有的测试用例代码文件以spec结尾
// if (/ngjs/.test(file)) {
var name = file.match(/([^.]+)\.js/)[1]; //获取src目录下的文件路径作为seajs模块的key
alias[name] =
tests.push(name)
// console.log(tests)
seajs.config({
alias: alias
var __start = __karma__.
__karma__.start = function() {
seajs.use(['tests/epm.test'], function() {//测试文件的路径
__start.call(); //要在seajs模块载入后调用,否则会加载不到任何测试用例
// mocha.run()
})(window.__karma__, seajs);
Views(...) Comments()为什么要做测试
代码中的bug是不可避免的，没有测试，很难知道它们藏在那里；当代码库有了测试的支撑，就可以了解我们代码的各个部分是否按预期工作。测试能够分离和消除这些缺陷；还可以让其他开发人员用易上手，并且提供代码的可用文档。
如果我们想了解在应用中发生了什么事情，测试是至关重要的，而且测试在一定程度上减少了开发者因为查找错误而耽误的开发时间，对产品的快速开发也很有帮助。
AngularJS的测试
Angular框架鼓励编写干净，可靠，可测试的代码。这是Angular带来的最有价值的特性之一。
Angular团队非常强调测试的重要性，他们创建了一个测试运行器来让这个过程更简单，他们表示：
JavaScript是一种动态语言，有强大的表达能力，但带来的问题是：从编辑器那边得不到什么帮助。因为这个原因，我们强烈感觉到：任何使用JavaScript编写的代码都应当有强大的测试集。我们已经在AngularJS里面加了不少特性，能让我们测试Angualr应用非常容易，所以没有理由不做测试。
AngularJS的测试类型
单元测试专门用于测试小型，独立的代码单元，单个函数，或者较小的带有功能的交互。单元测试不是用来测试大功能集的。
单元测试的麻烦在于把逻辑分割成小块，这样我们才能测试它。但是在Angular应用这，单元测试会变得相对简单。
端对端测试
我们先深入地了解一下单元测试，端对端测试以后我们接着聊。
测试工具-Karma
Karma是什么
Karma原名是Testacular,是一个基于nodejs的测试执行过程管理工具，基本上可以测试现在主流的Web浏览器，很适合做单元测试。
关于Karma的更多信息，可以参考Karma官网
首先确保你的电脑上已经安装了nodejs，如果还未安装，请先安装。
在nodejs的命令行里输入npm install -g karma-cli。
我们还要继续安装进行单元测试所需要的依赖，继续在命令行里输入npm install karma --save-dev，npm install karma-jasmine karma-chrome-launcher --save-dev。
对上面命令的一点解释，install karma-cli安装我们的karma命令行，install karma安装我们测试的karma依赖，install karma-jasmine安装我们的测试框架，install karma-chrome-launcher安装谷歌浏览器的控制器。
接着我们需要进行测试文件的配置，具体的配置选项如下：
javascriptdream_apple@DREAMAPPLE /d/CodeFile/CodeTest/AngularJSTest
$ karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next quest
What is the location of your source and test files ?
You can use glob patterns, eg. &js/*.js& or &test/**/*Spec.js&.
Enter empty string to move to the next question.
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. &**/*.swp&.
Enter empty string to move to the next question.
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
Config file generated at &d:\CodeFile\CodeTest\AngularJSTest\karma.conf.js&.
关于karma的配置选项我们一一来解释一下：
testing framework生成器会询问我们使用哪一个测试框架来做测试，jasmine是默认的测试框架，当然生成器也支持Mocha,QUnit和其它的一些框架。
RequireJS生成器会询问我们是否使用RequireJS,如果我们需要的话，就将其设置为true,不需要就将其设置为false。
capture browser生成器会询问我们的测试要启动哪一个浏览器来捕获测试结果，我们测试时选择的是chrome浏览器，当然你也可以选择其它的浏览器，比如firefox或者safari,不过你要安装相应的插件。
source and test files生成器会询问我们关于测试的源文件和测试文件放在那里，它是一个数组，可以包含简单的字符串和对象。
exclude生成器利用exclude选项来排除那些我们在加载测试的时候不想引入的文件。
autoWatch生成器会询问我们是否想自动监视那些我们要测试的文件，如果设置为true那么一旦我们修改了测试的文件，那么karma会自动运行；如果不想监视我们的测试文件，那么可以把它设置为false。
更多参数解释可以点击这里浏览。
那么接下来，我们就要做一件激动人心的事情了，那就是测试。
因为现在我们还没有一个项目的目录，所以我们先来简单的建一个文件目录。
文件目录如下
src.js // 需要被测试的源文件
test.js // 测试的文件
node_modules // 安装的一些依赖
karma.conf.js // karma的配置文件
首先我们在test.js文件中输入以下代码： ```javascript
describe(&测试例子&, function(){
it(&-&第一个&, function(){
expect(true).toBe(true);
it(&-&第二个&, function(){
expect(false).not.toBe(true);
然后在命令行里找到test目录，运行命令karma start karma.conf.js,会看到下面的结果：
对上面结果的解释：
第一张图是说karma server在http://localhost:9876/启动服务，然后我们在浏览器的地址栏输入上面的地址，就可以看到第二张图了。
第二张图是一个chrome浏览器实例，这个浏览器实例处于连这状态，并且现在是空闲状态，因为测试已经做完了。
我们点击第二张图上面的DEBUG，就跑到了第三张图上面，调出控制台，就可以看到我们刚才测试的两个例子都成功了。
测试框架-Jasmine
关于Jasmine，我们这里先简单了解一下，它是一个当今比较流行的测试框架，有很多有用的方法帮助我们去做测试，如果你已经迫不及待想了解这个框架，可以点击这里jasmine，后续部分我们会进行更深入地了解。
jasmine可以让我们的测试变得非常有条理，就像叙事那样，一个完整的测试文件就可以像一个应用的文档一样让人很清楚地知道这个应用的这个模块是干什么的，有什么用。
常用方法介绍：
describe(string, function(){})这个函数是一个全局函数，包含两个参数，一个是字符串，描述了这个测试集，后面是一个函数，在函数的里面可以进行测试。
it(string, function(){})这个函数也是一个全局函数，参数的作用和describe()的一样，只不过it()是用来做单个测试的，常常包含在describe()里面。
我们在写测试函数的时候就要注意，要尽可能描述这个测试是用来测试什么的，比如下面的一个测试文件： javascriptdescribe(&测试一些函数和变量&, function(){
it(&-&测试func()函数的功能&, function(){
expect(true).toBe(true);
it(&-&第二个&, function(){
expect(false).not.toBe(true);
结果如下图，可以清楚地看到我们这两个测试是干什么，所以说，将测试表述清楚也是很必要的。
关于AngularJS应用的测试，我们还会继续，这一片先让我们简单了解一下为什么要做测试，以及如何测试。
当然这里肯定有许多不足之处，也希望大家能够提出，一起进步^_^。自动化测试之karma和jasmine | 皓眸IT
自动化测试之karma和jasmine | 皓眸IT
测试的必须性
相信大家都知道测试的必要性，测试先行的概念。不过，写了这么多年的代码，除了之前用java的时候写过一些测试用例，还真的很少写过前端的测试用例，或者做一些自动化测试。感觉做单元测试还是很有必须的，它能帮助你整理思路，换个角度思考问题，发现bug。最近正好研究一下，之前了解到jasmine是做js单元测试的利器，karma是用来自动化运行分析统计单元测试的，结合karma-coverage还能统计代码覆盖率，这么牛的神器，一定要试一试。另外最后会介绍另外一个端到端的测试神器protractor，不过目前只能测试angular的应用。
转载请注明出处：
karma安装及使用
Karma是Testacular的新名字，在2012年google开源了Testacular，2013年Testacular改名为Karma。Karma是一个让人感到非常神秘的名字，表示佛教中的缘分，因果报应，比Cassandra这种名字更让人猜不透！
Karma是一个基于Node.js的JavaScript测试执行过程管理工具（Test Runner）。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。
安装nodejs，注意相关版本要求
安装karma和相关插件，推荐的方法是在项目目录安装karma和相关插件
12345# Install Karma:$ npm install karma --save-dev# Install plugins that your project needs:$ npm install karma-jasmine karma-chrome-launcher --save-dev
上面的命令会安装karma, karma-jasmine 和 karma-chrome-launcher 到node_modules目录，同时将配置保存到package.json中。接着可以运行karma
12# Run Karma:$ ./node_modules/karma/bin/karma start
注意，直接运行karma是不行的，肯定会报错，需要用上面的方法运行。如果想直接用karma命令，需要安装karma-cli，如下所示：
1$ npm install -g karma-cli
然后你就可以直接运行karma命令了。
123./node_modules/karma/bin/karma startINFO [karma]: Karma v0.10.2 server started at http://localhost:9876/INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket nIlM1yUy6ELMp5ZTN9Ek
可以看到karma会自动打开浏览器，界面如下：
初始化karma配置
12345678910111213141516171819202122232425262728293031./node_modules/karma/bin/karma initWhich testing framework do you want to use ?Press tab to list possible options. Enter to move to the next question.& jasmineDo you want to use Require.js ?This will add Require.js plugin.Press tab to list possible options. Enter to move to the next question.& noDo you want to capture a browser automatically ?Press tab to list possible options. Enter empty string to move to the next question.& Chrome&What is the location of your source and test files ?You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".Enter empty string to move to the next question.&Should any of the files included by the previous patterns be excluded ?You can use glob patterns, eg. "**/*.swp".Enter empty string to move to the next question.&Do you want Karma to watch all the files and run the tests on change ?Press tab to list possible options.& yesConfig file generated at "D:\workspace\javascript\karma\karma.conf.js".
通过这种命令行的形式，我们就成功配置了karma自动化运行脚本。后面可以根据需要做修改。
jasmine介绍
jasmine是为javascript提供的行为驱动的测试开发框架，它不依赖于浏览器，DOM，或者其他javascript框架，可以为web项目，node项目或者其他运行js的项目写单元测试。
使用文档api介绍：
我们假设在当前目录，按照上面的方法安装了karma，（需要注意的是上面安装karma的时候已经安装了jasmine），然后我们做个测试。
编写源文件src.js
123function reverse(name){
return name.split("").reverse().join("");}
编写测试代码test.js
12345describe("A suite of basic functions", function() {
it("reverse word",function(){
expect("DCBA").toEqual(reverse("ABCD"));
修改karma.conf.js配置文件
12345678910111213141516module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: ['*.js'],
exclude: ['karma.conf.js'],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
captureTimeout: 60000,
singleRun: false
刚才通过命令行的方式生成的配置文件和上面的可能有所不同，作参考。
启动karma测试
1234567891011./node_modules/karma/bin/karma start karma.conf.jsINFO [karma]: Karma v0.10.2 server started at http://localhost:9876/INFO [launcher]: Starting browser ChromeWARN [launcher]: The path should not be quoted.
Normalized the path to C:\Program Files (x86)\Google\Chrome\Application\chrome.exeINFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket bVGffDWpc1c7QNdYye_6INFO [Chrome 28.0.1500 (Windows 7)]: Connected on socket DtTdVbd4ZsgnMQrgye_7Chrome 28.0.1500 (Windows 7): Executed 1 of 1 SUCCESS (3.473 secs / 0.431 secs)Chrome 28.0.1500 (Windows 7): Executed 1 of 1 SUCCESS (0.068 secs / 0.021 secs)TOTAL: 2 SUCCESS
会自动打开浏览器
代码覆盖率插件
安装代码覆盖率插件karma-coverage
1~ D:\workspace\javascript\karma&npm install karma-coverage
修改karma.conf.js配置文件
123456reporters: ['progress','coverage'],preprocessors : {'src.js': 'coverage'},coverageReporter: {
type : 'html',
dir : 'coverage/'}
启动karma start，在工程目录下面找到index.html文件，coverage/chrome/index.html打开后，我们看到代码测试覆率绿报告覆盖率是100%，说明我们完整了测试了src.js的功能。
接下来，我们修改src.js，增加一个if分支
1234function reverse(name){
if(name=='AAA') return "BBB";
return name.split("").reverse().join("");}
再看覆盖率报告,
protractor使用介绍
protractor是专为angular应用设计的端到端的测试框架，它直接在浏览器中运行，模拟类似于人在实际环境中的交互操作来测试。
官网主页：
1npm install -g protractor
改命令会安装protractor 和 webdriver-manager两个命令行工具，可以执行
1protractor --version
来测试是否安装成功。然后通过执行
1webdriver-manager update
上面的命令会下载必要的支持组建，然后可以通过
1webdriver-manager start
来启动一个server，我们运行的protractor test会运行在这个server上，可以在
地址查看server的运行状态。
编写测试脚本，我们测试angular的官网示例todo list，编写todo-spec.js如下：
123456789101112describe('angularjs homepage todo list', function() {
it('should add a todo', function() {
browser.get('http://www.angularjs.org');
element(by.model('todoText')).sendKeys('write a protractor test');
element(by.css('[value="add"]')).click();
var todoList = element.all(by.repeater('todo in todos'));
expect(todoList.count()).toEqual(3);
expect(todoList.get(2).getText()).toEqual('write a protractor test');
其中describe和it使用的是jasmine的语法，browser是protractor提供的全局对象，用于执行浏览器级别的任务，比如导航加载页面可以用browser.get方法。
编写配置文件conf.js
1234exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['todo-spec.js']};
这个配置文件主要告诉protractor测试的文件和服务器的地址，默认使用chrom浏览器。
1protractor conf.js
你会看见会自动打开浏览器，跳转到todolist页面，然后关闭页面。
转载请注明出处：
有问题请留言。
请叫我皓眸哥(^_^) &
发表评论：
馆藏&19564
TA的推荐TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&