วิธีใช้ Jasmine ทำ TDD

บทความนี้เราจะมาลองทำ TDD (Test Driven Development) แบบง่ายๆ กับการเขียนโค้ด JavaScript กันดูครับ โดย framework ในการทำ TDD นั้น ผมจะขอใช้เป็น Jasmine แล้วกัน ลองมาดูว่ามันจะช่วยให้เราเขียน test ได้ง่ายขึ้นจริงหรือเปล่า ?

รู้จักกับ Testing Framework

จริงๆ แล้ว การทำ TDD นั้น เราไม่จำเป็นต้องใช้ framework ใดๆ เลยก็ได้นะครับ เพียงแต่เราจะต้องมาออกแบบการเขียน test เอง มันถึงจะเป็นระบบ ซึ่งพวก framework ต่างๆ นั้นจะทำแทนเราทั้งหมดครับ ไม่ว่าะเป็นการกำหนดรูปแบบของการเขียน test ไปจนถึง UI ที่เอาไว้แสดงผลลัพธ์ของการ test เลยทีเดียว ที่เหลือเราก็แค่กำหนด spec ที่ต้องการจะ test เท่านั้นเองครับ

รู้จักกับ Jasmine

ในบทความนี้ผมจะขอเลือกใช้ Jasmine เป็น framework สำหรับทำ TDD แล้วกันนะครับ (จริงๆ แล้ว Jasmine เป็น framework สำหรับทำ BDD หรือ Behavior Driven Development ซึ่งถือเป็น TDD รูปแบบหนึ่งครับ แต่โค้ด test จะอ่านเข้าใจได้ง่ายกว่า สามารถอ่านรายละเอียดเพิ่มเติมได้ที่บทความ BDD ต่างจาก TDD อย่างไร ?) โดยเราจะต้องมาเตรียมความพร้อมกันก่อนด้วยการทำตามขั้นตอนต่อไปนี้ครับ

1. ดาวน์โหลด

ก่อนอื่นให้เราเข้าไปดาวน์โหลด Jasmine มาครับ เมื่อแตกไฟล์เราก็จะได้หน้าตาประมาณนี้

จะเห็นว่านอกจากตัว lib แล้ว Jasmine ยังเตรียมทั้งโค้ดที่เอาไว้ทำงาน และโค้ดที่เอาไว้ test มาให้หมดเลยครับ

2. ใส่โค้ด

ให้เรา copy เฉพาะโฟลเดอร์ lib/jasmine-2.0.2/ มาใช้ครับ เพราะนอกนั้นเราจะเขียนขึ้นมาเอง หลังจาก copy มาใว้ในโฟลเดอร์งานของเราแล้ว หากเราจะใช้ Jasmine ที่หน้าไหนก็ให้เราเพิ่มโค้ดเหล่านี้เข้าไปครับ

ทีนี้ก็จะเหลือไฟล์ test.js นี่ละครับ ที่เราจะต้องเขียนขึ้นมาเองโดยใช้ Jasmine

3. รัน

สุดท้ายให้เราลองใส่โค้ดนี้ลงไปในไฟล์ test.js ดูครับ

จากนั้นให้เราลองเปิดหน้าเว็บของเราตามปกติดูเลย ลองสังเกตที่ด้านล่างสุดก็จะพบว่ามีส่วนแสดงผลการ test ของ Jasmine เพิ่มเข้ามาแล้วล่ะครับ

jasmine result

วิธีสร้าง Test ด้วย Jasmine

เมื่อเตรียมความพร้อมเรียบร้อยแล้ว ทีนี้เราลองมาหัดใช้ Jasmine กันเลยครับ

นิยามศัพท์

  • Suiteใช้เรียกหน่วยที่เราจะทำการ test ครับ หรือพูดง่ายๆ ก็คือ feature ที่เราอยากจะ test นั่นเอง ซึ่งในหนึ่ง suite นี้จะประกอบไปด้วย spec ต่างๆ หรืออาจจะเป็น suite อื่นๆ ที่ซ้อนอยู่ข้างในก็ได้ครับ
  • Specใช้เรียกหน่วยย่อยๆ ที่เราจะต้อง test เพื่อที่จะได้รู้ว่า feature นั้นๆ สามารถทำได้ตรงตาม requirement แล้วหรือยัง
  • Expectationคือการเขียนโค้ดเพื่อเอาไว้ตรวจสอบว่าสิ่งที่ได้จากการรันโปรแกรมนั้นตรงตาม spec แล้วหรือยัง

Syntax

ทีนี้ลองมาดูวิธีการเขียน test แบบง่ายๆ กันก่อนครับ

จากโค้ดด้านบนสามารถอธิบายได้ว่า

  • ฟังก์ชัน describe – เอาไว้ใส่ชื่อ suite
  • ฟังก์ชัน it – เอาไว้ใส่ข้อความอธิบาย spec
  • ฟังก์ชัน expect – เอาไว้เขียน expectation

ทีนี้ลองมาดูตัวอย่างการเขียน test ฟังก์ชันสำหรับเครื่องคิดเลขดูครับ

หากสังเกตดีๆ จะเห็นว่าสิ่งที่เราจะต้องเรียนรู้ในการใช้ Jasmine นั้น หลักๆ เลยก็คือการเขียน expectation นั่นเองครับ

วิธีการเขียน Expectation

expectation นั้นจะประกอบไปด้วยส่วนต่างๆ ดังนี้

  • Expect function – function สำหรับ test
  • Actual value – ค่าที่เกิดขึ้นจริง
  • Matcher – method สำหรับใช้ในการเปรียบเทียบ
  • Expected value – ค่าที่ควรจะเป็น

เวลาเขียน เราก็จะใช้ syntax แบบนี้ครับ

ตัวอย่างเช่น

จาก expectation ด้านบน จะเป็นการเปรียบเทียบค่าของ true ว่าเป็น true หรือเปล่า ซึ่งแน่นอนว่ามันเป็น true จึงส่งผลให้ expectation นี้เป็น true ซึ่งจะทำให้ spec นี้ test ผ่านครับ

รู้จักกับ Matcher

ในการเขียน expectation นั้น เราจะใช้ matcher ในการเปรียบเทียบระหว่าง actual value กับ expected value ครับ โดย matcher นั้นจะมีให้เลือกใช้เยอะมากเลย ไม่ว่าจะเป็น

  • toBe – มีค่าเป็น (true/false)
  • toEqual – มีค่าเท่ากับ
  • toMatch – match กับ (ใช้กับ regular expression)
  • toBeUndefined – มีค่าเป็น undefined
  • toBeNull – มีค่าเป็น null
  • toContain – มีส่วนประกอบเป็น (ใช้กับ array)
  • toBeLessThan – มีค่าน้อยกว่า
  • toBeGreaterThan – มีค่ามากกว่า

นอกจากนี้เรายังสามารถเติม .not เอาไว้ข้างหน้า matcher ได้ด้วยนะครับ เพื่อให้ได้ความหมายในเชิง negative

บทสรุปการใช้ Jasmine

เป็นยังไงบ้างครับ สำหรับการลองใช้ testing framework อย่าง Jasmine จะเห็นว่าในบทความนี้ ผมจะไม่ค่อยลงลึกในรายละเอียดมากนัก แต่จะเน้นแค่พอให้เข้าใจพื้นฐานก่อนครับ เพราะเราสามารถนำความรู้ไปต่อยอดเอาเองได้อยู่แล้ว

สำหรับการใช้งานจริงนั้น การดูตัวอย่างโค้ดที่ Jasmine ให้มาตั้งแต่ตอนดาวน์โหลดนั้นจะช่วยทำให้เราเห็นภาพมากขึ้นครับ แต่ถ้ายังไม่ครอบคลุมมากพอ เราสามารถอ่านรายละเอียดเพิ่มเติมได้ที่ คู่มือการใช้งาน ของ Jasmine ได้เลยครับ

(Visited 5,778 times, 2 visits today)

Leave a Reply