0%

vitest-logo

本文序

在瞭解測試價值與加入的時機後,接下來的幾天將會從測試脈絡開始講起,為什麼測試脈絡重要呢?因為我認為測試脈絡與會測試程式碼語法是相輔相成且都不可缺失的部分。

若懂得測試的脈絡但不懂得測試程式碼語法;則會空有理想;然而只懂得測試程式碼語法卻不懂撰寫測試的脈絡,則會寫出不明所以的測試。唯有兩者都掌握了才有辦法寫出既合理又有效的測試,且後續遇到需求變更產品程式碼時,對於測試程式碼的改動會更容易視為理所當然與得心應手。

而有關於測試脈絡的部分接下來會陸續講到:

  1. 測試類型:認識不同測試類型與測試類型的目標
  2. 測試工具:根據需要測試的內容選出合適的工具
  3. 測試案例:根據測試目標瞭解要如何撰寫案例
閱讀全文 »

vitest-logo

本文序

上篇提到了測試價值的部分,瞭解了導入測試能夠帶來什麼樣的價值。然而,若我們想發揮測試的最大效用,我們需要試著在合適的時機來加入測試。

本文接下來會分成兩種探討的方向來說明我心目中加入測試的時機:

  • 專案性質
  • 產品階段
閱讀全文 »

vitest-logo

本文序

開發的過程中,有時候工具原先的設定並不符合當下開發的需求,因此本章節將來看看要如何調整 Vitest 設定,段落的部分將分為:

  • Vitest Config 設定方式
  • 瀏覽常見的 Vitest Config Option
閱讀全文 »

vitest-logo

本文序

在進入測試的正文前,本文將帶著讀者一起來安裝系列文專用的測試專案,這份專案內含後續文章會介紹到的測試程式碼以及各元件基本的視覺操作介面,接下來的幾天就可以一邊看著文章一邊操作,同時如果想修改測試程式碼來觀看差異也非常方便。

本文章提供兩種安裝指南供讀者閱讀,可視讀者的需求來選擇觀看唷:

  • 若讀者本身電腦已安裝並熟悉 NVMGit 操作,請參考【快速通道】指南。
  • 若尚未接觸過 NVMGit 的讀者,想一步一步操作,請參考【詳細安裝說明】指南。
閱讀全文 »

vitest-logo

進入公司後已有一段時間,交手過林林總總的專案,除了新專案的開發之外,免不了會碰到既有服務的維護需求。而這些服務當中,年紀輕則有三、四年歷史,更不用提那些年邁的部分了;這些程式碼本身是沒什麼問題,但剛進入公司的我年少輕狂,天真的以為改動程式碼是件簡單的事情,結果一不小心就落入「依賴」的陷阱之中。

過了一年後,我雖然從依賴的泥沼中(?)爬了出來,但回想身在其中時的過程難免感嘆,一邊思考要怎麼樣才能主動防止這種事情發生呢?與此同時,我正好專注於如何整潔(clean)程式碼、重構(refactor)等等心法與技術的應用,因此迫切的需要一樣東西來保證更動的地方沒有出錯,碰巧從相關的資訊文章中看到了「測試」這個詞彙,稍微搜尋了一下,令人嘆為觀止,剛好它填補了我需要的一切。

因此,我迫不及待地踏上了研究測試的道路,深刻的記得當時我最早是看到了保哥分享不同測試之間差異的文章,慢慢瞭解到原來測試還能面向不同的需要,近而拆分成不同的測試類型,甚至根據測試類型搭配的工具也可能有所不同。

然而,研究的過程不如我一開始所想的那樣簡單,我慢慢地陷入了另一個「泥沼」——關鍵字地獄。「斷言是什麼玩意⋯⋯?」、「Dummy Object 又是什麼⋯⋯?」,為了搞清楚這些東西只好一步一步嗑文章與書籍。從單元測試中會玩到的 Mocha + chai + sinon 或 Jest,甚至透過 Cypress 進行端對端測試與視覺回歸測試,然後又遇到不同設備導致快照上出現差異等等想都沒想過的問題⋯⋯。

而這篇系列文的誕生,主要是希望能幫助到那些也想瞭解測試的讀者,透過文章的引導,有脈絡的從單元測試開始學習,並快速瞭解不同的測試工具各自的用途,提供一個魚竿後續再依照自己的需求去改造它;次要的部分則是藉由系列文重新梳理一下目前研究測試的成果,轉化既有的知識為可保存可閱讀的文字;最後則是想與已經在寫測試的開發者們交流心得。

閱讀全文 »

vue-logo

Vue.js 底層還沒來得及摸透,在 2020 年 6 月 30 號 Vue 作者尤雨溪又發布聲明

大致上是在說明即將在 2020 年七月中 Vue 3.0 將進入 RC 階段並且八月初官方就會釋出正式版。

心想該來的還是要來,不如趁現在 branch 開下去馬上升級一波。

閱讀全文 »

在上篇文章中,我們將函式(function)拆成了三個部分:

  • 函式名稱(naming):以供辨識、呼叫用的名稱。
  • 函式參數(parameter):提供連結外部變數,傳送到內部語句的傳送參數。
  • 函式語句(statements):實際函式所執行的區域。

其中函式語句(statements)的部分又可以拆為:

  • 語句類別(type):探討函式是怎麼被開發者使用的。
  • 語句結構(structure):探討內部語句的寬度與深度。
  • 語句脈絡(context):探討內部語句的長度與敘述。

而這篇文章將延續上篇文章繼續介紹語句脈絡的概念。

閱讀全文 »