建立測試

還沒開始進行撰寫測試程式之前, 我們得先安裝測試框架, 前端的測試框架很多, 有Jest, 還有Mocha, Jasmine, Tape, 在這裡我選Jest, 沒有為什麼, 就真的抓周抓到.

以下是簡略比較

打開VSCode 開啟Terminal 視窗, 輸入

yarn add -D @types/jest
yarn add -D jest
yarn add -D ts-jest

上面步驟安裝jest typescript definition, 讓typescript 能夠與jest javascript模組/函式庫一起運作.

建立 jest.config.js 檔案, 並輸入以下內容

module.exports = {
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  testRegex: "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"]
};

透過上述步驟, jest 測試框架就會搜尋 tests 底下所有測試檔案並執行.

打開tsconfig.json 檔案並加入以下內容

 "include": [
    "node_modules/@types",
  ],

打開packages.json 檔案, 並加入以下內容

"scripts": {
   "test": "jest"
},

建立 tests 資料夾, 在 tests 目錄下新增一個第一個檔案 frist.test.ts 檔案

test('test1', () => {
   expect(1+2).toEqual(3);
});

以上測試很簡單, test 負責描寫一個單元測試, 它有兩個參數

• 第一個參數是 "測試名稱", 你可以簡單描述這部分是在測試什麼案例?
• 第二個參數是一個回呼函式, 在裡面寫測試的功能, 然後用 expect 來測試的結果是否符合期望值

例如上方的測試內容為 "期望 1+2 會等於 3"

輸入

yarn test

如果沒有意外, 這時候就顯示測試成功

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.033s
Ran all test suites.
Done in 5.56s.

Git 安裝

在軟體開發的過程當中, 免不了要刪除/新增/修改原始碼檔案, 有時候想回復上一個動作或者程式出了什麼問題, 也可以降回前面的版本.

這時候我們需要版本控管機制, Git 是一種版本控制系統, Git 可以回到指定的時間點, 救回不小心刪除檔案, 剛開始我們先不考慮遠端儲存庫, 只考慮在自己電腦本端做版本控制, 這樣比較能夠將學習複雜度降低.

去git 官網下載並安裝好後

在VSCode Terminal 視窗, 輸入初始化儲存庫

git init

這時你就會看到Git 告訴你說已經在這邊建立好一個新的Git 儲存庫(Repository).

有時候一些程式編譯時期會產生中間檔或暫存檔, 因為每次只要一編譯就等於產生一次新的檔案, 對專案來說通常沒有實質的利用價值, 像這樣的檔案其實也不會想讓它進到Git 版本控管系統裡.

要做到這件事, 只要在專案目錄裡放一個 .gitignore 檔案, 並且設定想要忽略的規則就行了.
編輯這個檔案的內容, 例如以下內容, 就可以忽略專案下node_modules 所有的內容

node_modules/
dist/

接下來在VSCode Terminal 視窗輸入以下指令, 將所有專案檔案加入暫存變更區(Staging Area)

git add .

以下指令可以顯示目前你異動了哪些檔案

git status

再輸入以下命令並輸入註解說明, 將變更提交到儲存庫(Repository)

git commit -m "註解說明"

或者你也可以用VSCode 最左邊第三個Icon 按鈕長得像Y 圖示(Source Control), 快速鍵是CTRL + SHIFT + G, 輸入註解. 相當於上面的指令步驟.

假如在修改程式碼之後, 後悔在 test.ts 剛剛修改了一堆有的沒的垃圾碼. 你可以輸入下面指令還原檔案

git checkout -- ./test.ts

或是你可以用滑鼠移到在VSCode 左邊Source Control Changes 檔案清單內的 test.ts 檔案右邊有個復原圖示, 點下去就可以復原.

常常使用終端機(Terminal) 來操作 Git 常會讓人覺得一直打指令很麻煩很囉唆, 因此 Git 也有提供 alias 的功能

例如你可以將 git status 指令縮寫為 git st

git config --global alias.st status

這樣一來只要打 git st 就等同於打 git status 了.

欲將git checkout 指令縮寫為 git co , 你只要這樣設定

git config --global alias.co checkout