iT邦幫忙

5

邊學AngularJS邊做Todo List (5) - 為測試作準備

  • 分享至 

  • xImage
  •  

利於易測試,是AngularJS這個框架的一大特色。

由於AngularJS在MVC的架構設計,加上雙向資料綁定的特色,UI功能和資料結合的相當鬆散,因此不管是要針對UI來寫測試,或是要作Controller的單元測試,都變得相當容易。

這一回,我們就要來為之後幫Todo List寫測試而作準備。
【E2E測試與單元測試】

AngularJS的測試分成兩種,一種是E2E測試,一種單元測試。

所謂的E2E測試(End-to-End Testing),簡單地說,是從使用者與應用程式的互動方式來進行測試,因此寫測試時,會從操作的面向來思考測試寫法。AngularJS採用了Jasmine的語法,並且提供了相關的API,讓開發者可以更容易撰寫測試。可參看官網Deverloper Guid:e2e-testing

另一種則是單元測試,這是大家一般比較熟悉的測試方式。在概念上,它是針對function的input、output去作測試,若看官網上的範例,它也同樣是用Jasmine的語法來撰寫單元測試。這部份想進一步了解,也可參看官網Deverloper Guid:unit-testing

AngularJS也提供了兩套工具,一套是Jasmine、一套是JsTestDriver,前者是相當知名的行為驅動測試框架,透過瀏覽器的方式來跑出測試結果。後者則是透過Java,執行一個測試Server,可在瀏覽器或Conslole環境中進行,測試速度快,而且可自動執行。

由於我們主要在介紹AngularJS,所以對於測試工具不會著墨太深,有想深入了解的,推薦《Test-Driven JavaScript Development》這本書,可以為JavaScript的測試開發打下堅實的基礎。

不過工具並沒有限定只能用這些,AngularJS在官網中也提過,使用的測試工具可以使用自己熟悉。主要是AngularJS方便測試的架構,讓測試這件事更容易發生。

【使用angular-seed】

AngularJS提供了一個專案範本「Angular-Seed」給大家下載,讓大家在開發專案時可以依此目錄結構來規劃,另外也提供了一些測試與開發時的工具。

如果大家有使用git的話,可以用

git clone https://github.com/angular/angular-seed.git

抓回來,或是到<https://github.com/angular/angular-seed >下載ZIP檔解開來。解開後的目錄結構與用途如下:

app //放置專案程式的地方
config //裡面放置jsTestDriver相關的設定檔
logs //目前是空的,測試過程產生相關的log會放這裡
scripts //裡面放了一些windows/linux腳本程式,大致上是啟用測試Server、測試相關的指令,另外還有一個啟用node.js 伺服器的腳本
test // 裡面有e2e、lib、unit三個目錄,e2e和unit裡面放的就是實際寫測試時的工具,而lib則是放置測試框架相關的腳本。

下一回,我們就會先從e2e的測試說起。

另外,雖然前幾週我們都是在local端執行AngularJS的頁面,但是就測試來說,因為有sandbox的因素,所以最好還是啟用一個Web伺服器,將網頁放到伺服器中。

如果你有慣用的Web伺服器環境,那就沒問題,不然建議可以安裝Node.js,不但輕量、簡單、易用,而且同樣是JavaScript家族,AngularJS也有預先放置一個開啟Node.js Web Server的腳本在裡面,不用自己寫。


邊學AngularJS邊做Todo List (1) - Hello World
邊學AngularJS邊做Todo List (2) - Todo List 動起來
邊學AngularJS邊做Todo List (3) - Todo List 刪項目
邊學AngularJS邊做Todo List (4) - 修改待辦事項
邊學AngularJS邊做Todo List (5) - 為測試作準備
邊學AngularJS邊做Todo List (6) - E2E測試(上)


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-07-28 23:25:03

意猶未盡,再來再來!!XD

我要留言

立即登入留言