(TDD เบื้องต้นโคตรๆ) : Set Up Environment สำหรับ TypeScript

สวัสดีครับ ผมเขียนบทความนี้ขึ้นมา เพราะกำลังจะฝึก TDD นี้แหละครับ

คือฝึกไปด้วย เขียนบทความไปด้วย จะได้เป็นการทบทวนตัวเอง 555+

TypeScript is a typed superset of JavaScript that compiles to plan JavaScript (https://www.typescriptlang.org/)

ทำไมต้องเขียน Test นะ ?

เพราะว่า Code ของเรามีการเปลี่ยนแปลงอยู่ตลอดเวลายังไงหละ !!!

นึกถึงตอนที่ Code ของเรามีการเปลี่ยนแปลงนะครับ หลักๆเลยคือ

1. ตอนเรา Refactoring
2. ตอนแก้ไข หรือ เพิ่ม Feature
3. ตอนเราอัพเดท Dependency

หลายๆคนคงเป็นนะครับ พอเราเปลี่ยนแปลง Code เมื่อไร ถ้าไม่มี Test เนี่ย ตอนจะ Deploy จะเอาไปโชว์ลูกค้า หรือตอน Review Meeting เนี่ย มันรู้สึกสั่นๆ แอปมันจะแครช มันจะเอ๋อหรือเปล่าก็ไม่รู้ 555+

เพราะฉะนั้นตอบแบบเห็นแก่ตัวเลยว่า

Test มีไว้เพื่อเพิ่มความมั่นใจ และก็เพื่อความสบายใจของเรานั่นเอง !!!

ถึงมันอาจจะไม่ 100% แต่มีไว้ อย่างน้อยก็ช่วยเพิ่มความมั่นใจให้เราก่อน Deploy ได้เยอะมากกกกกก

ประเด็นคือต้อง Test ให้ถูกจุด

การเขียน Test เราควร Test ที่แก่นของระบบ ไม่ใช่เขียน Test ไปซะทุกอย่าง ใครทำแบบนี้พูดเลยว่าเหนื่อย

ยกตัวอย่างถ้าเราเขียน Test ที่ระดับ View ในส่วนนี้บอกเลยว่าไม่ควรจะโฟกัสกับมันมาก(สำหรับมือใหม่อย่างเราๆ) เพราะ View เป็นส่วนที่มีการแก้ไขบ่อยมาก และก็ Test ยากด้วย ต้องใช้ Framework หรือ Library เฉพาะเข้ามาช่วย

จุดที่เราควรจะเขียน Test ยกตัวอย่าง ฝั่ง Client Side ถ้าใครเขียน Angular 2 อยู่ ก็จะเป็นพวก Service ต่างๆ แต่ประเด็นคือเราต้องแยก Logic ออกมาจาก Component Controller Class ให้หมดนะครับ

เอาหละครับมา Set Up Environment กัน !!!

ใครยังไม่มี node ไปโหลดและติดตั้งให้เรียบร้อยก่อนครับ

Node.js

ในตัวอย่างนี้ผมจะใช้ TypeScript เป็นภาษาในการเขียน Test นะครับ

Library ที่ใช้ เบื้องต้น ก็มีแค่ mocha กับ chai ครับผม

อย่างแรกก็สร้าง Folder ก่อนเลยครับ ชื่ออะไรก็ได้

เข้าไปใน Folder นั้น

เปิด CLI (Command Line Interface) แล้วพิมพ์ตามนี้เลย

// สร้าง package.json ขึ้นมา เอาไว้เก็บข้อมูลของโปรเจคของเรา
> npm init -y  
// ติดตั้ง Library และ Type Definition สำหรับ TypeScript
> npm install --save-dev typescript mocha chai
> npm install --save-dev @types/mocha @types/chai
// สร้าง tsconfig.json สำหรับตั้งค่า TypeScript
> tsc --init

เสร็จแล้วเปิด package.json จะเห็นหน้าตาประมาณนี้ครับ

{
  "name": "canary-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "directories": {
    "test": "test"
  },
  "scripts": {
    "test": "mocha"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/chai": "^3.4.34",
    "@types/mocha": "^2.2.33",
    "chai": "^3.5.0",
    "mocha": "^3.2.0",
    "typescript": "^2.1.4"
  }
}

Note: อย่าลืมเพิ่มตรงนี้เข้าไปนะครับ ไว้สำหรับตอน Run Test (พิมพ์ npm test) โดยเราจะเก็บ Test File ทั้งหมดไว้ใน Folder ที่ชื่อว่า test

"directories": {
  "test": "test"
},
"scripts": {
   "test": "mocha"
}

จากนั้นก็สร้าง Folder ที่ชื่อว่า test ใน Root Directory ของ Project

เข้าไปข้างใน Folder test แล้วสร้าง File ชื่อ canary_test.ts ครับ

อย่างแรกที่เราจะทำกันก็คือ Canary Test ครับ

Canary Test มีไว้เพื่อตรวจสอบ Environment สำหรับการ Test ว่าเราได้ Set Up ถูกต้องหรือไม่

// ในไฟล์ canary_test.ts
import { expect } from "chai"
describe("Canary test", () => {
    it("should pass this canary test", () => {
        expect(true).to.equal(true)
    })
})

เสร็จแล้วเปิด CLI แล้วก็พิมพ์

> tsc  // Compile typescript file ให้เป็น javascript file
> npm test  // Run test, mocha จะ run ทุก Test ใน Folder Test ของเรา
// จะได้หน้าตาประมาณนี้
Canary test
    ✓ should pass this canary test
1 passing (7ms)

ใครที่ Set Up Environment ถูกก็จะได้ผลตามข้างบนเลยครับ จบละครับการตั้งค่าง่ายๆ สำหรับการเทสใน TypeScript

Structure ของ Project เราครับ

.
├── package.json
├── test
│   ├── canary_test.js
│   └── canary_test.ts
└── tsconfig.json

ขอบคุณที่อ่านจนจบนะครับผม /\

อ่านแล้ว ยังไงก็ช่วยกดหัวใจเป็นกำลังใจให้หน่อยนะครับ

แล้วก็ฝากแฟนเพจด้วยจ้า : )

https://www.facebook.com/imkrish.developer/

“ Happiness is Only Real When Shared ”

ที่เริ่มเขียน Blog เพราะไปเจอ Quote นี้นี้แหละครับ :)