วิธีรัน Test อัตโนมัติด้วย Karma

Karma

วันนี้เราจะมาพูดถึง tool สำหรับการทำ TDD (Test Driven Development) ตัวหนึ่งที่มีชื่อว่า Karma ลองมาดูว่ามันจะทำให้การทำ TDD สะดวกขึ้นได้จริงหรือเปล่า ?

Karma คืออะไร ?

จุดมุ่งหมายของ Karma ก็คือการสร้างสภาพแวดล้อมที่เหมาะสมสำหรับการ test ครับ หรือพูดง่ายๆ ก็คือ มันจะเตรียมความพร้อมในทุกๆ ด้านเลย เพื่อที่จะทำให้การ test นั้นเป็นไปด้วยความราบรื่น เช่น การกดรัน test ทีเดียวแล้วรันไปทุกๆ device เลย หรือการรัน test ทันทีที่ไฟล์มีการเปลี่ยนแปลง เป็นต้น

ลองใช้ Karma

เรามาเริ่มลองใช้ Karma กันเลยดีกว่าครับ ให้เราทำตามขั้นตอนต่อไปนี้ (เนื่องจาก Karma นั้นรันบน Node.js เราจึงควรมีพื้นฐานเกี่ยวกับ Node.js มาบ้าง)

1. ติดตั้ง Karma

ก่อนอื่นให้เราติดตั้ง Karma ก่อนครับ โดยการติดตั้งนั้น เราจะต้องทำอยู่ 2 ที่ด้วยกัน ดังนี้

1.1 แบบ Global

ให้เราติดตั้ง karma-cli แบบ global ครับ เพื่อที่จะทำให้เราสามารถใช้คำสั่งของ Karma ใน command-line ได้ โดยเราจะทำเพียงแค่ครั้งแรกครั้งเดียวเท่านั้น ให้เราพิมพ์คำสั่งด้านล่างนี้

1.2 แบบ Local

ต่อมาเราจะต้องติดตั้ง karma แบบ local ด้วยครับ ซึ่งก็คือการติดตั้ง Karma เอาไว้ที่โฟลเดอร์งานของเรานั่นเอง ให้เรา cd เข้าไปที่โฟลเดอร์งานของเราก่อน จากนั้นก็ให้เรารันคำสั่งตามด้านล่างนี้

หมายเหตุ: หากเราจะใช้ Karma กับงานไหน เราก็จะต้องติดตั้ง karma แบบ local เอาไว้ที่โฟลเดอร์งานนั้นๆ เสมอครับ

2. ติดตั้ง Jasmine สำหรับ Karma

ทีนี้เราจะต้องทำให้ Karma รู้จักกับ framework ที่เราใช้ในการ test ด้วยครับ สมมติว่าเราใช้ Jasmine ก็ให้เราติดตั้ง karma-jasmine เข้าไปด้วย แบบนี้ครับ

3. ติดตั้ง Chrome สำหรับ Karma

จากนั้นก็มาถึงเรื่องของ browser ที่เราจะ test ครับ สมมติว่าเราจะ test กับ Google Chrome ก็ให้เราติดตั้ง karma-chrome-launcher เข้าไป แบบนี้ครับ

หากใครอยากใช้ browser ตัวอื่นๆ ด้วย สามารถเข้าไปดูรายชื่อ browser ที่ Karma รองรับได้ที่หน้า Browsers ครับ

4. กำหนด Config ให้ Karma

สุดท้ายแล้วก็มาถึงขั้นตอนของการ config ครับ ให้เราสร้างไฟล์ karma.conf.js ขึ้นมา แล้วลองใส่โค้ด config แบบง่ายๆ ด้านล่างนี้ลงไปเลยครับ

สำหรับ config ในส่วนของ files หากเรายังไม่มีโค้ดสำหรับ test ที่เขียนด้วย Jasmine เลย ให้เราสร้างไฟล์ test.js แล้วใส่โค้ดตัวอย่างด้านล่างนี้ไปก่อนก็ได้ครับ

จากนั้นก็เอาไฟล์ test.js นี้ไปใส่ไว้ในโฟลเดอร์ js ครับ เพียงเท่านี้เราก็พร้อมที่จะรัน Karma แล้วล่ะครับ ในบทความนี้ผมขอ config แบบง่ายๆ ไปก่อนนะครับ สำหรับรายละเอียดของ config แบบละเอียดสามารถเข้าไปอ่านได้ที่ Configuration File

5. รัน Test ด้วย Karma

เมื่อทุกอย่างพร้อมแล้ว เราก็ลองรัน Karma ดูเลยครับ

karma with chrome

เราก็จะพบว่า Karma ได้สั่งให้เปิด Chrome ขึ้นมาเพื่อรันไฟล์ js ที่เราได้ระบุไว้ครับ โดยผลการ test เราก็สามารถดูได้ผ่านทาง command-line

ลองใช้ PhantomJS กับ Karma

หากใครอยากจะใช้ Karma กับ production เลย ก็ให้เราเปลี่ยน browser มาเป็น PhantomJS แทนครับ ให้เราติดตั้ง karma-phantomjs-launcher เพิ่มอีกตัว

จากนั้นให้เราไปแก้ karma.conf.js ในส่วนของ browsers ให้เป็น PhantomJS แทน

แล้วก็ลองรัน Karma ใหม่อีกที

karma with phantomjs

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

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

(Visited 7,085 times, 1 visits today)

6 Responses to “วิธีรัน Test อัตโนมัติด้วย Karma”

  1. ผมเจอปัญหาตอนรันอะครับ
    Module is undified?
    ต้องแก้ยังไงอะครับ

  2. ลองเปลี่ยนชื่อไฟล์ config จาก karma.js มาเป็น karma.conf.js แล้วรัน karma start karma.conf.js ดูครับ

  3. Siam HTML – สังคมของนักพัฒนาเว็บไซต์ในไทย ขอบคุณครับ เดี๋ยวลองดูครับ

  4. "หากใครอยากจะใช้ Karma กับ production เลย ก็ให้เราเปลี่ยน browser มาเป็น PhantomJS แทนครับ" ทำไมถึงเลือกใช้ Phantom ในการ Test production เหรอครับ มันต่างอะไรกับการที่เรา Test ใน Browsers อย่าง Chrome, IE, FF, etc?

  5. ที่ Production เราจะใช้ PhantomJS ในการ test แบบ automated test อะครับ คือเราจะไม่ได้มานั่งดูผลรันจาก browser อย่าง chrome, firefox แล้วฮะ แล้วเราก็จะสั่งให้รัน automated test เรื่อยๆ พอเวลามีอะไรผิดปกติ เราก็จะรู้ได้ทันท่วงที ประมาณนี้อะครับ

  6. Siam HTML – สังคมของนักพัฒนาเว็บไซต์ในไทย ขอบคุณครับ :)

Leave a Reply