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 會更適合。 完整程式碼上...
2022年6月25日 星期六

【升版指南】Vue3 非兼容的特性 v-model 跟 Vue2 完全不一樣

›
vue2 v-model 的使用方式在這篇「 [Vue.js] 如何在component自訂v-model 」介紹，簡單說就是結合 v-model 其實綁定了名為 value 的 props 和 input 的 emit 事件，因此所謂的 v-model 就是一個父子元...
2022年6月8日 星期三

Github Action 自動部署 github-pages

›
Github pages 適合展示靜態頁面，只要在 github 建立 gh-pages 分支，可依據用戶名稱和repo名稱來開啟頁面。 https://[USER_NAME].github.io/[REPO_NAME]/ 以這個專案為例 https://gith...
2022年5月28日 星期六

Vue3+jest 測試 composable 範例

›
Vue3 的 composable 乍看下和 mixin 用途很類似，可以提供各個元件共用程式碼。但與 mixin 相比，composable 主要有三個優勢： 第一，元件可以很明確的區分使用的 composable 來源，當使用的 mixin 一多時，追朔來源相對困難，無法一眼...
2022年3月5日 星期六

測試套件 Jest mock 基礎概念及 spyOn, fn 範例程式

›
當測試的對象有使用其他引用(import)時，我們希望能做為控制變因，設法聚焦測試的對象。Jest是常用的js單元測試套件，我們會 mock 方法 spyOn 、 fn 來達成這個目的，Jest 安裝可以參考「[ JavaScript] 安裝Jest單元測試 」，底下說明幾種常...
2022年2月22日 星期二

Cypress+Vue 元件測試 (component testing)

›
接續「 e2e 測試工具 Cypress 安裝及介紹 」，除了用在實際開啟瀏覽器的測試，cypress也支援元件測試，需要安裝相關的套件將元件render出來。 安裝 npm install --save-dev cypress @cypress/vue @cypress...
2022年1月31日 星期一

e2e 測試工具 Cypress 安裝及介紹

›
e2e測試(End-to-End testing)是模擬使用者的行為，實際打開瀏覽器操作頁面的測試方式，因此不限於vue, react的專案，e2e的測試可以反映出頁面在不同瀏覽器的執行情形。 Cypress便是其中一個常見工具，Cypress在安裝上簡單，語法採用 mocha...
2022年1月25日 星期二

js 單元測試套件 Macha+Chai (es6 語法 Babel 設定)

›
安裝 首先安裝 mocha ( 官網 )和 chai ( 官網 ) npm install mocha chai --save-dev chai 是一種斷言庫( Assertion Library)，mocha 不像是jest已經內建，可以自行決定要使用哪一種套件，...