國會大代誌 - 完善議案追蹤之二

提案人：廉強

● 國會大代誌：

– 開發議案頁面 + 撰寫測試

– 調整熱門議案頁面

● Api.ly ：使用 Dredd 做單元測試

開發議案頁面

將 ETBlue 做的 mockup

變成

可以動的網頁

ETBlue 做的 mockup

變成 ...

先挑選會期

再更改搜尋條件

有日期、委員會、會議、提案類型可選

搜尋邏輯

選不同的年份，月、日、委員會、會議會不同

選不同的月份，日、委員會、會議會不同

選不同的日期，委員會、會議會不同

選不同的委員會，年、月、日、會議會不同

提案 - 修法

右上角是目前的進度

如果第一次修法，會出現「 NEW 」

提案 - 預算

右上角僅顯示「已提案」

提案 - 查照

右上角僅顯示「已提案」

提案 - 其他

若不屬於上述三者，則為其他

若還沒載入完成、右上角會顯示「載入中 ... 」

分享連結

輕輕點一下「複製網址」的按鈕即可

若瀏覽器不支援 flash ，可以按 Ctrl+C 複製

替議案頁面撰寫測試

名詞解釋

● Cassettes ：單元測試的輸入

● Snapshots ：單元測試的預期輸出

Cassettes 的問題

cassettes 都要手動用瀏覽器 copy 下來

當頁面發的 request 一多，這就變成困擾

「如果我每天要重複按照順序按 100 個不同的按

鈕，為什麼不寫個程式自動按這 100 個按鈕？」

– vgod

所以我寫了一個腳本

可以自動把測試需要的 cassettes 下載下來

按照慣例

test/unit/*.spec.ls

下載 cassettes 的腳本就會在

test/unit/recorder/*.ls

執行結果

Snapshots 的問題

大家都知道

瀏覽器的 js 不能存檔到硬碟上

所以我只能把 snapshots 輸出到螢幕上

然後再 copy 下來存檔

... 為甚麼不能讓程式幫我存檔呢？

示意圖

● 開啟 server

● 執行單元測試

– Browser 會發 ajax 給 server

– Server 將接收到的 snapshots 存檔

使用方式

議案頁面的測試完成後

測試覆蓋率上升至 36 %

調整熱門議案頁面

新增瀏覽人次

使用 Dredd 做單元測試

用 docker 把 Dredd 包起來

用 Dredd 跑單元測試

感謝大家聆聽