前端测试

个人介绍：

赵勇 / 淘宝UED / 前端 / 遇春（花名）

找一个
说服自己的
理由

产品的变化

• RIA
• Base on Browser
• Heavy Javascript
• Html 5

开发量的变化

Server Browser

Server Browser

前端关注点的变化
内部质量外部质量

可维护性前功能
性能端
质界面
设计模式
量
开发效率

前端团队的变化

游击队

正规军

测试同学：

“前端的问题越来越多了”

别再找理由了
先搞起来再说

• 产品界面

• 功能可用
前端测试目标
• 性能高效稳定

• 代码可维护性强

声音
“前端不好测”
“界面老是改，改完用例就没用了”
“单元测试不好做，很难隔离，不好做mock”
“业内没有成熟的实践”
“项目太紧，没时间”
“前端测试性价比不高”

前端的痛
Dom
兼容
性
匿名函
数
Ajax
面向过
异闭程
步包
浏览
性器
能

分而治之
浏览兼容匿名函 Ajax
器性数

闭
Dom 包
Dom测试单元测试
功能测试性能测试

异面向过性
步程能

• 结构，布局 • 对象属性，方法
• 兼容性 • 过程函数

前端测试

• 过程 • 动态执行响应

• DOM结构完整

测试目标 • 模块布局样式无错乱

• 浏览器兼容性

谁动了我的TAG

</div>

还有

• 加个样式，Ie6乱掉了

• 开发html嵌套时，标签没闭合

• 某个元素的样式名写错了

• …

DEMO

http://www.labs.com/sample/ershou.html#testOn

代码

describe('UI-logo',function(){
var logo = KISSY.get('#logo');
it('exist',function(){
expect(logo).toBeNode();
});
})

代码
describe('UI-logo',function(){
var logo = KISSY.one('#logo');
it('position is right',function(){
var oPos = (KISSY.DOM.viewportWidth() – 990)/2;

expect(logo.width()).toNear(177);
expect(logo.height()).toNear(48);
expect(logo.offset().left).toNear(oPos);
expect(logo.offset().top).toNear(47);
});
})

代码
describe('UI-新鲜货',function(){
var freshItem = KISSY.one('#J_FreshItems');
it('childNode is right',function(){

expect(freshItem.children().length).toBe(2);

});
})

• 功能可用
功能测试目标
• 交互过程正确

代码
describe('功能-城市切换', function(){
var cityTrigger = KISSY.get('.J_CityPicker'),
cityPopup = KISSY.get('.more-city-bd');

it('打开地区浮出层', function(){
jasmine.simulate(cityTrigger, 'mouseover');
expect(cityPopup).toBeVisible();
});
})

• 同步执行耗时
性能测试目标
• 异步响应耗时

代码
describe('功能-城市切换', function(){
var cityTrigger = KISSY.one('.J_CityPicker').getDOMNode(),
cityPopup = KISSY.one('.more-city-bd').getDOMNode();
it('打开速度', function(){
var start = +new Date();
jasmine.simulate(cityTrigger, 'mouseover');
var end = +new Date();
var runtime = end-start;
expect(cityPopup).toBeVisible();
expect(runtime).toBeLessThan(500);
});
})

代码
describe('搜索推荐-城市切换',function(){
var searchInput = KISSY.get('#J_TBSearchQuery');
it('自动搜索推荐', function(){
searchInput.value = 'nokia';
jasmine.simulate(searchInput,'keydown');
waits(1000);
runs(function(){
var suggestContainer = KISSY.get('.ks-suggest-container');

var suggestContent = KISSY.one('.ks-suggest-content').children().length;

expect(suggestContainer).toBeVisible();
expect(suggestContent).toBe(1);
});
});

• 函数

单元测试目标 • 对象的属性和方法

• 业务逻辑

代码可测试性问题

1. 面向过程，过程嵌套

2. 太多的DOM操作

3. 展现逻辑和业务逻辑混淆

4. 闭包

语言特性

1. 本地对象 & 宿主对象

2. 静态作用域链

3. 动态 & 弱类型

提升可测试性

抽象

过程式函数结构
function(){

var CONSTANTS = 'constants value',
定义常量 ELEMENTID = 'J_EId';

var localVariable,
定义变量 result;
var element = KISSY.one(ELEMENTID);

从UI层获取数据 localVariable = element.attr('data-need');

处理数据 result = handle(localVariable);

更新DOM update(element,result);

绑定事件回调 E.on(element, 'event', EventHandler);

}

对象结构
Obj : {

attr-data:'value', 数据属性

attr-ui:D.get('xid'), DOM相关属性

method-data:function(){
// deal attr-data... 处理数据的方法
},

method-ui:function(){
// deal attr-ui... 操作DOM的方法
},

process:function(){
method-data();
功能或过程方法
method-ui();
}
}

如何抽象

1. 单一职责法则，更细颗粒的过程抽象

2. 避免使用匿名函数

3. 将数据处理和DOM操作完全分开

4. 分离业务逻辑和展现逻辑

5. 减少闭包，为闭包中待测函数提供全局命名空间

过程抽象范例
//...calculate point
function getLevel(point){
var level; var level;
if (point < 100){if (point < 100){
level = '文艺青年'; level = '文艺青年';
}else if (point >= 100 if (point <>= 100 && point < 200){
}else && point 200){
level = ‘2B青年’; level = '2B青年‘;
}else{ }else{
level = '普通青年‘; level = '普通青年‘;
} }
return level;
}
//...use level

//...
var level = getLevel(point);
//...

闭包内函数暴露测试接口范例
(function(){
var a = 1;
function method1(m){
return a + m;
}
testTarget = window['testTarget‘] || {};
testTarget.method1 = method1;
})();

逻辑分离范例
Event.on('#content','blur',function(){
if(hasError(this.value)){
Event.on('#content','blur',function(){
showError();
}
if(this.value === ''){ hasError(this.value)
})
function hasError(v){
alert('输入有误，不能为空') showError()
return isBlank(v);
} }
function isBlank(v){
}) var BLANK = '';
return KISSY.trim(v) === BLANK;
}
function showError(){
var errMsg = '输入有误，不能为空';
alert(errMsg);
}

提升可测试性

分层

1. 构建Js本地对象

2. 处理数据逻辑
Javascript 3. 与 Server 通信

4. 添加事件回调

5. 操作DOM，BOM

DOM BOM

Javascript

UI
Control
Model

Server

MVC对象结构
View Control
obj obj obj instantia
tion

obj obj process

bindEvent

…
Model
obj obj
obj
obj

ViewObj
_Attr：value1
1. 获取DOM，BOM数据
AttrEl：someEl
2. 修改DOM和BOM
getUIData：function(){
//…
} 3. 处理展现层逻辑
setUI：function(){
//…
}

ModelObj
1. 建立业务数据模型
_Attr1：value1

_Attr2：value2 2. 处理数据间的逻辑关系
_Method：function(){

}
//…
3. 提供数据访问器
Method：function(){
//… 4. 预留数据事件接口
}

Control 1. 对象实例化
Var objUI = new View();
Var obj = new Model();
2. 初始化
Function Process1(){
//…
} 3. 定义过程,实现view
Function Process2(){
//…
} 和model层对接
E.on(someEl,’event’,
process1); 4. 事件绑定

分层的好处

1. 可测试性提升

2. 各层关注分离，提升可扩展性

3. 业务逻辑和展现逻辑分离，UI修改更安全

分层的问题

1. 面向过程面向对象，推行成本较大

2. 对于简单的过程，反而增加可理解性

3. 对开发人员的抽象能力要求较高

DEMO

http://www.labs.com/mvc/talk.html


如何应用？


首页型逻辑复杂型

DOM测试单元测试


交互型

前端测试

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (17)

Similar a 前端测试

Similar a 前端测试 (20)

前端测试