iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 93 瀏覽

鐵人賽 Modern Web DAY 25

要不要 Vue 點酷酷的元件？系列第 25 篇

技術 D25 - 固執的滑動條：單元測試

第一步來新增測試檔案。 src\components\slider-stubborn\slider-stubborn.spec.ts import { moun...

鱈魚 ‧ 2024-10-08 ‧團隊鐵齒不信寫不完

1 Like 0 留言 184 瀏覽

鐵人賽 Modern Web DAY 20

要不要 Vue 點酷酷的元件？系列第 20 篇

技術 D20 - 物理包裝器：單元測試

開始測試前，讓我們在元件中新增一些對外屬性，方便進行測試吧。( ´ ▽ ` )ﾉ src\components\wrapper-physics\wrapper-...

鱈魚 ‧ 2024-10-03 ‧團隊鐵齒不信寫不完

2 Like 0 留言 1046 瀏覽

鐵人賽 Modern Web DAY 15

要不要 Vue 點酷酷的元件？系列第 15 篇

技術 D15 - 拉炮：單元測試

開始測試前，讓我們在 defineExpose 追加資料，方便進行測試。 src\components\util-party-popper\util-party...

鱈魚 ‧ 2024-09-28 ‧團隊鐵齒不信寫不完

1 Like 0 留言 109 瀏覽

鐵人賽 Modern Web DAY 25

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 25 篇

技術 Day 25: 使用 Vitest 測試異步行為與 API 請求邏輯

簡介在現代 Vue.js 應用程序開發中，處理異步操作和 API 請求是常見且關鍵的任務。本文將深入探討如何使用 Vitest 來全面測試這些異步行為和 A...

MichaelHo ‧ 2024-10-09

1 Like 0 留言 217 瀏覽

鐵人賽 Modern Web DAY 10

要不要 Vue 點酷酷的元件？系列第 10 篇

技術 D10 - 逐字轉場：單元測試

開始單元測試前，先讓我們設定一下測試範圍，避免執行到 e2e 測試的部分。 vitest 可以和 vite 共用設定檔，所以我們在 vite 新增設定即可。 v...

鱈魚 ‧ 2024-09-23 ‧團隊鐵齒不信寫不完

1 Like 1 留言 224 瀏覽

鐵人賽 Modern Web DAY 6

要不要 Vue 點酷酷的元件？系列第 6 篇

技術 D06 - 調皮的按鈕：更多範例

元件測試完成後，讓我們新增更多範例吧！( ‧ω‧)ノ╰(‧ω‧ ) 新增範例與其使用大量文字描述參數用途，不如提供情境完整的範例，可以讓使用者有更具體的理解。...

鱈魚 ‧ 2024-09-19 ‧團隊鐵齒不信寫不完

1 Like 0 留言 226 瀏覽

鐵人賽 Modern Web DAY 5

要不要 Vue 點酷酷的元件？系列第 5 篇

技術 D05 - 調皮的按鈕：單元測試

現在讓我們對元件進行單元測試吧單元測試的原則為「把待測物當成黑盒子，專注於測試公開介面」，也就是說我們只會針對元件的 template、props、event...

鱈魚 ‧ 2024-09-18 ‧團隊鐵齒不信寫不完

4 Like 3 留言 557 瀏覽

鐵人賽 Modern Web DAY 1

要不要 Vue 點酷酷的元件？系列第 1 篇

技術 D01 - 行前須知

緣起源自公司內部練習專案，靈感來自於以前看到一個名為「最糟糕音量控制設計大賽」的有趣比賽。簡單來說就是設計奇奇怪怪的元件。別看這些元件好像很沒用，實作起來...

鱈魚 ‧ 2024-09-14 ‧團隊鐵齒不信寫不完

2 Like 0 留言 1044 瀏覽

技術闡述單元測試、元件測試，並學習在自己的 Vue3 專案中加入 Vitest！

文章出處網站建置不是件簡單的事，我們都知道網站做好之後，有好多細節需要兼顧，所以許多公司花了大量的時間與金錢，耗用人力對維護中的網站進行不斷的、重複的人...

Wayne ‧ 2023-02-09

1 Like 3 留言 1455 瀏覽

鐵人賽 Modern Web

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 35 篇

技術【雜談ノ章】那些沒說到的內容、完賽感言、TOC 與參考資料們

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-20

1 Like 0 留言 1770 瀏覽

鐵人賽 Modern Web

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 34 篇

技術【進階ノ章】寫測試的最佳實踐（Testing Best Practice）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-19

1 Like 0 留言 6115 瀏覽

鐵人賽 Modern Web

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 33 篇

技術【進階ノ章】覆蓋率（Coverage）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-18

0 Like 0 留言 1923 瀏覽

鐵人賽 Modern Web

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 32 篇

技術【進階ノ章】Vitest UI

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-17

1 Like 0 留言 2125 瀏覽

鐵人賽 Modern Web

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 31 篇

技術【語法ノ章】Vue Ecosystem 篇：Pinia 測試

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-16

0 Like 0 留言 1900 瀏覽

鐵人賽 Modern Web DAY 30

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 30 篇

技術【語法ノ章】Vue Ecosystem 篇：Vue Router 測試

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-15

0 Like 0 留言 2199 瀏覽

鐵人賽 Modern Web DAY 30

分手前端菜雞之旅@非洲30天系列第 30 篇

技術測試自己寫，QA不用謝。Vue3 測試入門-D30

測試自己寫，QA不用謝單壓欸，我好棒。為什麼要測試測試可以幫我們衡量程式的質量、是不是能達到設計要求，幫我們進行評估。你總不會什麼東西寫完自己不檢查就送...

Global Rachel ‧ 2022-10-15 ‧團隊還不給我加薪

1 Like 0 留言 3511 瀏覽

鐵人賽 Modern Web DAY 29

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 29 篇

技術【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Function, Globals & Modules）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-14

1 Like 0 留言 1903 瀏覽

鐵人賽 Modern Web DAY 28

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 28 篇

技術【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Date, Timer）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-13

0 Like 0 留言 1242 瀏覽

鐵人賽 Modern Web DAY 27

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 27 篇

技術【語法ノ章】測試替身（Test Double）feat. Vue Test Utils

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-12

0 Like 1 留言 2067 瀏覽

鐵人賽 Modern Web DAY 26

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 26 篇

技術【概念ノ章】測試替身（Test Double）：Dummy, Stub, Spy, Fake & Mock

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-11

0 Like 0 留言 898 瀏覽

鐵人賽 Modern Web DAY 25

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 25 篇

技術【試験ノ章】第二個測驗：容器（Wrapper）與容器方法（Wrapper methods）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-10

0 Like 0 留言 974 瀏覽

鐵人賽 Modern Web DAY 24

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 24 篇

技術【語法ノ章】元件測試：模擬 Vue APIs（slots, custom directives）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-09

0 Like 0 留言 1205 瀏覽

鐵人賽 Modern Web DAY 23

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 23 篇

技術【語法ノ章】元件測試：模擬 Vue APIs（emit, provide/inject）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-08

0 Like 0 留言 1101 瀏覽

鐵人賽 Modern Web DAY 22

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 22 篇

技術【語法ノ章】元件測試：模擬 Vue APIs（data, props）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-07

0 Like 0 留言 1355 瀏覽

鐵人賽 Modern Web DAY 21

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 21 篇

技術【語法ノ章】元件測試：容器方法（Wrapper methods）－模擬事件

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-06

0 Like 0 留言 1416 瀏覽

鐵人賽 Modern Web DAY 20

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 20 篇

技術【語法ノ章】元件測試：容器方法（Wrapper methods）－取得目標資訊

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-05

1 Like 0 留言 1675 瀏覽

鐵人賽 Modern Web DAY 19

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 19 篇

技術【語法ノ章】元件測試：容器方法（Wrapper methods）－選擇器與陷阱

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-04

0 Like 0 留言 1224 瀏覽

鐵人賽 Modern Web DAY 18

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 18 篇

技術【語法ノ章】元件測試：容器（Wrapper）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-03

0 Like 0 留言 1981 瀏覽

鐵人賽 Modern Web DAY 17

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 17 篇

技術【概念ノ章】測試工具： Vue Test Utils 與元件測試

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-02

0 Like 0 留言 1539 瀏覽

鐵人賽 Modern Web DAY 16

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 16 篇

技術【試験ノ章】第一個測驗：測試情境案例、Setup & Teardown 與 Matchers

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-01

技術 D25 - 固執的滑動條：單元測試

技術 D20 - 物理包裝器：單元測試

技術 D15 - 拉炮：單元測試

技術 Day 25: 使用 Vitest 測試異步行為與 API 請求邏輯

技術 D10 - 逐字轉場：單元測試

技術 D06 - 調皮的按鈕：更多範例

技術 D05 - 調皮的按鈕：單元測試

技術 D01 - 行前須知

技術 闡述單元測試、元件測試，並學習在自己的 Vue3 專案中加入 Vitest！

技術 【雜談ノ章】那些沒說到的內容、完賽感言、TOC 與參考資料們

技術 【進階ノ章】寫測試的最佳實踐（Testing Best Practice）

技術 【進階ノ章】覆蓋率（Coverage）

技術 【進階ノ章】Vitest UI

技術 【語法ノ章】Vue Ecosystem 篇：Pinia 測試

技術 【語法ノ章】Vue Ecosystem 篇：Vue Router 測試

技術 測試自己寫，QA不用謝。Vue3 測試入門-D30

技術 【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Function, Globals & Modules）

技術 【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Date, Timer）

技術 【語法ノ章】測試替身（Test Double）feat. Vue Test Utils

技術 【概念ノ章】測試替身（Test Double）：Dummy, Stub, Spy, Fake & Mock

技術 【試験ノ章】第二個測驗：容器（Wrapper）與容器方法（Wrapper methods）

技術 【語法ノ章】元件測試：模擬 Vue APIs（slots, custom directives）

技術 【語法ノ章】元件測試：模擬 Vue APIs（emit, provide/inject）

技術 【語法ノ章】元件測試：模擬 Vue APIs（data, props）

技術 【語法ノ章】元件測試：容器方法（Wrapper methods）－模擬事件

技術 【語法ノ章】元件測試：容器方法（Wrapper methods）－取得目標資訊

技術 【語法ノ章】元件測試：容器方法（Wrapper methods）－選擇器與陷阱

技術 【語法ノ章】元件測試：容器（Wrapper）

技術 【概念ノ章】測試工具： Vue Test Utils 與元件測試

技術 【試験ノ章】第一個測驗：測試情境案例、Setup & Teardown 與 Matchers

標記使用者

技術闡述單元測試、元件測試，並學習在自己的 Vue3 專案中加入 Vitest！

技術【雜談ノ章】那些沒說到的內容、完賽感言、TOC 與參考資料們

技術【進階ノ章】寫測試的最佳實踐（Testing Best Practice）

技術【進階ノ章】覆蓋率（Coverage）

技術【進階ノ章】Vitest UI

技術【語法ノ章】Vue Ecosystem 篇：Pinia 測試

技術【語法ノ章】Vue Ecosystem 篇：Vue Router 測試

技術測試自己寫，QA不用謝。Vue3 測試入門-D30

技術【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Function, Globals & Modules）

技術【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Date, Timer）

技術【語法ノ章】測試替身（Test Double）feat. Vue Test Utils

技術【概念ノ章】測試替身（Test Double）：Dummy, Stub, Spy, Fake & Mock

技術【試験ノ章】第二個測驗：容器（Wrapper）與容器方法（Wrapper methods）

技術【語法ノ章】元件測試：模擬 Vue APIs（slots, custom directives）

技術【語法ノ章】元件測試：模擬 Vue APIs（emit, provide/inject）

技術【語法ノ章】元件測試：模擬 Vue APIs（data, props）

技術【語法ノ章】元件測試：容器方法（Wrapper methods）－模擬事件

技術【語法ノ章】元件測試：容器方法（Wrapper methods）－取得目標資訊

技術【語法ノ章】元件測試：容器方法（Wrapper methods）－選擇器與陷阱

技術【語法ノ章】元件測試：容器（Wrapper）

技術【概念ノ章】測試工具： Vue Test Utils 與元件測試

技術【試験ノ章】第一個測驗：測試情境案例、Setup & Teardown 與 Matchers