採用 Testing JavaScript with Kent C. Dodds 課程做為快速入門教材，採用 Create React App 內建的 ESLint 跟 PropTypes 做 static analysis，採用 Create React App 內建的 Jest 做 unit test 跟 integration test，採用 Cypress 做開發工具跟 end to end test，採用課程附件的 worksheet 決定測試對象
前陣子公司產品前端重寫完，想說整個過程蠻小心的，應該不會有太多 bug，結果被 QA 同事一測... 😅 總之，接下來除了 debug 之外，還有一整個功能區塊的操作邏輯要大改。
先前開發時已經竭盡所能地謹慎，結果卻是 bug 叢生，於是不知所措的菜鳥又哭著（誇飾法）跑去跟 ddio 求救～～～原本以為我需要設計更好的架構、更乾淨的封裝來避免產生 bug，結果發現，該做的不是繼續在實做細節上鑽牛角尖，而是該面對先前因為覺得煩而從沒做過的那件事：寫、測、試！
反正程式 deploy 前，一定有個倒楣鬼要去測產品，然後每次程式更新，一模一樣的操作就又要重做一遍。橫豎都要測，何不乾脆讓電腦代勞呢？你ごん對毋對？ 😇
去年 10 月左右，看到 egghead 電子報介紹 Testing JavaScript with Kent C. Dodds 這個同屬 egghead 家族的課程，當時課程還沒上架但有早鳥 40% off 優惠，剛好也工作了幾個月有存點錢，就趁著打折買下去了。現在覺得有買到實在非常幸運，這正是我需要的那根浮木啊！總之，跟 PM 要了一週的時間上課，上完以後覺得像是撿到槍，手超癢超想掃射的 😂
課程筆記
選擇此教材的依據
- open source 社群口碑（EggHead family、React family）
JS 測試聖杯的用處
- 第一層 static analysis 用來避免 type error 這類的低級錯誤
- 第二層 unit test 用來避免函式回傳結果算錯
- 第三層 integration test 用來避免 dom 被 render 錯
- 第四層 end to end test 用來節省 QA 的工時
實務界見解
- 第一層有人會用 TypeScript 解決，不過 TS 寫起來真的超煩的喇
- 第二層的特性是好寫、effort 小但效益大，用過都說讚（？
- 第三層其實常常被跳過，反正頭尾有對，中間就 www
- 第四層是最多人真的做的，不過只做這層就變成傳說中的蕈狀雲 XD
研究結論
- 第一層：教材用 Flow，但教材的作者最近從 Flow 跳槽到 TS 了，所以我決定先用 create-react-app 內建的陽春工具 propTypes，一邊觀望後續發展 😆
- 第二層：如果有容易算錯結果的 pure functions 就還蠻需要的，但我這邊好像沒什麼這種 function ... 😓
- 第三層：課程海報鼓勵多數測試寫 integration，可能因為現代的 single page app 裡面吃重的功能通常都是多個 unit 連動的結果 🤔
- 第四層：不管有沒有要寫都會先導入 Cypress，當開發工具用 😂
分章節詳細筆記
制訂測試策略
理想上，幾個關鍵的產品功能都該做滿四層測試，但現實上，一來我從沒寫過測試要花點時間上手，二來產品有盡快 deliver 的時間壓力，因此勢必要有所取捨。
那該怎麼取捨呢？由於我買的是課程的 pro 等級，有附一張標題叫做「What Should I Test?」的 worksheet，按照順序回答問題就可以決定優先寫測試的地方了 🎉
總之，目前預計的作法是：
- 同一時間內，只挑一個最 critical 的功能來寫測試，其他功能如果要修改就按照原本沒測試的時候的寫法去改。
- 寫測試的時候，優先寫原本就一定會人工操作的部分，也就是 end to end（這同時可以節省開發期間手動更新 state 的時間），至於 integration test 跟 unit test 就挑最常出 bug 的部分來寫。
- 如果測試沒完全寫完時需要 deliver，就在通過 end to end 的條件下 deliver 出去，然後再回來繼續補寫 unit 跟 integration。
- 等測試寫到自己覺得足夠有信心的時候，不用等覆蓋率鋪滿，就換去寫下一個 critical 功能的測試。
課程有附另一張標題叫做「How to Win at JavaScirpt Testing」的海報，裡面有幾句座右銘，身為菜鳥覺得蠻受用的，分別是：
- 測試不用寫太多，要也盡量寫 integration
- 測試很重要但也很容易做過頭，要找到平衡點
- 不要什麼都 TDD
- 不要 mock 太多東西
- 不要追求 100% 的覆蓋率
結語
這週最主要的感想就是 Testing JavaScript with Kent C. Dodds 這套課程實在太受用了，精簡沒廢話直達重點，上課體驗好、裡面的知識又新，現在雖然沒有早鳥折扣了，但台灣區有 50% 優惠，10 人以上還有團購優惠，非常推薦家有菜鳥的公司購買 😆
還有感謝 ddio 😊 感謝室友 🥰
沒有留言:
張貼留言