iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0
Modern Web

Angular TDD (Test-driven development ) 從0到1系列 第 13

Angular TDD 測試從0到1: Day 13 建立專案

  • 分享至 

  • xImage
  •  

終於進入主題了,為了尊重講師的智慧財產權,筆者不會把講師的 Source Code 放上來唷,有興趣的讀者們可以到 Udemy 購買 :)

但我會將重點整理上來,做個有效輸入與輸出的學習。

今日課綱

如果前面幾篇都熟悉的話,相信各位讀者知道這幾個步驟如何做了,如果不清楚的讀者,後面會有重點筆記可以參考。

  • Getting Started
  • clone example App
  • things u need to install
  • how to run unit tests

認識專案架構

  1. source(src) 內依照 section 名稱分類,之後依序教學
  2. azure-pipelines-pr.yml: Neil(講師) 之後課堂會教用 pipeline 做自動化測試的腳本檔
  3. testing-util.ts: 用來設定 mock 假資料的檔案,像是component, service之類
  4. package.json: 新增兩個 script (1)code-coverage (2) code-diff-coverage 可以知道測試覆蓋率和差異

如何跑測試

  1. 因為是 download 專案,所以開啟專案第一動是 npm install
  2. run ng test ,但本機node裝的是 18.x.x 版,run起來會有問題,所以用 nvm 切換版本到 16.x.x 的穩定版就可以了。解法參考這
  3. 狀況排除後,run ng test ,就會順利run起來了

本日心得

由於上一周學習內容有理解,所以專案的 spec.ts 都大致知道做什麼事,不意外的 Udemy download 下來的原始碼,在本機跑都會需要在調整環境。

需要花點時間理解的是 testing-utils.ts 這檔案用來建立 Test App,而 section 資料夾則是 mock App,兩者的關係我們下一篇介紹。


上一篇
Angular TDD 測試從0到1: Day 12 導入專案寫測試 (Udemy) - 前言
下一篇
Angular TDD 測試從0到1: Day 14 如何用 configureTestingModule 設定 Unit Test 環境
系列文
Angular TDD (Test-driven development ) 從0到130
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言