念念不忘,必有迴響。有一口氣,點一盞燈,有燈就有人。

深入淺出 Angular 的 Two-Way Binding

深入淺出 Angular 的 Two-Way Binding

Interpolation binding 與 property binding 都當 class 的 field 有變動時,會自動反應到 class 的 field,若 HTML 有任何變動也能反應到 class 的 field,這就是 two-way binding 了。

深入探討 Jasmine 的 Spy

深入探討 Jasmine 的 Spy

Jasmine 是個 mock 與 assertion 合一的 testing framework,語法優美,寫起來程式碼的可讀性很高,重點是不複雜,學習曲線平緩,Spy 為 Jasmine 最重要的部分,本文針對最常在 Angular 使用的 Spy 做整理。

深入探討 Test Double、Dummy、Fake、Stub 、Mock 與 Spy

深入探討 Test Double、Dummy、Fake、Stub 、Mock 與 Spy

初學者在學習測試時,常被一些測試的專有名詞迷惑,而且常常不同 framework 對同一個名詞的定義還不一樣。

本文以 Martin Fowler 在 TestDouble 一文的定義為標準,並搭配 Jasmine 解釋。

COSCUP Workshop:使用 RESTful API

COSCUP Workshop:使用 RESTful API

Angular 是前端 framework,若要讀寫後端資料庫,就要靠 RESTful API 與後端溝通。

JSON Server 簡介

JSON Server 簡介

在前後端分離下,Angular 需要倚賴後端 API 才能對資料庫存取,在實務上,當 API 規格確立後,前端工程師不可能等後端工程師寫好 API 才開始開發,而是一起同時開發,因此前端工程師需要有假 API 才能開發測試。

前端工程師不必為了假 API 安裝後端環境與資料庫,只要安裝 JSON Server,就能模擬出假 API。

深入探討 Angular 整合測試與 Jasmine 的 spyOn()

深入探討 Angular 整合測試與 Jasmine 的 spyOn()

spyOn() 是整合測試與單元測試的關鍵,本文深入探討 spyOn() 用於整合測試部分。

如何在 WebStorm 自訂 Jasmine Live Template?

如何在 WebStorm 自訂 Jasmine Live Template?

WebStorm 雖然提供自動產生 Jasmine Suite、Spec… 等功能,不過預設使用 ES5 的 anonymous function,當然可以自己重構成 arrow function,若能一開始就 arrow function 就更方便了。

如何在 Visual Studio Code 執行 Wallaby 單元測試?

如何在 Visual Studio Code 執行 Wallaby 單元測試?

很羨慕 Visual Studio 有 Alive 可以即時跑單元測試嗎?只要安裝了 Wallaby,在 Visual Studio Code 也可以如 Alive 一樣為 Angular 即時跑 TypeScript 與 Jasmine 單元測試。

如何在 WebStorm 執行 Wallaby 單元測試?

如何在 WebStorm 執行 Wallaby 單元測試?

很羨慕 Visual Studio 有 Alive 可以即時跑單元測試嗎?只要安裝了 Wallaby,在 WebStorm 也可以如 Alive 一樣為 Angular 即時跑 TypeScript 與 Jasmine 單元測試。

如何在執行階段對 Angular 除錯?

如何在執行階段對 Angular 除錯?

由於 TypeScript 是編譯語言,很多人擔心該如何 debug Angular,尤其是 TypeScript 編譯沒錯,但在瀏覽器執行卻錯了,但因為 TypeScript 已經編譯成 JavaScript,我該怎麼知道錯在 TypeScript 哪一行呢?