เริ่มทำ Unit Testing ใน JavaScript ด้วย Jasmine

หลายคนอาจจะรู้สึกไม่ชอบภาษา JavaScript อาจจะมีประสบการณ์ที่พอเขียนเสร็จแล้วก็ไม่อยากจะไปแก้ไข ได้แต่เขียนเพิ่มเข้าไปเรื่อยๆ นานๆ เข้าก็จะกลายเป็นโค้ดเทพ (legacy code) ที่ไม่สามารถแตะต้องอีกต่อไป ผมคิดว่าส่วนหนึ่งน่าจะเป็นเพราะว่าเมื่อก่อนเรายังไม่มี tool ดีๆ มาช่วยในการดูแลรักษาโค้ดของเรา แล้วก็ส่วนหนึ่งก็น่าจะเป็นเพราะเราไม่รู้ว่าจะเริ่มต้นดูแลรักษาโค้ดของเราอย่างไร

ผมเลยมาขอเสนอขั้นตอนง่ายๆ ในการเริ่มต้นเขียน unit test ในภาษานี้กัน เครื่องมือที่สามารถช่วยเราเขียน unit test ได้ จริงๆ มีเยอะมาก ในบทความนี้ผมขอใช้ Jasmine ซึ่งเป็นเครื่องมือที่มีการพัฒนาอยู่เรื่อยๆ แล้วก็เริ่มต้นได้ไม่ยากครับ

มาเริ่มกันเลยดีกว่า เราจะลองเริ่มเขียน FizzBuzz กัน ก่อนอื่นเรามาทำโครงสร้างของโฟลเดอร์เรามาให้เหมือนกันก่อนดีกว่า ผมขอสร้างตามนี้

fizzbuzz/
  |- app/
    |- fizzbuzz.js
  |- spec/
    |- fizzbuzz.spec.js

ในโฟลเดอร์ app จะเก็บโค้ดของเรา แล้วในโฟลเดอร์​ spec จะเก็บโค้ดของ unit test

ทีนี้ผมจะติดตั้งเครื่องมือโดยใช้ package manager ของ Node (npm) นะครับ ดูวิธีติดตั้งได้ที่นี่ พอติดตั้งเสร็จเราจะใช้คำสั่ง npm init เพื่อสร้างไฟล์ package.json ขึ้นมา จากนั้นเราก็ติดตั้ง Jasmine โดยใช้คำสั่ง

npm install jasmine-node --save

คำสั่งเสริม --save มันจะไปเพิ่มชื่อ package ที่เราติดตั้งไว้ที่ไฟล์ package.json ซึ่งเพิ่มความสะดวกให้เราในกรณีที่เราไปทำงานที่เครื่องอื่นหรือเราลงเครื่องใหม่ ให้เราใช้คำสั่ง npm install เพื่อติดตั้ง package ทั้งหมดที่เราใส่ไว้ใน package.json ได้

คำสั่งข้างต้นจะสร้างโฟลเดอร์ node_modules ขึ้นมา หน้าตาโดยรวมของโฟลเดอร์ ณ ตอนนี้ของเราควรจะเป็นตามนี้

fizzbuzz/
  |- app/
    |- fizzbuzz.js
  |- node_modules/
  |- package.json
  |- spec/
    |- fizzbuzz.spec.js

ลองใช้ Jasmine รันโค้ดสำหรับทดสอบดูหน่อย (ณ​ ตอนนี้ผมอยู่ที่โฟลเดอร์ fizzbuzz นะครับ)

./node_modules/.bin/jasmine-node spec

ผลที่ได้ควรจะได้แบบนี้

Finished in 0 seconds
0 tests, 0 assertions, 0 failures, 0 skipped

นั่นคือเรายังไม่ได้มีโค้ดทดสอบอะไรเลย ทีนี้เราก็มีสภาพแวดล้อมเอาไว้สำหรับเขียนโค้ด JavaScript เรียบร้อยแล้วครับ ง่ายไหม? ลองเริ่มเขียนแบบง่ายๆ กัน

describe("FizzBuzz", function() {
    it("should return fizz if input is 3", function() {
        var app = require("../app/fizzbuzz");
        result = app.fizzbuzz(3);
        expect(result).toBe("fizz");
    });
});

แล้วรันโค้ดสำหรับทดสอบควรจะได้ Fail ตามนี้

F

Failures:

  1) FizzBuzz should return fizz if input is 3
   Message:
     TypeError: undefined is not a function
   Stacktrace:
     TypeError: undefined is not a function
    at null. (/Users/zkan/fizzbuzz/spec/fizzbuzz.spec.js:4:22)

Finished in 0.025 seconds
1 test, 1 assertion, 1 failure, 0 skipped

เราก็ไปเพิ่มโค้ดครับ

exports.fizzbuzz = function(number) {
    if (number === 3) {
        return "fizz";
    }
});

ชุดทดสอบของเราก็จะผ่าน

.

Finished in 0.006 seconds
1 test, 1 assertion, 0 failures, 0 skipped

จากนั้นก็ลุยเองเลยครับ ขอให้สนุกกับการเขียน JavaScript 🙂

ต้องขอขอบคุณก้องมาด้วย ณ ทีนี้ครับที่เปิดคอร์สอน Test Driven Development in AngularJS ผมนำความรู้จากวันนั้นมาต่อยอดใช้ได้จริงครับ กราบ (-/\-)