在昨天翻譯了一篇文章《Sencha應用程式的UI測試》，裡面有個應用程式範例，但是沒詳細說明是怎麼寫出來，本文將針對該樣本做一個說明。
首先來看看QA測試的啟動頁面index.htmlui-tests\app目錄下）：[html] view plaincopy
- <!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，代碼如下：
[javascript] view plaincopy
- 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這個檔案，比較典型，代碼如下：
[javascript] view plaincopy
- 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的一些方法以及能正確擷取到要測試的組件的元素。
本文出自 “黃燈橋的部落格” 部落格，請務必保留此出處http://dqhuang.blog.51cto.com/2522725/1117986
