Posts match “ Test ” tag:

AngularJS test 新手上路 (1) - 基本環境設定

最近的空閒時間比較忙(?),之前買了很多書結果都沒看... 直到這次連假才終於有鬆一口氣的感覺,於是我翻出了 Mastering Web Application Development with AngularJS 這本來快速消化一下。

mastering_webapp_dev_with_angularjs.jpg

所謂快速消化就是因為好像大部分的事情我都知道了(有沒有這麼厲害),希望快速從書中獲得資訊量(一些未知的事物),所以是接近連讀帶掃的方式來看書。想不到第二章我就被迫減速了。

第二章的主題是 "Building and Testing",building 當然是早就已經熟得不能再熟,不過 testing 我還真的是從來沒寫過... 其實一直以來都知道 AngularJS 是非常推崇 test 這件事的,有許多關於 test 的影片或文章,而大部分的 open source module 也都有寫 test spec。

Angular is written with testability in mind, but it still requires that you do the right thing. We tried to make the right thing easy, but Angular is not magic. If you don't follow these guidelines you may very well end up with an untestable application.

其實現在也只讀完第三章而已,這本書的範例寫法給了我很大的動力... 去寫 test。讓我們來看看第三章介紹 Promise 的其中一個範例就會知道為什麼了...

it('should illustrate basic usage of $q', function () {

  var pizzaOrderFulfillment = $q.defer();
  var pizzaDelivered = pizzaOrderFulfillment.promise;

  pizzaDelivered.then(pawel.eat, pawel.beHungry);

  pizzaOrderFulfillment.resolve('Margherita');
  $rootScope.$digest();

  expect($log.info.logs).toContain(['Pawel is eating delicious Margherita']);

});

自從第二張介紹完各種 test 大至上怎麼寫之後,作者之後的範例全部都用 test 的形式來演示!老實說我認真覺得這樣看起來蠻清楚的... 而且越看越覺得... 寫 test 好像還蠻有趣的(嗎?)

再加上由於日前進行自己一些 open source module 的開發中感受到要確保整體運作的困難度,又為了遵循 AngularJS 推崇的 test 理念,現在似乎是時候來進行首發 test 了!

Read on

AngularJS test 新手上路 (2) - 環境介紹

剛開始學習 AngularJS 時,循一般的網路上學習路徑,你可能會先 run 一次官方的 tutorial,完全照著裡面寫的 step 做就可以完成一個包含 test 的完整小專案。雖然它一步一步介紹的很清楚,但其實仔細看會發現 test 的部分接近於貼了程式碼就馬虎帶過 lol

來看看做為 tutorial 範例的 angular-phonecat 在 step2 的時候提供的 controller unit test spec:

test/unit/controllersSpec.js
describe('PhoneCat controllers', function() {
  beforeEach(module('phonecatApp'));
 
  describe('PhoneListCtrl', function(){
 
    it('should create "phones" model with 3 phones', inject(function($controller) {
      var scope = {},
          ctrl = $controller('PhoneListCtrl', { $scope: scope });
 
      expect(scope.phones.length).toBe(3);
    }));
  });
});

那些 describe, beforeEach ... 是什麼? tutorial 完全沒寫它們的來源啊~~~

Read on

Travis CI build status badge on GitHub

如果這一年來你有比較常在各個 GitHub repo 裡亂逛的話,應該蠻常看到像下面這樣的一個畫面

在 repo 標題的右側有著一個小小的圖示(badge),上面寫著 "build passing" 或是 "build failing" 之類的字樣,它們是做什麼用的呢?

Continuous Intergration (CI)

Wikipedia: Continuous integration
http://en.wikipedia.org/wiki/Continuous_integration

[軟體工程]持續整合 (Continuous integration, CI) 簡介
http://www.dotblogs.com.tw/hatelove/archive/2011/12/25/introducing-continuous-integration.aspx

Travis CI

Travis CI 就是人家架好的 CI server,目前跟 GitHub 有做相當好的整合,只要動動手指就可以讓你享受 CI 帶來的便利!

對於 open source project,Travis CI 免費給你用;有需要在 private 的 repo 使用的話才需要付錢。

Read on