Taste Cucumber.js - JavaScript BDD Framework

Transcript

1. Cucumber.js 實踐 BDD 經驗分享 Yuren Ju 小黃瓜
2. https://creativecommons.org/licenses/by/4.0/
3. Yuren Ju • g0v contributor ◦ 勞基法修法計算機 ◦ 勞基法函式庫 ◦ 勞工權益網站 ◦ 割闌尾 ◦ Bifrost 物資管理系統 • COSCUP 議程組長、紀錄組長 • JavaScript Developer
4. 我想開發勞基法函式庫！ 讓往後跟勞基法相關的專案，都可以直接使用函式庫來完成跟法律相關的部分
5. 如何開始？ • 要找人幫忙，我有認識一些熟悉勞基法的朋友！ • 但... 函式庫 (library) 跟一般軟體不同，一般使用者不容易了解 • 或許我們先作一版有介面的軟體，再讓這些朋友幫忙找出問題點？
6. 「勞工權益」網站
7. 缺點 • 有介面的軟體引用了勞基法函 式庫，等於說是間接關係 • 有許多功能沒辦法透過軟體表 達 • 發現嚴重錯誤後，函式庫的 API 要跟著修改 • 改完之後裡面的邏輯可能會像 義大利麵一樣。 Mason eating spaghetti, cc-nc-nd
9. 工程師與其他專業領 域的人，有沒有辦法 在更早的時候就開始 溝通？ cc-by-nc https://flic.kr/p/36iL52
10. BDD Behavior-driven development
11. 流程 撰寫規格 撰寫自動化測試 撰寫程式
12. 來做個擲骰子的網站吧
13. 需要什麼功能？ 擲骰子？
15. 功能: 擲骰子 場景: 擲一顆骰子 當按下 ”擲” 按鈕 那麼骰子會顯示 1 - 6 之間的點數 場景: 擲兩顆骰子 當改變骰子數量變成 2 時 而且按下 ”擲” 按鈕 那麼總共會出現 2 顆骰子 而且骰子會顯示 1 - 6 之間的點數 而且會出現所有骰子點數的加總
16. 規格 成品 ?
17. 自動化測試 vue-sample> npm test
18. 撰寫自動化測試 撰寫程式 撰寫自動化測試 撰寫程式
19. 撰寫自動化測試 撰寫程式 TDD, Test-Driven Development
20. Write test before implementation
21. Write test before implementation
22. Write test before implementation Method chaining
23. TDD 優點 • 提早了解如何程式會如何被使用 • 釐清模組的介面 • 每次循環後可以基於現有的測試重構 • 工程師之間更容易的在還沒寫程式之前就可以討論如何定義介面 Top Five Benefits of Test Driven Development (TDD)
24. 撰寫自動化測試 撰寫程式 自動化測試會作為撰寫程式的「輸入」 撰寫程式時可以藉由跑測試來了解目前現有程式通過了多少測試
25. 撰寫規格 撰寫自動化測試 撰寫程式 規格卻沒辦法成為自動化測試的「輸入」 需要經由人閱讀規格轉換成自動化測試
26. 撰寫規格 撰寫自動化測試 撰寫程式
27. BDD Behavior-driven development
28. BDD - Behavior-driven development 兩大重點： 1. 用通用語言敘述行為作為規格 2. 用 (1) 產生的規格作為自動化測試的基礎 http://www.infoq.com/cn/news/2015/02/introducing-bdd
29. 流程 撰寫規格 撰寫自動化測試 撰寫程式 撰寫規格 撰寫自動化測試 撰寫程式
30. 功能: 擲骰子 場景: 擲一顆骰子 當按下 ”擲” 按鈕 那麼骰子會顯示 1 - 6 之間的點數 場景: 擲兩顆骰子 當改變骰子數量變成 2 時 而且按下 ”擲” 按鈕 那麼總共會出現 2 顆骰子 而且骰子會顯示 1 - 6 之間的點數 而且會出現所有骰子點數的加總
31. Gherkin 醃黃瓜
32. Gherkin • Feature • Scenario • Given, When, Then, And, But • Reference • 功能 • 場景 • 假如、當、那麼、而且、但是 • 所有中文語法
33. 一個可以讓工程師、PM、QA 等等角 色一同探索、討論軟體的規格，並且 以所有人都可以理解的語言撰寫規 格。
34. 撰寫規格 產生空的測試步驟 填入實際的測試步驟 執行 cucumber 撰寫規格 撰寫自動化測試
36. test step 1 test step 2 test step 3 test step 4 test step 5
38. Gherkin Gherkin is plain-text English (or one of 60+ other languages) with a little extra structure.
39. 用製作骰子網站來體驗 BDD 吧 https://github.com/yurenju/dice
40. 步驟 • Setup project • Write spec • Setup test environment • Write test • Implement dice website
41. • npm run dev • npm test http://localhost:3000/
42. 步驟 • Setup project • Write spec • Setup test environment • Write test • Implement dice website
43. source
44. npm test
46. 步驟 • Setup project • Write spec • Setup test environment • Write test • Implement dice website
47. Selenium Browsers Website
48. var webdriver = require('selenium-webdriver'), var driver = new webdriver.Builder() .forBrowser('firefox') .build(); driver.get('http://www.google.com/ncr'); driver.findElement(By.name('q')).sendKeys('webdriver'); driver.findElement(By.name('btnG')).click(); driver.wait(until.titleIs('webdriver - Google Search'), 1000); driver.quit(); selenium-webdriver https://seleniumhq.github.io/selenium/docs/api/javascript/index.html
49. Nightwatch.js
50. • world.js ◦ 每個情境的初始設定 ◦ 把 browser 初始設定放在這 • hook.js ◦ 設定每個情境 before / after 的操作 ◦ 把打開網站寫在 before() ◦ 把關閉瀏覽器寫在 after() • dice.js ◦ 空的測試步驟
51. features/support/world.js
52. features/support/hooks.js
53. features/step_definitions/dice.js
54. 步驟 • Setup project • Write spec • Setup test environment • Write test • Implement dice website
58. By module doc
60. test step 1 test step 2 test step 3 test step 4 test step 5
66. npm test
68. 步驟 • Setup project • Write spec • Setup test environment • Write test • Implement dice website
70. Step 1 • add “actions” section • add “dice-group” section • add “result” section
71. Step 2 • Write JavaScript ◦ declare DOM element ◦ declare mapping for dice (unicode mapping) ◦ declare function for throw dice ◦ bind click event and give an initial state
72. npm test
74. 撰寫規格 撰寫自動化測試 撰寫程式 撰寫規格 撰寫自動化測試 撰寫程式
75. 撰寫規格 撰寫自動化測試 撰寫程式 避免 較多
77. BDD wikipedia 上的第二段 BDD的重點是通過與利益相關者的討論取得對預期的軟體行為的 清醒認識。它通過用自然語言書寫非程式設計師可讀的測試用例擴 展了測試驅動開發方法。行為驅動開發人員使用混合了領域中統一 的語言的母語語言來描述他們的代碼的目的。這讓開發者得以把精 力集中在代碼應該怎麼寫，而不是技術細節上，而且也最大程度的 減少了將代碼編寫者的技術語言與商業客戶、用戶、利益相關者、 專案管理者等的領域語言之間來回翻譯的代價。
78. 使用在勞基法函式庫前期討論 • 所有的參與者可以一起討論 ◦ 不需要技術背景 • 在還沒撰寫程式前可以進行討論，確認測試案例的正確性 ◦ 減低成本 • 討論的時候甚至不需要 github ◦ 用協作文件工具如 hackmd, dropbox paper, google docs 進行協同討論
79. 勞基法函式庫 https://hackmd.io/c/SJES19Fy-/ github commits, 黑客松成果報告
80. 我的專案應該採用 BDD 嗎？
81. Bonus https://github.com/yurenju/laborrights/compare/bugfix-demo?expand=1