<style> .reveal * { text-align: left; } * { font-size: 32px; } </style> # Live Code coding dojo --- ## TDD (Test Driven Development) 1. 紅燈：先寫失敗的測試案例。 2. 綠燈：快速實作功能讓測試案例通過。 3. 重構：在不改變功能的前提下，修改程式碼。改善可維護性。 搭～晚安（Ｘ） --- ## TDD 不（只）是什麼 - 不是 production code 的檢驗 - 不是測試方法 - 不是單元測試 - 不是 Bottom Up --- ## TDD 是什麼？ - 是一種幫助開發的方式 - Input - process - ouput 精神的展現 --- ## TDD 精神展現的好處 - 透過測試想清楚 input, output e.g. 實際的 test case 與 Gherkin Style 的描述 - Outside-In 從可以直接驗證的 test case 一路將依賴往系統邊界推至系統外的依賴資源。 - 增量式開發：每一次完成的 input / output 都可以明確功能上進展 --- ## 其他好處 - Over-engineering （過度設計） - API feedback （改善API的設計與可用性） - Logic errors （想的跟寫的不一樣，寫的跟需求不一樣） - Documentation （寫跟維護文件是痛苦的） - Feeling overwhelmed （找不到切入點） - Separate interface from implementation thinking （抽象設計） - Agreement （確保已修正問題的證據） - Anxiety （改東壞西的擔心受怕） --- ## 現實中的 TDD 想直接在工作裡練習 TDD，但卻不知道怎麼起手 - 規格不清 - 難以定義起手的案例 - 在一堆 legacy 中看不到壞味道 - 書上講的重構方法與實務脫節 --- ## Coding Dojo - Kata - 從 0 開始 kata - 重構： - 純練習重構 - 刻意練習不同的 pattern - 現實專案 - 從現實商業邏輯平行出來實作練習 e.g. 購物車、驗證、表單 - 功能封裝 e.g. 將邏輯抽出來復用 --- ## Time to live code: Siebala - 需求分析 - 實作規劃 - 實作（講一些上課聽到的原則） --- ## 需求分析 - 素材 - Glossory: Naming Issue - Test Cases: 驗收、規格釐清 - Input-Process-Output - 預計 TODO - 初步架構 - 顆粒度更細的 test cases --- ## 需求分析 insight - 商業邏輯命名 - Roll ? Round ? Game ? - Dices vs Die - (X) 一開始就想要設計出所有的 class 跟 method - (O) test driven 由測試情境來驅動產生 class, function api - (X) 照著 TODO 開始做 - (O) outside-in 由外而內 - (X) 有哪些 test case 就直接開始 - (O) 小步快跑 --- ## 注意事項 - 不太熟悉 typescript 使用 ˊ ˇ ˋ - 有大量 webstorm 快捷鍵操作 --- ## Siebala --- ## React TDD ? --- ### 需求分析 Todo List - 使用者看到所有的 todo - 使用者可以點擊完成 todo - 使用者可以再點擊取消完成 todo - 使用者可以新增 todo --- ## Insight - 跳脫單元測試 - DOM > Logic > Style --- ### Input / Output - input - type in todo - fetch todo data - output - list todo item - submit show todo ---