Tweet
Tweet

Slide 1

Slide 1 text

Cucumber.js 實踐 BDD 經驗分享 Yuren Ju 小黃瓜

Slide 2

Slide 2 text

https://creativecommons.org/licenses/by/4.0/

Slide 3

Slide 3 text

Yuren Ju ● g0v contributor ○ 勞基法修法計算機 ○ 勞基法函式庫 ○ 勞工權益網站 ○ 割闌尾 ○ Bifrost 物資管理系統 ● COSCUP 議程組長、紀錄組長 ● JavaScript Developer

Slide 4

Slide 4 text

我想開發勞基法函式庫！ 讓往後跟勞基法相關的專案，都可以直接使用函式庫來完成跟法律相關的部分

Slide 5

Slide 5 text

如何開始？ ● 要找人幫忙，我有認識一些熟悉勞基法的朋友！ ● 但... 函式庫 (library) 跟一般軟體不同，一般使用者不容易了解 ● 或許我們先作一版有介面的軟體，再讓這些朋友幫忙找出問題點？

Slide 6

Slide 6 text

「勞工權益」網站

Slide 7

Slide 7 text

缺點 ● 有介面的軟體引用了勞基法函 式庫，等於說是間接關係 ● 有許多功能沒辦法透過軟體表 達 ● 發現嚴重錯誤後，函式庫的 API 要跟著修改 ● 改完之後裡面的邏輯可能會像 義大利麵一樣。 Mason eating spaghetti, cc-nc-nd

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

工程師與其他專業領 域的人，有沒有辦法 在更早的時候就開始 溝通？ cc-by-nc https://flic.kr/p/36iL52

Slide 10

Slide 10 text

BDD Behavior-driven development

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

來做個擲骰子的網站吧

Slide 13

Slide 13 text

需要什麼功能？ 擲骰子？

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

功能: 擲骰子 場景: 擲一顆骰子 當按下 ”擲” 按鈕 那麼骰子會顯示 1 - 6 之間的點數 場景: 擲兩顆骰子 當改變骰子數量變成 2 時 而且按下 ”擲” 按鈕 那麼總共會出現 2 顆骰子 而且骰子會顯示 1 - 6 之間的點數 而且會出現所有骰子點數的加總

Slide 16

Slide 16 text

規格 成品 ?

Slide 17

Slide 17 text

自動化測試 vue-sample> npm test

Slide 18

Slide 18 text

撰寫自動化測試 撰寫程式 撰寫自動化測試 撰寫程式

Slide 19

Slide 19 text

撰寫自動化測試 撰寫程式 TDD, Test-Driven Development

Slide 20

Slide 20 text

Write test before implementation

Slide 21

Slide 21 text

Write test before implementation

Slide 22

Slide 22 text

Write test before implementation Method chaining

Slide 23

Slide 23 text

TDD 優點 ● 提早了解如何程式會如何被使用 ● 釐清模組的介面 ● 每次循環後可以基於現有的測試重構 ● 工程師之間更容易的在還沒寫程式之前就可以討論如何定義介面 Top Five Benefits of Test Driven Development (TDD)

Slide 24

Slide 24 text

撰寫自動化測試 撰寫程式 自動化測試會作為撰寫程式的「輸入」 撰寫程式時可以藉由跑測試來了解目前現有程式通過了多少測試

Slide 25

Slide 25 text

撰寫規格 撰寫自動化測試 撰寫程式 規格卻沒辦法成為自動化測試的「輸入」 需要經由人閱讀規格轉換成自動化測試

Slide 26

Slide 26 text

撰寫規格 撰寫自動化測試 撰寫程式

Slide 27

Slide 27 text

BDD Behavior-driven development

Slide 28

Slide 28 text

BDD - Behavior-driven development 兩大重點： 1. 用通用語言敘述行為作為規格 2. 用 (1) 產生的規格作為自動化測試的基礎 http://www.infoq.com/cn/news/2015/02/introducing-bdd

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

功能: 擲骰子 場景: 擲一顆骰子 當按下 ”擲” 按鈕 那麼骰子會顯示 1 - 6 之間的點數 場景: 擲兩顆骰子 當改變骰子數量變成 2 時 而且按下 ”擲” 按鈕 那麼總共會出現 2 顆骰子 而且骰子會顯示 1 - 6 之間的點數 而且會出現所有骰子點數的加總

Slide 31

Slide 31 text

Gherkin 醃黃瓜

Slide 32

Slide 32 text

Gherkin ● Feature ● Scenario ● Given, When, Then, And, But ● Reference ● 功能 ● 場景 ● 假如、當、那麼、而且、但是 ● 所有中文語法

Slide 33

Slide 33 text

一個可以讓工程師、PM、QA 等等角 色一同探索、討論軟體的規格，並且 以所有人都可以理解的語言撰寫規 格。

Slide 34

Slide 34 text

撰寫規格 產生空的測試步驟 填入實際的測試步驟 執行 cucumber 撰寫規格 撰寫自動化測試

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

test step 1 test step 2 test step 3 test step 4 test step 5

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Gherkin Gherkin is plain-text English (or one of 60+ other languages) with a little extra structure.

Slide 39

Slide 39 text

用製作骰子網站來體驗 BDD 吧 https://github.com/yurenju/dice

Slide 40

Slide 40 text

步驟 ● Setup project ● Write spec ● Setup test environment ● Write test ● Implement dice website

Slide 41

Slide 41 text

● npm run dev ● npm test http://localhost:3000/

Slide 42

Slide 42 text

步驟 ● Setup project ● Write spec ● Setup test environment ● Write test ● Implement dice website

Slide 43

Slide 43 text

source

Slide 44

Slide 44 text

npm test

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

步驟 ● Setup project ● Write spec ● Setup test environment ● Write test ● Implement dice website

Slide 47

Slide 47 text

Selenium Browsers Website

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Nightwatch.js

Slide 50

Slide 50 text

● world.js ○ 每個情境的初始設定 ○ 把 browser 初始設定放在這 ● hook.js ○ 設定每個情境 before / after 的操作 ○ 把打開網站寫在 before() ○ 把關閉瀏覽器寫在 after() ● dice.js ○ 空的測試步驟

Slide 51

Slide 51 text

features/support/world.js

Slide 52

Slide 52 text

features/support/hooks.js

Slide 53

Slide 53 text

features/step_definitions/dice.js

Slide 54

Slide 54 text

步驟 ● Setup project ● Write spec ● Setup test environment ● Write test ● Implement dice website

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

By module doc

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

test step 1 test step 2 test step 3 test step 4 test step 5

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

npm test

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

步驟 ● Setup project ● Write spec ● Setup test environment ● Write test ● Implement dice website

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

Step 1 ● add “actions” section ● add “dice-group” section ● add “result” section

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

npm test

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

撰寫規格 撰寫自動化測試 撰寫程式 撰寫規格 撰寫自動化測試 撰寫程式

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

BDD wikipedia 上的第二段 BDD的重點是通過與利益相關者的討論取得對預期的軟體行為的 清醒認識。它通過用自然語言書寫非程式設計師可讀的測試用例擴 展了測試驅動開發方法。行為驅動開發人員使用混合了領域中統一 的語言的母語語言來描述他們的代碼的目的。這讓開發者得以把精 力集中在代碼應該怎麼寫，而不是技術細節上，而且也最大程度的 減少了將代碼編寫者的技術語言與商業客戶、用戶、利益相關者、 專案管理者等的領域語言之間來回翻譯的代價。

Slide 78

Slide 78 text

使用在勞基法函式庫前期討論 ● 所有的參與者可以一起討論 ○ 不需要技術背景 ● 在還沒撰寫程式前可以進行討論，確認測試案例的正確性 ○ 減低成本 ● 討論的時候甚至不需要 github ○ 用協作文件工具如 hackmd, dropbox paper, google docs 進行協同討論

Slide 79

Slide 79 text

勞基法函式庫 https://hackmd.io/c/SJES19Fy-/ github commits, 黑客松成果報告

Slide 80

Slide 80 text

我的專案應該採用 BDD 嗎？

Slide 81

Slide 81 text

Bonus https://github.com/yurenju/laborrights/compare/bugfix-demo?expand=1