AngularJs的TDD

首先我们会写一个简单的基于AngularJs的应用。

html代码:

<html>

<head>

</head>

<body>

</div>

</body>

</html>

demo.js代码:

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

app.controller('demoController', ['$scope', function ($scope) {

}]);

OK。在我们有了基本的js文件后，我们就需要写我们测试文件了。我们使用的测试工具是karma，karma的配置文件里的frameworks使用的是Jasmine。

在完成karma的配置后，我们就应当着手写测试文件了。

首先，在写测试的时候，我们一定要明白自己测试的期望是什么，目标是什么，测试的用例有哪些。当我们清楚明白地知道自己想要测什么的时候，就以写出优雅的测试代码以及漂亮的功能代码。

开始写测试文件，demo.test.js:

我要测angular的controller, demoController, 于是我就describe('demoController', function () {});

之后我要拿到我要测试的期望目标啊，于是我们接着写:

describe('demoController', function () {

　　var $controller;

　　beforeEach(function () {

　　　　module('demoApp');

　　　　inject(function ($injector) {

　　　　　　$controller = $injector.get('$controller')

　　　　});

})

写到这里，我们就要想了，测demoController 的什么呢，于是，我们case来了,比如说，我们期望$scope.name 是 'Hello world'：

describe('demoController', function () {

　　var $controller;

　　beforeEach(function () {

　　　　module('demoApp');

　　　　inject(function ($injector) {

　　　　　　$controller = $injector.get('$controller')

　　　　});

　　it('$scope.name should be equal hello world', function () {

　　　　var $scope;

　　　　$scope = {}

　　　　$controller('demoController', {$scope: $scope})

　　　　expect($scope.name).toEqual('Hello world');

　　});

OK，我们的测试写完了，使用karma命令来跑测试. 99%测试一定会挂，为什么呢？因为我们的demo.js里，demoController中还没有$scope.name.并且我们期望$scope.name = 'Hello world'.于是，在demo.js里写上：

app.controller('demoController', ['$scope', function ($scope) {

　　$scope.name = 'Hello world';

}]);

运行测试，Bingo！

好了，我们可以继续TDD了。

写漂亮的测试，写优雅的代码。Make it run.

转载于:https://www.cnblogs.com/Yaxian/p/4960436.html

AngularJs的TDD相关推荐

基于Angularjs+jasmine+karma的测试驱动开发（TDD）实例
简介(摘自baidu) 测试驱动开发,英文全称Test-Driven Development,简称TDD,是一种不同于传统软件开发流程的新型的开发方法.它要求在编写某个功能的代码之前先编写测试代码,然 ...
AngularJS开发人员最常犯的10个错误
简介 AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程, 这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的 ...
AngularJS 的异步服务测试与Mocking
测试 AngularJS 的异步服务最近,在做项目时掉进了 AngularJS 异步调用 $q 测试的坑中,直接躺枪了.折腾了许久日子,终于想通了其中的道道,但并不确定是最佳的解决方案,最后还是决定 ...
angularjs常见错误_AngularJS开发人员应避免的7大错误
angularjs常见错误 AngularJS is one of the powerful tools, used for managing the display of data. It is t ...
《AngularJS深度剖析与最佳实践》一1.5　实现更多功能：主题
本节书摘来自华章出版社<AngularJS深度剖析与最佳实践>一书中的第1章,第1.5节,作者雪狼破狼彭洪伟,更多章节内容可以访问云栖社区"华章计算机"公众号查看 ...
Build Your Own Angularjs 读书笔记（AngularJS牛逼的地方在于它内嵌了一个表达式到Function对象的编译器。。。当然还有DI框架）
Build Your Own Angularjs 读书笔记目录 [隐藏] 1 项目配置 2 作用域 3 表达式与过滤器 4 模块与依赖注入 5 辅助函数 6 指令项目配置[编辑] npm pack ...
AngularJS介绍
AngularJS介绍–AngularJS的前世今生 AngularJS是什么在Web开发领域,我们一般使用HTML作为前端页面元素的声明式语言,使用CSS技术作为展示样式的描述语言,JavaScr ...
AngularJS实战第一章
AngularJS实战作者:kimmking.大漠穷秋.任富飞问题反馈:kimmking@163.com 快速上手 AngularJS介绍-AngularJS的前世今生 AngularJS核心特性 ...
Golang TDD实践报告：快速排序Quick Sort
Golang TDD实践报告:快速排序Quick Sort [阅读时间:约5分钟] 0.项目需求 1.编写符合项目输入输出的一个测试 2.尝试运行测试 3.先使用最少的代码来让失败的测试先跑起来 4. ...
AngularJS和DataModel
通常,在AngularJS中使用JSON作为存储数据的模型.我们可能这样在controller中写model: app.controller('BookController',['$scope',fu ...

AngularJs的TDD

AngularJs的TDD相关推荐

最新文章

热门文章