รัน unit test บน jasmine ด้วย karma บน javascript บ้าน ๆ

ไปเจอโค้ด javascript ของลูกค้าแบบที่ไม่ได้ใช้ framework อะไรที่เป็น legacy คือไม่มี test ด้วย แล้วต้องการเขียน unit test เลยแนะนำว่าให้ลองใช้ jasmine ไปแบบไม่ได้บอกอะไร คิดว่าไม่เกิน 15 นาทีน่าจะหาวิธีใช้งานได้ เดินไปดูอีกที อ้าว เข้าป่าไปซะแล้ว เลยนึกขึ้นได้ว่า jasmine เฉย ๆ มันจะยุ่ง ๆ หน่อย ถ้าใช้ karma ร่วมด้วย น่าจะสะดวกกว่านี้เยอะ เลยทำตัวอย่าง ยัดใส่ github แล้วก็เอาไปให้ลูกค้าดู น่าจะเห็นทางไปละ

โจทย์ที่ได้มาคือ ลูกค้าใช้ javascript แบบไม่ได้ใช้ framework แถมใช้ jquery ด้วย เลยทำตัวอย่างไว้แบบนี้

เริ่มจาก install ของทุกอย่างลงไปเป็น dev dependencies ก่อน ด้วยคำสั่ง

npm install --save-dev jasmine karma karma-chrome-launcher karma-cli karma-jasmine jasmine-jquery

เท่านี้ก็จะได้ของที่ต้องใช้ทั้งหมดลงมาแล้ว

ต่อมาก็ทำ configuration ให้กับ karma ตั้งชื่อเป็น karma.conf.js

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine'],
        files: [
            'src/**/jquery.min.js',
            'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
            'src/**/*.js',
            'spec/**/*_spec.js'
        ],
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: false,
        browsers: ['ChromeHeadless'],
        singleRun: true
    });
};

ส่วนที่สำคัญคือ

  • framework ระบุว่าจะใช้ jasmine นะ
  • files เป็นอาร์เรย์ ระบุว่าเราจะ import ไฟล์ไหนไปใช้ในการรัน unit test บ้าง สังเกตว่ามีการเรียง dependencies ที่สำคัญตามลำดับก่อนหลัง เสร็จแล้วตามด้วย source ของ app และปิดท้ายด้วย test spec
  • browsers จะใช้ chrome headless

สังเกตว่า source ของ app ใส่อยู่ใน /src ส่วน spec หรือ test ของ app จะอยู่ใน /spec

เสร็จแล้ว เราสามารถสั่ง test ได้เลย โดยการรัน

./node_modules/karma-cli/bin/karma start --single-run

คือรันครั้งเดียวด้วย karma-cli ทีนี้ถ้าต้องพิมพ์แบบนี้บ่อย ๆ ก็เสียเวลา ก็เอาไปใส่เป็น script ใน package.json เป็นแบบนี้

"scripts": {
    "test": "./node_modules/karma-cli/bin/karma start --single-run"
}

ทีนี้ก็สั่ง npm run test ได้เลย

ลองดูตัวอย่างได้ที่

https://github.com/chonla/karma-demo

Leave a Reply