測試 — $mol

測試

$mol 的視圖是它自身狀態的函式，這也改變了測試的樣子。一個用戶場景就寫成對視圖自己方法的呼叫：設定草稿、執行動作、讀取用戶會看到的東西。1app.draft( 'Milk' )2app.add()3$mol_assert_equal( app.item_title( 0 ), 'Milk' )沒有選擇器，沒有瀏覽器，沒有 Playwright 或 Cypress，也不用等待任何東西。同一個檔案還給你：速度。測試在 Node 裏以毫秒計地跑完；一千個大約一分鐘。node my/hello/-/node.test.js 跑的是某個模組的那些測試。零設定。元件旁邊的 hello.test.ts 會被建構器收錄，編譯進 -/node.test.js。用 mam_build 做持續整合時會執行它，測試失敗就讓建置失敗。透過上下文替換服務。每個測試都拿到自己的 $，元件經由 this.$.X 取到的一切，都可以透過往那個 $ 上指派一個測試替身來換掉。這正是要寫 this.$.$mol_fetch 而不是 $mol_fetch 的理由：前者可替換，後者不可。被模擬的時間。經由上下文建立的計時器不會自己走動；$mol_after_mock_warp() 會把排隊的東西跑掉。需要時有真實的 DOM。 Node 的打包結果自帶 jsdom，所以 dom_node() 和 querySelectorAll 在同一個測試檔案裏就能用。

用視圖方法走一遍場景

拿

食譜裏的待辦清單來說：一個 draft? 字串、一個 items 清單、一個 add 動作和一個 delete 動作。它的測試住在 my/todo/todo.test.ts：1namespace $ {2 $mol_test({3 4 'add an item and delete it'( $ ) {5 const app = $my_todo.make({ $ })6 7 app.draft( 'Milk' )8 app.add()9 $mol_assert_equal( app.items().length, 1 )10 $mol_assert_equal( app.item_title( 0 ), 'Milk' )11 $mol_assert_equal( app.draft(), '' )12 13 app.delete( 0 )14 $mol_assert_like( app.item_rows(), [] )15 },16 17 'blank draft adds nothing'( $ ) {18 const app = $my_todo.make({ $ })19 20 app.draft( ' ' )21 app.add()22 $mol_assert_like( app.items(), [] )23 },24 25 })26}有幾點值得注意：在 GitHub 上編輯此頁這有幫助嗎？是否上一頁渲染下一頁部署本頁內容用視圖方法走一遍場景模擬一個服務時間穿過 DOM Node 測試覆蓋不到甚麼實用提示下一步