---
title: Sprint 18 Education
tags: MeLoop
---
# Sprint 18 Education

## Jest (Unit test)
javascript 的測試框架
### 目的
注重邏輯端的驗證, 透過塞 mock data 來驗證功能輸出是否正確, 而非單純驗證組件是否存在
### 驗證內容：
1. 驗證輸出資料筆數是否正確
2. 驗證 CRUD 功能是否正確
3. Methods
4. Computed

[jest tutorial](https://vue-test-utils.vuejs.org/zh/guides/#%E8%B5%B7%E6%AD%A5)

## Storybook (Snapshot test)

### 目的：
* 視覺化呈現 UI 及 method, 開發者可以以手動/自動的方式進行測試
* 能達到類似 tutorial 的效果, storybook 可以幫助剛接手專案的開發者了解各個 component 所做的事情, 使新開發者能更快速地了解專案內容
* Figma for designer like Storybook for engineer.
### Snapshot test
可以將 UI 變成程式碼來做比較, 比對前後版本的畫面, 並確認渲染是否正確

[storybook snapShot test](https://storybook.js.org/docs/react/workflows/snapshot-testing)

[storybook tutorial](https://storybook.js.org/docs/vue/get-started/introduction)
::: info
Global Components 一定要建立 Storybook, Container Components or Scope Components 則由開發者決定是否建立
:::
## CI/ CD
[container vs VM 1](https://docs.microsoft.com/zh-tw/virtualization/windowscontainers/about/containers-vs-vm)
[container vs VM 2](https://kenwu0310.wordpress.com/2018/12/21/virtual-machine-vs-container-%E6%AF%94%E8%BC%83/)
### runner:
runner 類似一個 container，用來做測試、部屬、compiler...。
可分為 shared(公用) 和 project(自架) 兩種
* shared(公用): 跟其他人共用, 但資源有限可能要等待資源。
* project(自架): 私人使用, CPU、記憶體跟安裝時間等規格都是可以自己設定。
### stage:
* test:
1. install job (安裝環境)
1. enlist job (檢查 coding style)
2. unit test job (自動化做單元測試)
4. snapshot test job (自動化做 snapshot test)
* build, deploy: 可以根據不同 branch 去執行不同 pipeline
### pipeline
* 每個 stage 下會有不同的 job，都跑完才是合格的專案



### CI 持續整合
* Eslint
* use Airbnb + Framework
* Eslint --fix
* Eslint --max-warning 10
* 排版 檢查 coding style
* Jest
* unit test
* coverage 檢查測試涵蓋率, 同時也會檢查 code 是否重複, 遵守 DRY (Don't repeat yourself) principle
* storybook
* snapshot test
* component review
### CD 持續部署
* Deploy Way
1. SSH -> VM -> Sentry / Git
2. Image -> Docker / K8s
3. Static Files -> cloud
* Deploy Stage：Dev / Uat / Prod

## Typescript
Typescript 是完全基於 JavaScript 的語法，有點像是`擴充版的 JavaScript` 或 `JavaScript的超集合`

### 優點
1. 強型別:
TS 改善了過去 JS 弱型別語言的缺點，透過 TS 擴充的型別系統和編譯器檢查，讓開發者在開發過程做更多的約束，撰寫更嚴謹、更少錯誤和重複、更好管理的程式碼，從而大大減少實際運行程式碼時的錯誤。
2. 提高程式碼可讀性和可維護性:
TS 加入靜態型別的語法，像是：類別（class）、建構子（constrator）、介面（interface）、繼承（inheritance）、模組（moudle）等，讓開發人員可以利用這些強型別語法撰寫更嚴謹、更少的程式碼，避免預期外的錯誤，也更容易讓其它工具來做程式碼分析。
3. 可以使用 ES 版本較高的語法:
Typescript 會幫你轉成相對應的 ES 較低版本(可指定想要轉成的版本)的語法
[JS 語法 ES6、ES7、ES8、ES9、ES10、ES11、ES12 新特性](https://www.readfog.com/a/1632742674251485184)
4. Functional Programing:
[JavaScript: Functional Programming 函式編程概念](https://totoroliu.medium.com/javascript-functional-programming-%E5%87%BD%E5%BC%8F%E7%B7%A8%E7%A8%8B%E6%A6%82%E5%BF%B5-e8f4e778fc08)

[Typescript 初心者手札](https://ithelp.ithome.com.tw/users/20120053/ironman/2273)
[讓 TypeScript 成為你全端開發的 ACE！](https://ithelp.ithome.com.tw/users/20120614/ironman/2685)

---
[Jimmy's note](https://hackmd.io/vFUyWC7fTOGnoZt8YbUAjw)
[Jacky's note](https://hackmd.io/@pSXTBcB8Q6yNve_wH3G_Yg/rk00R3UpO)
[David's note](https://hackmd.io/Os4WidNFSNmwi-oiZg_fDA)
[Allen's note](https://hackmd.io/mHila5QtTbKtgQy2Y--lFA)
[Willie's note](https://hackmd.io/@Th4jMJaRQqC9Uw8islmWrw/SkjNX6L6d/edit)