2024年3月28日 星期四

[Javascript] 四種併發 Promise 差異比較

›
Promise 代表非同步操作的物件，一個 Promise 可區分成三種狀態: pending - 初始狀態，可以視為處理中 fulfilled - 表示操作成功 rejected - 表示操作失敗 Promise 的併發控制就是當我們傳入多個 Promise時，藉由達...
2023年10月12日 星期四

npm 安裝不依賴 --legacy-peer-deps 解決 Conflicting Peer Dependency 錯誤

›
當執行 npm install 時，出現錯誤 Conflicting peer dependecy: XXX ，並出現提示：Fix the upstream dependecy conflict, or retry this commaned with --force or ...
2023年8月26日 星期六

[Javascript] stopPropagation 停止事件捕捉及冒泡

›
近期工作上修正一個因為冒泡(bubbling) 導致的錯誤，神奇的是 chrome 異常但 safari 正常，因此想知道兩個瀏覽器為什麼會有這樣的差異，順便整理一下 stopPropagation 的使用方法。 冒泡(bubbling) 是 Javacript 事件傳遞...
2023年4月29日 星期六

[Javascript] 潛藏 setTimeout 的陷阱

›
setTimeout 和 setInterval 常用在倒數計時或是提醒等，一些時間有關的實作，然而精準校時卻是不可能的任務，只能盡可能減少誤差。 使用方法 setTimeout setInterval 說明與範例 非同步函式(Asynchronous ...
2023年3月11日 星期六

原始碼解析 create-vue 快速建立 Vue 專案

›
Vue 可以透過下面的指令，接著詢問一系列的問題，按照設定快速初始一個專案。(目前版本為 3.6.1) npm init vue@latest 實際是執行這個 create-vue ，想透過原始碼的解析，來了解怎麼樣做一個類似的功能，這個專案架構是如何、如何達成建立專案的...
2023年1月27日 星期五

[Jest+Testing Library] Vue + storybook interaction 元件測試範例

›
storybook 可以獨立建立元件，並搭配 @storybook/addon-controls 控制 props 輸入及 @storybook/addon-actions 顯示 emit 輸出的內容，當然可以透過手動開啟 GUI 來測試元件是否符合規格，storyboo...
2023年1月14日 星期六

第一個 Vue3 元件測試從 Vitest + Vue Test Utils 開始

›
延續「 mocha + webpack 的 Vue3 元件單元測試 」，既然使用 mocha 測試太卡關，這次安裝 Vitest 來試試看！ 一、安裝 先安裝 Vitest，另外 Vitest 需要使用 Node >=v14，並安裝 Vite >=v3.0....
2022年9月28日 星期三

[E2E Testing] 如何從 cypress 9 升級 10

›
使用 cypress 進行 E2e Testing，針對比較常用的部分整理從 Cypress 9 升級到 10 一些異動，最大的差別是不再支援 cypress.json ，並移除了 plugins 目錄。 安裝 cypress 10 npm install --sa...
2022年7月25日 星期一

Vue3.2 <script setup> 實作 TodoMVC

›
Vue3.2開始將 <script setup> 移除experimental status，和 setup() 區別在有許多 option API 有了替代方案， props , emit 也可以寫在 setup `，variable 或 function 也...
2022年7月24日 星期日

mocha + webpack 的 Vue3 元件單元測試

›
先說結論，我認為 不適合 用 mocha 進行 vue3 單元測試( @vue/test-utils )，反覆查了很久的資料，相關的套件支援度不足等有重重的障礙，根據 @vue/test-utils 目前提供的測試範例，選擇 Vitest 會更適合。 完整程式碼上...