Taste Cucumber.js - JavaScript BDD Framework

Taste Cucumber.js - JavaScript BDD Framework

A357616c0a9197fccbaf5aceb92d94f3?s=128

Yuren Ju

July 21, 2017
Tweet

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
  8. None
  9. 工程師與其他專業領 域的人,有沒有辦法 在更早的時候就開始 溝通? cc-by-nc https://flic.kr/p/36iL52

  10. BDD Behavior-driven development

  11. 流程 撰寫規格 撰寫自動化測試 撰寫程式

  12. 來做個擲骰子的網站吧

  13. 需要什麼功能? 擲骰子?

  14. None
  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 撰寫規格 撰寫自動化測試

  35. None
  36. test step 1 test step 2 test step 3 test

    step 4 test step 5
  37. None
  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

  45. None
  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
  55. None
  56. None
  57. None
  58. By module doc

  59. None
  60. test step 1 test step 2 test step 3 test

    step 4 test step 5
  61. None
  62. None
  63. None
  64. None
  65. None
  66. npm test

  67. None
  68. 步驟 • Setup project • Write spec • Setup test

    environment • Write test • Implement dice website
  69. None
  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

  73. None
  74. 撰寫規格 撰寫自動化測試 撰寫程式 撰寫規格 撰寫自動化測試 撰寫程式

  75. 撰寫規格 撰寫自動化測試 撰寫程式 避免 較多

  76. None
  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