การใช้ Jest เพื่อทดสอบ TDD ใน Angular

TDD สำคัญอย่างไร?? และทำไมเราต้องใช้ Jest?!?

เกริ่นก่อนว่า บทความนี้เป็นมุมมองที่ได้จากการศึกษาและทดลอง หากส่วนไหนยังไม่ถูกต้อง สามารถแนะนำติชมได้นะคะ

คุณเคยไหม เขียนเว็บ แก้โค้ดไปเรื่อย ๆ จู่ ๆ สิ่งที่เคยทำได้ กลับ Error หรือไม่แสดงผลดังที่เคยเป็นมา แล้วจุดที่เราผิดพลาดไป มันเกิดขึ้นตั้งแต่ตอนไหนล่ะ?? ยิ่งกลับมาอ่านโค้ดก็ยิ่งไม่เข้าใจ ฉันทำอะไรลงไป ปวดหัวชะมัดเลย

ไม่ต้องกินยาพาราค่ะ ปัญหาเหล่านี้จะหายไป ถ้าคุณรู้จัก TDD

เอ๋~~ แล้ว TDD คืออะไร?

Test Driven Development (TDD) คืออะไร?

TDD (Test Driven Development)

เป็นแนวทางหนึ่งของการเขียนโค้ด นั่นคือคุณต้องเขียน test ก่อน ให้มัน Fail จากนั้นก็มาเขียนโค้ดให้ Pass ซึ่งในภาษาอังกฤษจะเรียกว่า the red-green approach

TDD จำเป็นจริงมั๊ย?

ข้อดีของ TDD คือ

• เขียนโค้ดเท่าที่จำเป็น เมื่อคุณเขียน Test ตามความต้องการหลักของงานแล้ว หน้าที่ของคุณคือทำ test ให้ผ่าน ไม่ต้องมาคิดว่าต้องเพิ่มอะไรรึเปล่า
• แก้งานได้ง่ายขึ้น ทำไมงานใช้ไม่ได้แล้วนะ มันผิดตรงไหนกัน??? ลองกลับไปดูที่ test กันอ๋อออออออ ผิดตรงนี้นี่เอง
• เพิ่ม test coverage การเขียน TDD ทำให้เรารู้ว่าเขียนครอบคลุมตรงไหนบ้าง รึขาดไปตรงไหน และ Jest ที่เราจะใช้ยังช่วยบอก test coverage ได้อย่างมีประสิทธิภาพด้วยน้าาา
• YAGNI หรือ You Are Not Gonna Need It เป็นแนวปฏิบัติที่จะนักพัฒนาจะไม่เพิ่มอะไรเข้าไปจนกว่ามันจะจำเป็นจริง ๆ แน่นอนคุณจะไม่พลาดสิ่งนี้เพราะ TDD จัดให้

สรุปก็คือ ทำตัวทดสอบ (Test) ก่อนการเขียนโค้ด (Coding) ตามสเปค (Specification) ของงาน ซึ่งการทำงานแบบนี้จะได้งานที่ตอบสนองความต้องการของลูกค้ามากขึ้น

ยังไม่ได้เริ่มโค้ดเลย จะรู้ได้ไงว่าต้องเทสตัวไหน

นี่ล่ะค่ะ ความท้าทายของ TDD ที่เราต้องเข้าใจอย่างถ่องแท้ว่างานต้องการอะไร เพื่อนำมาเขียนตัวทดสอบก่อนเริ่มงานแต่ละส่วน และเมื่อคุณทดสอบงานของคุณอยู่เสมอ คุณก็จะรู้ว่าจุดผิดพลาดอยู่ตรงไหน (ไม่ต้องปวดหัว ตามไล่เช็คโค้ดแล้ววววววว ^^)

ทำไมต้อง Jest ?

Jest is a delightful JavaScript Testing Framework with a focus on simplicity — Jest

Jest คือ

เครื่องมือเขียนทดสอบ (Testing) JavaScript Framework โดยผู้พัฒนาคือ Facebook
ซึ่งสามารถทำงานกับโปรเจกต์เช่น Babel, TypeScript, Node, React, Angular, Vue และอีกมากมาย

Jest จ๋า ดียังไง?

• เร็ว และปลอดภัย
• snapshots testing ตรวจให้ว่า UI ของเราจะไม่เปลี่ยนไปกะทันหัน
• การทดสอบจะทำงานแบบขนาน (Parallelized) ทำให้เพิ่มความเร็วในการทำงานอย่างมาก ที่สำคัญไม่ต้องใช้ browser เหมือน Karma ด้วยนะ
• สามารถดู CODE COVERAGE ได้โดยไม่ต้องติดตั้งเพิ่ม
• great API: Jest มีเครื่องมือทุกอย่างในที่เดียว และมี Document ที่ดี จึงใช้งานได้ง่าย

มาดูกันว่าถ้าใช้ Jest ใน Angular จะเป็นยังไง

Angular with Jest

สิ่งแรกที่ต้องทำคือ ตรวจว่าในเครื่องของเรามี environment เพียงพอในการพัฒนา Angular รึยัง

ติดตั้ง Angular

สิ่งที่ต้องมี

• node.js
• npm จะมาพร้อมกับการติดตั้ง node.js

Check version เพื่อตรวจสอบว่ามีอยู่ในเครื่องรึไม่

node.js :

node -v

npm :

npm -v

ถ้าพร้อมแล้ว Let’s go!!

1. ติดตั้ง the Angular CLI แบบ globally

npm install @angular/cli -g

2. สร้าง Angular Application

ng new my-app

หลังใช้คำสั่ง จะมีคำถามว่าจะเพิ่ม Angular routing หรือไม่ และใช้ style sheet แบบไหน

เมื่อใช้คำสั่ง ng new my-app

ซึ่งในโปรเจกต์ตัวอย่าง จะเพิ่ม routing และใช้ style sheet แบบ Less

3. หลัง Angular CLI สร้างโปรเจกต์เรียบร้อย ดูซิว่าใช้ได้จริงไหม?

cd my-app 
ng serve

ไปที่ http://localhost:4200/

มาแล้วววววว หน้าเว็บของโปรเจกต์ที่สร้างขึ้น

หลังจากนี้เราจะมาเพิ่ม Jest ลงไป

ติดตั้ง Jest

1. ติดตั้ง jest แบบ globally

npm install -g jest

เพื่อให้ Jest เป็น test runner เราจะใช้ jest-preset-angular ในการติดตั้ง ซึ่งจำเป็นจะต้อง config ตามรายละเอียดใน README.md มาเริ่มไปพร้อมกันเลย!

thymikee/jest-preset-angular

2. ลง dependencies ทั้งหมดที่จำเป็น (จะใช้ npm หรือ yarn ก็ได้)

yarn add -D jest jest-preset-angular @types/jest
# or
npm install -D jest jest-preset-angular @types/jest

3. สร้างไฟล์ setupJest.ts ในโฟลเดอร์ my-app/src โดยมี code ตามข้างล่าง

4. สร้างไฟล์ jestGlobalMocks.ts ในโฟลเดอร์เดียวกันกับไฟล์ setupJest.ts

5. และเพิ่ม code นี้ลงใน package.json

{
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": ["<rootDir>/src/setupJest.ts"]
  }
}

6. เปลี่ยนชื่อไฟล์src/test.ts เป็น src/karmaTest.ts เพื่อไม่ให้ Karma กับ Jest ทำงานทับซ้อนกัน

เปลี่ยนชื่อไฟล์ src/test.ts เป็น src/karmaTest.ts

7. เมื่อเราทำตามขั้นตอนครบแล้ว มาลองกัน

jest

ผลลัพท์หลังใช้คำสั่ง jest เย้! ผ่านทั้งหมดเลย

หลังจากที่เราติดตั้ง Jest ให้ทำงานบน Angular project ได้แล้ว ไปที่หัวข้อถัดไป

จับมารวมกันนนนนน!! (TDD Jest Angular)

พร้อมออกรบกันรึยัง!! ภาพโดย Parker_West จาก Pixabay

หัวข้อสุดท้ายก่อนนำไปใช้จริง เรามาลองสร้าง TDD ของตัวเองกันค่า
ซึ่งในหัวข้อนี้ จะอธิบายเพียงหลักการทำงานของ TDD ดังนั้นจะไม่ลงรายละเอียดในส่วนของ test case นะคะ

เริ่มแรกสร้าง component ในโปรเจกต์ขึ้นมาใหม่

ng g c favorite-animals

หลังจากสร้าง component มาแล้ว จะมีไฟล์ถูกสร้างมาในโฟลเดอร์ชื่อ favorite-animals อยู่ 4 ไฟล์นั่นคือ

โฟลเดอร์ favorite-animals

• favorite-animals.component.html (ไฟล์ html ของ component)
• favorite-animals.component.less(ไฟล์ less ของ component) ซึ่งเป็นไปตาม style sheet ที่เลือกในตอนสร้าง angular
• favorite-animals.component.spec.ts (ไฟล์ test ของ component)
• favorite-animals.component.ts (ไฟล์ component หลัก)

หลังจากได้ component มาแล้ว สิ่งแรกที่เราต้องทำก็คือ……..
สร้าง title ตื้ดดดดดดดดดดดดด ❌
สร้าง navbar ตื้ดดดดดดดดดดดดด ❌

ตามหลัก TDD ของเรา อย่าพึ่งลืมนะคะ ต้องสร้าง test ก่อนเริ่ม coding ค่า

มาที่ไฟล์ favorite-animals.component.spec.ts

บรรทัดที่ 3 : import { By } from ‘@angular/platform-browser’; เพื่อนำมาเขียนทดสอบในบรรทัดที่ 28
บรรทัดที่ 27 : เราจะเพิ่มตัวตรวจสอบว่า มี title อยู่ใน <h1> และมี content ตามที่เขียนไว้หรือไม่

ใช้คำสั่ง Jest หลังเขียน test

เจอ failed สีแดง ไม่ต้องตกใจกัน เราทำให้ pass ได้
เรามาเขียนสิ่งที่ตัว test ต้องการกัน

ผ่านแล้วววววววว

หลังจากที่เราเขียนโค้ดแบบ TDD ตัวแรกได้แล้ว มาลองเพิ่ม test case อีกตัวกัน

ใช้คำสั่ง jest หลังเพิ่ม test case

จาก test case ด้านบน ต้องการให้มี <span>ที่แสดงข้อความว่า Hello world
จัดไปเลยยยยยยยย

ใช้คำสั่ง jest หลังแก้ไขไฟล์ html

มาถึงตรงนี้ ทุกคนคงเข้าใจหลักการทำงานของ TDD กันแล้ว ซึ่งก็คือ

เขียน test case →Fail ❌ →ทำตาม test case →Pass ✔️

เมื่อทำตาม process เหล่านี้ได้ งานของเราก็ไม่ต้องมาปวดหัวกับการไล่โค้ดแล้ว
(ปวดหัวตอนเขียน test case แทน ตึ่งโป๊ะ!)

ถึงอย่างนั้น ถ้าเรารู้สาเหตุของข้อผิดพลาดก็ย่อมแก้ปัญหาได้ง่าย และรวดเร็วกว่า
มาฝึกทำงานโดยใช้ TDD ให้คล่องกันเถอะค่ะ 😉😉

หากต้องการเข้าใจเรื่องการเขียน Test case มากขึ้น แนะนำบทความข้างล่างนี้นะคะ

Angular の Unit Testing — Part 1 มาลองเขียนเทสกัน

และสามารถศึกษาเพิ่มเติมได้ทั่วไปเลยค่า จบบทความแล้ว หวังว่าบทความนี้จะเกิดประโยชน์ต่อผู้ที่สนใจไม่มากก็น้อยนะคะ หรือถ้ามีแหล่งความรู้อื่น ๆ ก็นำมาแบ่งปันกันได้ค่า ❤️❤️

source code :

gdimoo/Jest-medium

แหล่งอ้างอิง

• Test Driven Development (TDD) คืออะไร?
• Test-Driven Development Attempt With Jest and Angular
• Integrate Jest into an Angular application and library
• Test Driven Development in an Angular World — Part 1
• สรุปเรื่อง Yagni: You Are Not Gonna Need It