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已經內建，可以自行決定要使用哪一種套件，...
2022年1月23日 星期日

webpack 常用 plugin 介紹 - HtmlWebpackPlugin 自動產生 Html

›
根據「 [Vue.js] 如何建立 Vue3 + webpack5 專案範例 」的內容，封裝時已經先建立目錄 dist/ ，新增 index.html ，預先將 main.js 加到 script 中。 接著，以下要介紹 HtmlWebpackPlugin ，這個 we...
2021年12月15日 星期三

取代 window resize 事件? 如何使用 ResizeObserver 偵測元素變化

›
ResizeObserver 用來監控元素大小的變動，與 window 的 resize 事件(如下)的用途相似，通常用在監控瀏覽器視窗大小的變動。ResizeObserver 使用範圍更廣，可以綁在 HTMLElement 上。 window.addEventListene...
2021年10月1日 星期五

如何將 Github 專案部屬到 Heroku (Creating a 'Deploy to Heroku' Button)

›
先前「 [django] 將Django專案部署到Heroku 」提到如何一步一步建立 Django 專案，並部屬到 Heroku。若是Github現有的專案已經滿足 Heroku 基本所需的設定，可以透過網頁操作，將現有專案快速地複製到 Heroku 上。 操作說明使用 he...
2021年8月17日 星期二

Github Actions 自動 Jekyll 專案部屬 Github Pages

›
自從完成「 Travis CI 自動 Jekyll 專案部屬 Github Pages 完整範例 」很久沒有更新 Github Pages，近期上傳時卻發現CI執行失敗，並不是腳本有問題或編譯過程有錯誤，而是request被拒，所以即使換了Github Token依...
2021年8月15日 星期日

CloudCannon 支援 Jekyll 網站後台管理CMS系統

›
With CloudCannon as your Jekyll CMS, you will have all the tools you need to create amazing static websites. CloudCannon 是線上網站後台管理CMS...
2021年8月14日 星期六

Html 轉 Figma 的小工具 Figma Plugin匯入現有網站

›
Figma 如何匯入現有網站，可以使用  Figma to HTML, CSS, React & more! 快速解決！ 可以先安裝 google chrome 的擴充功能、Figma的擴充功能，再到網站使用 google chrome 的擴充功能匯出 Json，並到 ...
1 則留言: