下面的介绍以karma能正常运行为前提,看karma系列文章:http://www.cnblogs.com/laixiangran/tag/Karma/

目录结构

步骤

安装

npm install angular --save-dev
npm install angular-mocks --save-dev //专门用来进行单元测试的模块

karma.conf.js

/***
* Created by laixiangran on 2015/12/22.
* karma单元测试配置文件
*/ module.exports = function(config) { config.set({ /***
* 基础路径,用在files,exclude属性上
*/
basePath: "", /**
* 测试框架
* 可用的框架:https://npmjs.org/browse/keyword/karma-adapter
*/
frameworks: ["jasmine"], /**
* 需要加载到浏览器的文件列表
*/
files: [
"../node_modules/angular/angular.js",
"../node_modules/angular-mocks/angular-mocks.js",
"karmaTest/test.js",
"karmaTest/test.spec.js"
]
});
};

test.js

/**
* Created by laixiangran on 2015/12/20.
*/ var app = angular.module("myApp", []); app.controller("myCtrl", ["$scope", function ($scope) { var vm = $scope.vm = {
htmlSource: "",
showErrorType: 1,
showDynamicElement: true
}; $scope.testTxt = "hello unit test!"; $scope.setTxt = function (txt) {
$scope.testTxt = txt;
}; $scope.getTxt = function () {
return $scope.testTxt;
}; $scope.removeTxt = function () {
delete($scope.testTxt);
}; $scope.chooseTxt = function (val) {
return val == "t" ? "hello unit test!" : "hello world!";
}; }]);

test.spec.js

/**
* Created by laixiangran on 2015/12/20.
*/
describe("myCtrl测试", function() {
var scope = null;
var testCtrl = null; // module是angular.mock.module方法,用来配置inject方法注入的模块信息,参数可以是字符串、函数、对象
beforeEach(module("myApp"));
  
  // inject是angular.mock.inject方法,用来注入module配置好的ng模块,方便在it的测试函数里调用
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new();
//初始化myCtrl
testCtrl = $controller("myCtrl", {$scope:scope});
})); it("validateCtrl必须定义", inject(function($controller) {
expect(testCtrl).toBeDefined();
})); it("scope.testTxt = 'hello unit test!'",function() {
expect(scope.testTxt).toBe("hello unit test!");
}); it("scope.setTxt('hello world!'),scope.testTxt = 'hello world!'",function() {
scope.setTxt("hello world!");
expect(scope.testTxt).toBe("hello world!");
}); it("scope.chooseTxt('t')必须返回'hello unit test!'",function() {
expect(scope.chooseTxt("t")).toBe("hello unit test!");
}); });

好文推荐:http://www.ngnice.com/posts/dc4b032b537ae0

karma+angular的更多相关文章

  1. 【17】进大厂必须掌握的面试题-50个Angular面试

    我们整理了一份主要的Angular面试问题清单,分为三部分: 角度面试问题–初学者水平 角度面试问题–中级 角度面试问题–高级 初学者水平–面试问题 1.区分Angular和AngularJS. 特征 ...

  2. Angular+Grunt+Bower+Karma+Protractor (Atom)

    1. 配置bower 1.安装bower npm install -g bower 2.创建.bowerrc文件 { "directory": "src/bower&qu ...

  3. angular测试-Karma + Jasmine配置

    首先讲一下大致的流程: 需要node环境,首先先要安装node,node不会?请自行搜索.版本>0.8 安装node完成之后先要测试下npm是否测试通过,如下图所示 首先看下目录结构 目录为:F ...

  4. 用Karma和Jasmine测试Angular应用

    TEST: Before you've written any of the code, you know how you want it to behave. You have a specific ...

  5. karma和jasmine的测试(包括angular测试)

    本篇博客主要就是针对现在日新月异的技术和快速开发,测试被很多人忽略,其实在开发中如何保证代码的质量以及逻辑的完整性,测试显得十分重要,本文就是负责karma+jasmine来测试. 1.搭建测试的环境 ...

  6. karma+requirejs+angular 测试

    http://karma-runner.github.io/0.8/plus/RequireJS.html karma 不是测试框架,只是一个运行测试框架的服务器 karma测试的原理是,将所有的文件 ...

  7. [Unit Testing] Configure the Angular CLI to use the Karma Mocha test reporter

    Every Angular CLI generated project comes already with Karmapreinstalled as well a couple of executa ...

  8. 与karma、angular的第一次亲密接触

    首先要了解什么是karma,karma干嘛用的,它的好朋友jasmine又是啥?这些文章可以帮助你: karma干嘛的? angular与karma1 angular与karma2 看了以上几篇文章之 ...

  9. karma mocha angular angular-mock 测试

    describe('工具方法测试', function () { var utilsModule; beforeEach(function () { module('Admin'); // modul ...

随机推荐

  1. Http 请求

    public static string HttpGet(string url) { HttpWebRequest request = (HttpWebRequest)WebRequest.Creat ...

  2. SQL Server 存储过程(转载)

    SQL Server 存储过程 Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用.当存储过程执行一次后,可以将语句缓存中,这样下次执行的时候直接使用缓存中的语句.这 ...

  3. 压缩和解压缩gz包

    gz是Linux和OSX中常见的压缩文件格式,下面是用java压缩和解压缩gz包的例子 public class GZIPcompress { public static void FileCompr ...

  4. HDU 2289 CUP 二分

    Cup Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  5. JavaScript编写简单的抽奖程序

    1.需求说明 某公司年终抽奖,需要有如下功能 1)可以根据实际情况设置到场人数的最大值 2) 点击“开始”,大屏幕滚动,点击“停止”,获奖者的编号出现在大屏幕上 3)在界面里显示全部奖项获奖人编号 4 ...

  6. A840S黑砖修复过程(2013-05-22修改)

    首先感谢su_ky大神,没有他的博客和帖子,这次救砖根本没有成功的可能.其次谢谢A840S交流群284998898的Sunny deng,没有他提供的分区镜像同样也完成不了这次的工作.现象:手机完全没 ...

  7. Path文件操作实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddProduct.asp ...

  8. (1)建立一个名叫Cat的类: 属性:姓名、毛色、年龄 行为:显示姓名、喊叫 (2)编写主类: 创建一个对象猫,姓名为“妮妮”,毛色为“灰色”,年龄为2岁,在屏幕上输 出该对象的毛色和年龄,让该对象调用显示姓名和喊叫两个方法。

    package lianxi; public class Cat { String Name, Color; int Age; void getName() { System.out.println( ...

  9. C++实现有向权图的基本操作,界面友好,操作方便,运行流畅

    Ⅰ.功能: .创建图 .展示全图 .添加顶点 .添加边 .删除顶点 .删除边 .查看指定边权值 .修改指定边权值 .输出两点间的所有简单路及路径对应权值 .销毁图 ps:关于9,如果不存在任何简单路, ...

  10. Cheatsheet: 2014 08.01 ~ 08.31

    Web Slow Server? This is the Flow Chart You're Looking For A Strolll Through Node: Introduction .NET ...