《Sencha应用程序的UI测试 》一文的示例分析
在昨天翻译了一篇文章《Sencha应用程序的UI测试》，里面有个示例应用程序，但是没详细说明是怎么写出来，本文将针对该示例做一个说明。
首先来看看QA测试的启动页面index.html（ui-tests\app目录下）：
<!DOCTYPE html>
<html>
<head>
<!-- Ext JS -->
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="../../resources/extjs-4.1.0/ext-all-debug.js"></script>
<!-- Siesta -->
<link rel="stylesheet" type="text/css" href="../../resources/siesta-1.1.5-lite/resources/css/siesta-all.css">
<script type="text/javascript" src="../../resources/siesta-1.1.5-lite/siesta-all.js"></script>
<!-- The test harness -->
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>代码包含了Ext JS和Siesta的引用，真正的执行文件应该是index.js，代码如下：
var Harness = Siesta.Harness.Browser;
Harness.configure({
title : 'Sencha UI Test Demo - Application Tests',
hostPageUrl: '../../index.html',
preload : [
'../../resources/sinon-1.5.2.js',
'api_stub.js'
]
});
Harness.start(
{
group : 'Basic application layout',
items : [
{
title : 'Test tabs for data in grids',
url : 'tests/01_tabs.js'
},
{
title : 'Test double-click functionality',
url : 'tests/02_RsvpWindow.js'
}
]
}
);代码首先将Harness指向Siesta.Harness.Browser，方便代码编写。接着是为起做一个配置（configure）。
在配置里，title应该是标题了。接着是hostPageUrl，根据地址可以知道是应用程序的启动页面。preload是要预加载的文件，这里要加载的是sinon，这东西是用来组织数据的，api_stub.js就是用这个来生成返回数据的。
接着是执行start方法，开始运行测试，测试里设置了2项，一项是调用01_tabs.js，一项是调用02_rsvpWindo.js，显示在页面中也就是文中配图的左边两项。
下面来看看02_rsvpWindo.js这个文件，比较典型，代码如下：
StartTest(function(t) {
var tabPanel, upcomingEvents, pastEvents;
t.chain(
{ waitFor : 500 }, //Allow time for the application to render
// also try to give the Meetup.com API time to return... see note below
function(next) {
//set references after rendering
tabPanel = Ext.ComponentQuery.query('tabpanel')[0];
upcomingEvents = tabPanel.items.getAt(0);
pastEvents = tabPanel.items.getAt(1);
next();
},
function(next) {
t.diag('Test that the upcoming event grid displays an RSVP popup when a row is double-clicked.');
t.doubleClick(upcomingEvents.el.down('.x-grid-row').dom, function() {
var win = Ext.ComponentQuery.query('rsvpwindow')[0];
t.is(win.isHidden(), false, 'RsvpWindow should be visible.');
win.close();
next();
});
},
function(next) {
t.diag('Switch tabs');
//click on the past events tab
t.click(tabPanel.el.query('.x-tab')[1], next);
},
{ waitFor : 500 }, //allow animation to complete
function(next) {
t.diag('Test that the past event grid displays an RSVP popup when a row is double-clicked.');
t.doubleClick(pastEvents.el.down('.x-grid-row').dom, function() {
var win = Ext.ComponentQuery.query('rsvpwindow')[0];
t.is(win.isHidden(), false, 'RsvpWindow should be visible.');
win.close();
next();
});
}
);
});看了两个文件，格式是固定的，都是以"StartTest(function(t) {"开始，然后t.chain中以JSON格式编写测试函数。
第一个函数，先获取要测试的组件。
第二个函数中的doubleClick表明是用来测试Grid的行的双击操作。这里的关键就是第一个参数要找出实际要测试的HTML元素。如果弹出窗口显示正确，close就能执行正确。
第三个函数是测试标签页切换了。关键还是要掌握怎么找到元素。
第4个函数还是用来测试Grid的行的双击操作。
总的来说，这样写测试代码也不会太困难，关键的地方是掌握Siesta的一些方法以及能正确获取到要测试的组件的元素。
