在昨天翻譯了一篇文章《Sencha應用程式的UI測試》，裡面有個示例應用程式，但是沒詳細說明是怎麼寫出來，本文將針對該示例做一個說明。
首先來看看QA測試的啟動頁面index.html（ui-testsapp目錄下）：
[html] view plaincopy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <!– Ext JS –>  
  5.     <link rel=“stylesheet” type=“text/css” href=“http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css”>  
  6.     <script type=“text/javascript” src=“../../resources/extjs-4.1.0/ext-all-debug.js”></script>  
  7.   
  8.     <!– Siesta –>  
  9.     <link rel=“stylesheet” type=“text/css” href=“../../resources/siesta-1.1.5-lite/resources/css/siesta-all.css”>  
  10.     <script type=“text/javascript” src=“../../resources/siesta-1.1.5-lite/siesta-all.js”></script>  
  11.   
  12.     <!– The test harness –>  
  13.     <script type=“text/javascript” src=“index.js”></script>  
  14. </head>  
  15. <body>  
  16. </body>  
  17. </html>  

程式碼包含了Ext JS和Siesta的引用，真正的執行檔案應該是index.js，程式碼如下：

[javascript] view plaincopy
  1. var Harness = Siesta.Harness.Browser;  
  2.   
  3. Harness.configure({  
  4.     title     : `Sencha UI Test Demo – Application Tests`,  
  5.       
  6.     hostPageUrl: `../../index.html`,  
  7.   
  8.     preload : [  
  9.         `../../resources/sinon-1.5.2.js`,  
  10.         `api_stub.js`  
  11.     ]  
  12. });  
  13.   
  14.   
  15. Harness.start(  
  16.     {  
  17.         group       : `Basic application layout`,  
  18.           
  19.         items       : [  
  20.             {  
  21.                 title : `Test tabs for data in grids`,  
  22.                 url : `tests/01_tabs.js`  
  23.             },  
  24.             {  
  25.                 title : `Test double-click functionality`,  
  26.                 url : `tests/02_RsvpWindow.js`  
  27.             }  
  28.         ]  
  29.     }  
  30. );  

程式碼首先將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
  1. StartTest(function(t) {  
  2.   
  3.     var tabPanel, upcomingEvents, pastEvents;  
  4.   
  5.     t.chain(  
  6.         { waitFor : 500 }, //Allow time for the application to render  
  7.                            // also try to give the Meetup.com API time to return… see note below  
  8.   
  9.         function(next) {  
  10.             //set references after rendering  
  11.             tabPanel =  Ext.ComponentQuery.query(`tabpanel`)[0];  
  12.             upcomingEvents = tabPanel.items.getAt(0);  
  13.             pastEvents = tabPanel.items.getAt(1);  
  14.   
  15.             next();  
  16.         },  
  17.   
  18.         function(next) {  
  19.             t.diag(`Test that the upcoming event grid displays an RSVP popup when a row is double-clicked.`);  
  20.   
  21.             t.doubleClick(upcomingEvents.el.down(`.x-grid-row`).dom, function() {  
  22.                 var win = Ext.ComponentQuery.query(`rsvpwindow`)[0];  
  23.   
  24.                 t.is(win.isHidden(), false, `RsvpWindow should be visible.`);  
  25.                 win.close();  
  26.   
  27.                 next();  
  28.             });  
  29.         },  
  30.   
  31.         function(next) {  
  32.             t.diag(`Switch tabs`);  
  33.   
  34.             //click on the past events tab  
  35.             t.click(tabPanel.el.query(`.x-tab`)[1], next);  
  36.         },  
  37.   
  38.         { waitFor : 500 }, //allow animation to complete  
  39.   
  40.         function(next) {  
  41.             t.diag(`Test that the past event grid displays an RSVP popup when a row is double-clicked.`);  
  42.   
  43.             t.doubleClick(pastEvents.el.down(`.x-grid-row`).dom, function() {  
  44.                 var win = Ext.ComponentQuery.query(`rsvpwindow`)[0];  
  45.   
  46.                 t.is(win.isHidden(), false, `RsvpWindow should be visible.`);  
  47.                 win.close();  
  48.   
  49.                 next();  
  50.             });  
  51.         }  
  52.     );  
  53.   
  54. });  

看了兩個檔案，格式是固定的，都是以”StartTest(function(t) {“開始，然後t.chain中以JSON格式編寫測試函式。

第一個函式，先獲取要測試的元件。
第二個函式中的doubleClick表明是用來測試Grid的行的雙擊操作。這裡的關鍵就是第一個引數要找出實際要測試的HTML元素。如果彈出視窗顯示正確，close就能執行正確。
第三個函式是測試標籤頁切換了。關鍵還是要掌握怎麼找到元素。
第4個函式還是用來測試Grid的行的雙擊操作。

總的來說，這樣寫測試程式碼也不會太困難，關鍵的地方是掌握Siesta的一些方法以及能正確獲取到要測試的元件的元素。