寫 directive 的給參數方式其實完全看到底想怎麼用，基本上我本人是沒有需要動態改參數的需求…
不過似乎有些使用者在切換 route path 之後就會發生參數沒帶到而無法顯示的情況(參數我想主要是 href 之類的)，看來大家都很自然的把這些東西寫在 $scope.xxx 啊…
這個小改版，我大部分時間都花在寫 test 上了… 不過是餵個參數，竟然這麼難寫… 不知道是不是我自己想太多的關係
https://github.com/pc035860/angular-easyfb/blob/master/test/unit/social-plugin-directive.spec.js
剛開始學習 AngularJS 時，循一般的網路上學習路徑，你可能會先 run 一次官方的 tutorial，完全照著裡面寫的 step 做就可以完成一個包含 test 的完整小專案。雖然它一步一步介紹的很清楚，但其實仔細看會發現 test 的部分接近於貼了程式碼就馬虎帶過 lol
來看看做為 tutorial 範例的 angular-phonecat 在 step2 的時候提供的 controller unit test spec：
/* file: 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 完全沒寫它們的來源啊~~~
其實推上 v0.3.0 的最後推手是加上了全部的 unit test spec… 來說說想加上 test 的原因吧！
angular-easyfb 這個 module 其實說來開發起來蠻麻煩的… 基本上從第一版寫完之後，後來我再繼續改都是用第一版的 demo plunk 做為依據，換掉其中載入在 GitHub Pages 的 script，改成載入另外的開發用版本。為什麼？ 因為似乎在本地開 server 來做開發的話，Facebook JavaScript SDK 跑不起來(但老實說我沒有真的試過… 去 developer panel 裡改一些 domain 相關的設定可能會有機會吧)
不斷把程式碼貼來貼去的厭煩度終於在 v0.2.x 達到了巔峰。我知道寫了 test 之後，應該可以大大改善這情況，畢竟我不再需要載入真正的 SDK 來確保我所有的功能都可以正常運作(在 test 裡面 mock FB SDK 的 API 就好了)，也就可以從來回剪貼程式碼於 Plunker 跟 Sublime Text 的循環中解脫了！
看著之前在 GitHub repo 的 README 裡面寫下的
TODO
- test
心裡默默的覺得時機已經成熟，就差臨門一腳。詳見 AngularJS test 新手上路 (1) - 基本環境設定。
這版新增了可以自訂 SDK 載入的功能，讓這個 module 有了使用在 Apache Cordova (or Phonegap) 裡的可能。透過 Apache Cordova Facebook Plugin，只需要載入本地的 facebook-js-sdk.js 後再自訂一下觸發 FB.init() 的時機即可。
以 這個 Simple example 為例，與 AngularJS 及 angular-easyfb 結合之後要能夠順利 init 只需要加上
// angular config phase
.config(function ($FBProvider) {
$FBProvider.setInitParams({
appId: "{APP ID}",
nativeInterface: CDV.FB,
useCachedDialogs: false
});
$FBProvider.setLoadSDKFunction(function ($document, $fbAsyncInit) {
// 上面的 HTML 已經用 <script> 載入了 facebook-js-sdk.js，這邊就不用載了
$document.on('deviceready', function () {
$fbAsyncInit();
});
});
})就可以順利運作了。 (相關 issue)
angular-easyfb 作為一個讓 AngularJS 與 Facebook JavaScript SDK 合作更輕鬆且密切的 module，老實說 v0.3.0 已經接近它最後的樣貌了。現在整個 module 的彈性與方便性都好到一個不行！
結論，我真的不知道還要加什麼功能了… 所以這個 module 基本上應該會轉型為只修 bug 的狀態一直 maintain 下去，在這邊就先下台一鞠躬，謝謝收看。
最近的空閒時間比較忙(?)，之前買了很多書結果都沒看… 直到這次連假才終於有鬆一口氣的感覺，於是我翻出了 Mastering Web Application Development with AngularJS 這本來快速消化一下。
所謂快速消化就是因為好像大部分的事情我都知道了(有沒有這麼厲害)，希望快速從書中獲得資訊量(一些未知的事物)，所以是接近連讀帶掃的方式來看書。想不到第二章我就被迫減速了。
第二章的主題是 “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 了！
當年(其實也就是幾個月以前)在製作 extension 某個功能的時候需要呼叫 chrome.tabs API 來拿一些資料再送回去給 content，於是就寫出了像下面這樣的 code：
/* file: content_script.js */
chrome.runtime.postMessage({action: 'tabs information'}, function(res) {
/**
* Do something with tabs information
*/
});/* file: background.js */
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action === 'tabs information') {
// Query all tabs for information
chrome.tabs.query({}, function (tabs) {
var info = [];
tabs.forEach(function (tab) {
info.push({
id: tab.id,
title: tab.title,
url: tab.url
});
});
// Send it back with `sendResponse` function
sendResponse(info);
});
}
});看起來沒什麼大問題，但很遺憾的，這樣並不 work 。