使用測試優先方法開發用戶界面

1、概述

測試優先是測試驅動開發(Test-Driven Development, TDD)的核心思想，它要求在編寫產品代碼前先編寫基于產品代碼的測試代碼。在測試驅動開發的單元測試中，對GUI應用實施自動測試應該是測試驅動開發的軟肋之一。由于界面的操作是有由人來完成的，所以要想在GUI中完成單元自動測試是有一定難度的。Kent Beck在它的《測試驅動開發》中就曾提到過這個問題。

　本文將通過一個例子來講解在測試驅動開發中如何針對GUI進行單元測試。這個例子是David Astels著的《測試驅動開發實用指南(影印版)》中一個關于影片列表管理的例子。該書中文版即將在國內出版。書中討論并介紹了開發這個例子的多種方法。筆者將介紹其中的一種，并且為了方便使用C++的朋友的學習，書中的代碼我用C++寫了一遍，類名和變量名盡量和原書保持一致，以方便閱讀該書的C++讀者。在此也要感謝David Astels給我們帶來如此精彩的一本書。

　本文敘述背景為：CppUnit1.9.0, Visual C++ 6.0, Windows2000 pro。文中敘述有誤之處，敬請批評指正。如果讀者對CppUnit還沒有一定的了解，可以先參考筆者的另一篇文章《CppUnit測試框架入門》。

2、需求分析

對于這個影片管理的應用，我們主要實現增加、刪除和顯示影片列表的功能?；谶@些需求，我們可以畫一張GUI草圖，如圖1：

　  
　　　　　　　　　圖1

界面的控件主要有：一個顯示所有影片的列表listbox控件，一個填寫新的影片名的edit控件,一個增加button控件，一個刪除button控件。由此，我們的開發目標就十分的明確了。

3、編寫UI測試代碼

這部分的UI測試代碼主要是測試各個控件是否正確生成并且是可見的，以及測試一些控件的label文字是否正確。

　我們從TestCase繼承一個類TestWidgets用于測試窗口，并添加四個測試，分別測試listbox、edit、add button、delete button。

class TestWidgets : public CppUnit::TestCase
{
CPPUN99v_TEST_SU99vE(TestWidgets);
CPPUN99v_TEST(testList);
CPPUN99v_TEST(testField);
CPPUN99v_TEST(testAddButton);
CPPUN99v_TEST(testDeleteButton);
CPPUN99v_TEST_SU99vE_END();
public:
TestWidgets();
virtual ~TestWidgets();
public:
virtual void setUp();
virtual void tearDown(); 
void testList();
void testField();
void testAddButton();
void testDeleteButton();
private:
MovieListWindow* m_pWindow;
}; 

其中,MovieListWindow是一個窗口類。我們來看看其中的一個測試，請看代碼中的注釋。

void TestWidgets::testAddButton()
{
//得到btn指針
CButton* pAddButton = m_pWindow->GetAddButton();
//檢查是否生成btn
CPPUN99v_ASSERT(pAddButton->m_hWnd);
//檢查btn是否可見
CPPUN99v_ASSERT_EQUAL(TRUE, ::IsWindowVisible(pAddButton->m_hWnd));
CString strText;
pAddButton->GetWindowText(strText);
CString strExpect = "Add";
//檢查btn的Label文字是否正確
CPPUN99v_ASSERT_EQUAL(strExpect, strText);
} 

編譯測試代碼，編譯器會給我們一些出錯信息。這要求我們必須馬上編寫產品代碼以讓編譯通過。首先第一個要實現的產品代碼就是MovieListWindow窗口類。 

class AFX_EXT_CLASS MovieListWindow : public CDialog
{
public:
MovieListWindow(CWnd* pParent = NULL); // standard constructor
CListBox* GetMovieListBox(){return &m_MovieListBox;};
CEdit* GetMovieField(){return &m_MovieField;};
CButton* GetAddButton(){return &m_AddBtn;};
CButton* GetDeleteButton(){return &m_DeleteBtn;};
void Init();
// Dialog Data
//{{AFX_DATA(MovieListWindow)
enum { IDD = IDD_MOVIELISTDLG };
CButton m_AddBtn;
CButton m_DeleteBtn;
CEdit m_MovieField;
CListBox m_MovieListBox;
//}}AFX_DATA
// Overrides
// ClassWizard generated virtual function overrides
//{{AFX_VIRTUAL(MovieListWindow)
protected:
virtual void DoDataExchange(CDataExchange* pDX); // DDX/DDV support
//}}AFX_VIRTUAL
// Implementation
protected:
// Generated message map functions
//{{AFX_MSG(MovieListWindow)
//}}AFX_MSG
DECLARE_MESSAGE_MAP()
}; 

在MovieListWindow窗口類中我們實現了需要的控件以及針對這些控件的一些方法，如GetMovieListBox()等，本文在此不做詳述。編譯測試代碼和產品代碼，檢查是否通過。如未通過則繼續檢查產品代碼以使編譯和測試通過。 

4、編寫控件行為測試代碼 

接下來應該是編寫點擊add button和delete button的測試代碼了。同樣,我們從TestCase繼承出TestOperation：

class TestOperation : public CppUnit::TestCase
{
CPPUN99v_TEST_SU99vE(TestOperation);
CPPUN99v_TEST(testMovieList);
CPPUN99v_TEST(testAdd);
CPPUN99v_TEST(testDelete);
CPPUN99v_TEST_SU99vE_END();
public:
void testMovieList();
void testAdd();
void testDelete();
public:
void setUp();
void tearDown();
TestOperation();
virtual ~TestOperation();
private:
static CString LOST_IN_SPACE;
CStringArray m_MovieNames;
MovieListWindow* m_pWindow;
MovieListEditor* m_pEditor;
}; 

你會發現，在TestOperation類中出現了一個成員變量MovieListEditor* m_pEditor。類MovieListEditor是一個用來保存影片數據以及對影片數據進行增加 ，刪除操作的管理類。后面我們會給出它的實現?？纯磗etUp()做了什么：

void TestOperation::setUp()
{
//創建一個MovieListEditor實例
m_pEditor = new MovieListEditor();
m_MovieNames.RemoveAll();
//將MovieListEditor中的影片列表拷貝到m_MovieNames,為后面測試作準備
for(int n=0; n<m_pEditor->GetMovies()->GetSize(); n++)
{
m_MovieNames.Add(m_pEditor->GetMovies()->GetAt(n));
}
} 

我們來看看添加影片的測試，請看代碼注釋：

void TestOperation::testAdd()
{
//拷貝一份movie list
CStringArray MovieNamesWithAddition;
for(int n=0; n<m_MovieNames.GetSize(); n++)
{
MovieNamesWithAddition.Add(m_MovieNames.GetAt(n));
}
MovieNamesWithAddition.Add(LOST_IN_SPACE);
//生成窗口
MovieListWindow *pWindow = new MovieListWindow(m_pEditor);
pWindow->Init();
//填寫新的影片的名稱
CEdit* pEdit = pWindow->GetMovieField();
pEdit->SetWindowText(LOST_IN_SPACE);
//點擊add btn 
CButton* pBtn = pWindow->GetAddButton();
::SendMessage(pBtn->m_hWnd, BM_CLICK, 0, 0);
//檢查列表控件中是否已加入新的影片
CListBox* pListBox = pWindow->GetMovieListBox();
CPPUN99v_ASSERT_EQUAL(MovieNamesWithAddition.GetSize(), pListBox->GetCount());
//檢查列表控件中影片名是否正確
CString strNewMovieName;
pListBox->GetText(pListBox->GetCount()-1, strNewMovieName);
CPPUN99v_ASSERT_EQUAL(LOST_IN_SPACE, strNewMovieName);
//銷毀窗口
pWindow->DestroyWindow();
delete pWindow;
pWindow = NULL;
}

 

編譯后會有出錯信息，主要的錯誤有：

　a)、我們把m_pEditor保存在MovieListWindow中了，這需要我們修改原來的MovieListWindow的構造函數。 
　b)、沒有MovieListEditor類。

MovieListEditor的實現如下：

class AFX_EXT_CLASS MovieListEditor 
{
public:
MovieListEditor();
virtual ~MovieListEditor();
public:
virtual CStringArray* GetMovies(){return &m_arMovieList;};
virtual void Add(CString strMovie){m_arMovieList.Add(strMovie);};
virtual void Delete(int nIndex){m_arMovieList.RemoveAt(nIndex);};
private:
CStringArray m_arMovieList;
}; 

再次編譯,已經通過.運行測試,發現在：

CPPUN99v_ASSERT_EQUAL(MovieNamesWithAddition.GetSize(), pListBox->GetCount());

測試通不過。檢查后知道原因是，我們在測試代碼里：::SendMessage(pBtn->m_hWnd, BM_CLICK, 0, 0);

給add button發送了點擊按鈕的消息，但是在MovieListWindow 窗口中我們沒有加入消息的響應函數，因此測試沒有通過。趕緊添加消息響應函數。

void MovieListWindow::OnClickAddButton() 
{
UpdateData();
CString strNewMovieName;
m_MovieField.GetWindowText(strNewMovieName);
if("" != strNewMovieName)
{
m_pEditor->Add(strNewMovieName);
m_MovieListBox.AddString(strNewMovieName);
}
} 

編譯、測試、通過。 

5、Mock Objects 

在刪除操作的單元測試中，我們遇到的一個問題是，影片列表的數據應該是保存在一個文本文件或者數據庫當中的，如果我們編寫的測試依賴于這些實際的文件或數據庫，那么我們的測試就會受制于這些外部的資源。一旦文件或者數據庫里的數據發生變化，必然會波及到我們的測試代碼，從而產生錯誤的測試信息。前面的MovieListEditor中我們沒有加入一些初始化的數據,在測試刪除操作時會遇到一些問題 。

　這里，我們引入Mock Objects。Mock Objects用來模擬外部復雜的資源（如數據庫，網絡連接等），使UI可以測試那些依賴于這些復雜外界資源的模塊。例如在測試一個跟數據庫有關系的模塊時，我們并不一定要建立一個真實的數據庫連接，而只需建立一個Mock Objects就可以了。測試所需的數據都存在于這個Mock Objects?？梢哉f，Mock Objects為我們提供了一個輕量級的、可控制的、高效的模型。

　在本例中，影片的增加、刪除都會跟文件或數據庫操作發生關系。這時我們就可以利用Mock Objects來隔離測試代碼與文件或數據庫。使用Mock Objects一般有以下幾個步驟：

　a)、定義一個外部資源的接口.(這個接口一般是可以在重構過程中提煉出來的)。
　b)、定義一個Mock Objects，從外部資源的接口繼承下來，實現外部資源的接口。
　c)、創建一個Mock Objects，并設置它的內部期望值。
　d)、把創建的這個Mock Objects傳遞給需要測試的模塊進行操作。
　e)、操作完畢后將Mock Objects內部的狀態與期待狀態比較。 現在我們就根據這個步驟來實現本例子中的Mock Objects.通過對前面的代碼進行重構,我們可以提煉出一個接口MovieListEditor：

class AFX_EXT_CLASS MovieListEditor 
{
public:
　　　　MovieListEditor();
　　　　virtual ~MovieListEditor();
public:
　　　　virtual CStringArray* GetMovies()=0;
　　　　virtual void Add(CString strMovie)=0;
　　　　virtual void Delete(int nIndex)=0;
}; 

請注意它和前面我們定義的MovieListEditor的不同。接下來，我們應該定義一個Mock Objects，當然它是從MovieListEditor繼承下來的：

class mockEditor : public MovieListEditor
{
public:
mockEditor();
virtual ~mockEditor();
public:
virtual CStringArray* GetMovies(){return &m_arMovieList;};
virtual void Add(CString strMovie){m_arMovieList.Add(strMovie);};
virtual void Delete(int nIndex){m_arMovieList.RemoveAt(nIndex);};
private:
CStringArray m_arMovieList;
}; 

然后給這個Mock Objects設置初識值，我們選擇在它的構造函數里進行。

mockEditor::mockEditor()
{
m_arMovieList.Add("Star Wars");
m_arMovieList.Add("Star Trek");
m_arMovieList.Add("Stargate");
} 

我們添加了三個影片用于測試。接著，應該把這個MockObjects的一個實例傳遞給需要測試的模塊。這里就是我們要測試的UI(MovieListWindow)。

m_pEditor = new mockEditor();
MovieListWindow *pWindow = new MovieListWindow(m_pEditor); 

最后我們來看看經過修改后的新的測試添加影片的方法：

void TestOperation::testAdd()
{
//拷貝一份movie list
CStringArray MovieNamesWithAddition;
for(int n=0; n<m_MovieNames.GetSize(); n++)
{
MovieNamesWithAddition.Add(m_MovieNames.GetAt(n));
}
MovieNamesWithAddition.Add(LOST_IN_SPACE);
//生成窗口
MovieListWindow *pWindow = new MovieListWindow(m_pEditor);
pWindow->Init();
//填寫新的影片的名稱
CEdit* pEdit = pWindow->GetMovieField();
pEdit->SetWindowText(LOST_IN_SPACE);
//點擊add btn 
CButton* pBtn = pWindow->GetAddButton();
::SendMessage(pBtn->m_hWnd, BM_CLICK, 0, 0);
//檢查列表控件中是否已加入新的影片
CListBox* pListBox = pWindow->GetMovieListBox();
CPPUN99v_ASSERT_EQUAL(MovieNamesWithAddition.GetSize(), pListBox->GetCount());
//將Mock Objects的內部數據和期望值進行比較
CPPUN99v_ASSERT_EQUAL(MovieNamesWithAddition.GetSize(), 
m_pEditor->GetMovies()->GetSize());
//檢查列表控件中影片名是否正確
CString strNewMovieName;
pListBox->GetText(pListBox->GetCount()-1, strNewMovieName);
CPPUN99v_ASSERT_EQUAL(LOST_IN_SPACE, strNewMovieName);
//將Mock Objects的內部數據和期望值進行比較
int nIndex = m_pEditor->GetMovies()->GetSize();
CPPUN99v_ASSERT_EQUAL(LOST_IN_SPACE, m_pEditor->GetMovies()->GetAt(nIndex-1));
//銷毀窗口
pWindow->DestroyWindow();
delete pWindow;
pWindow = NULL;
} 

請注意，這里測試的數據都是mockEditor里的，而且在UI進行添加操作后，還將mockEditor內部的狀態與期待狀態做了比較。

CPPUN99v_ASSERT_EQUAL(MovieNamesWithAddition.GetSize(), m_pEditor->GetMovies()->GetSize());
CPPUN99v_ASSERT_EQUAL(LOST_IN_SPACE, m_pEditor->GetMovies()->GetAt(nIndex-1)); 

其他刪除操作的測試跟添加類似，在此不做詳述。至此，我們就完成了這個GUI應用程序的開發。所有的測試如圖2所示：


　　　　　　　　　　　　　　　　圖2 

6、源碼說明 

本文附帶的代碼包括三個Project，分別是Movie、GuiTestFirst、AppMovieList.Movie是產品代碼.GuiTestFirst是測試代碼 。AppMovieList是使用Movie輸出的產品代碼而寫的應用程序，它從MovieListEditor繼承出一個新的影片管理類MyEditor。它主要是演示如何使用我們提煉出來的MovieListEditor接口 。例如你可以實現CXmlMovieListEditor，CAclearcase/" target="_blank" >ccessMovieListEditor等等。進入GuiTestFirst打開所有這些工程。AppMovieList運行如圖3所示 ：


　　　　　　　　　　　　圖3 

7、總結 

a)、對GUI應用實施測試優先開發方法，這在測試驅動開發中并不是必須的，可根據開發的實際情況來選擇。 
　b)、我們通過引入Mock Objects，我們使測試代碼和外部復雜的資源隔離開來，同時也使我們能夠從中既有代碼中提煉出清晰的接口，使代碼整潔可用。 

8、參考資料 

《測試驅動開發實用指南(影印版)》David Astels 
　《測試驅動開發(中文版)》Kent Beck 
　《Endo-Testing: Unit Testing with Mock Objects》Tim Mackinnon, Steve Freeman, Philip Craig  
  
 

原文轉自：http://www.kjueaiud.com