Friday, December 15, 2017

Set-up Karma pada Grunt Task Runner


Pada kesempatan kali ini, saya akan membahas mengenai cara setting Karma Test Runner yang dapat di run melalui Grunt Javascript Task Runner. Sebelum melakukan hal tersebut ada baiknya kita mengetahui apa itu Karma dan Grunt. 


Singkatnya, Karma adalah sebuah Javascript Test Runner yang dibuat oleh Angular team, Karma digunakan pada Unit Testing sebuah aplikasi Javascript, khususnya Angular. Sedangkan Grunt adalah sebuah Javascript Task Runner dan sebagai build tools aplikasi javascript.

Yang perlu dipahami terlebih dahulu adalah file settingan pada Gruntfile.js. Gruntfile.js merupakan script yang ditulis untuk melakukan task-task pada project yang kita buat. Seperti menjalankan hot swap dengan melakukan watch terhadap segala perubahan file hingga task melakukan build otomatis dengan me-minified semua file pada project kita. Semua task pada Grunt bisa kita buat sebebas mungkin, namun dengan membutuhkan dependency lain untuk menjalankan suatu task yang dibuat.

Contoh task Grunt yang ada pada file Gruntfile.js:



Nah kemudian untuk membuat task Grunt yang menjalankan service Karma, pertama kita harus menginstall Karma server terlebih dahulu dengan command dibawah ini melalui npm:

npm install karma --save-dev.

Setelah karma terinstall, buatlah konfigurasi karma pada grunt.initConfig seperti dibawah ini:


perlu diketahui bahwasannya, atribute configFile merupakan sebuah file config karma yang bisa dibuat melalui command karma init pada folder test.

kurang lebih seperti ini gambaran file karma.conf.js:


Setelah itu pada list of files [], kita harus memasukan file-file yang dibutuhkan pada unit testing tersebut. mulai dari file angular, dependency-dependency lainnya dan jangan lupa test script yang akan masuk kedalam skenario pengujian kita.

untuk menjalankannya pada grunt kita hanya melakukan command dibawah ini:

grunt test

dan hasilnya seperti ini....


Oke cukup sekian penjelasannya mengenai Grunt dan Karma. Sampai jumpa di lain kesempatan dan 
Happy coding :D

References:










No comments:

Post a Comment