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:

https://karma-runner.github.io/1.0/index.html

https://gruntjs.com/

https://gruntjs.com/plugins/karma

Grunt Vs Gulp

Grunt dan Gulp seperti yang kita tau adalah sama - sama  automation tools berbasis command line interface yang di bangun menggunakan Node.js. Automation tools ini berfungsi untuk menjalankan beberapa tugas yang sifatnya berulang seperti minification, kompilasi, unit test dan lain sebagainya. Beberapa template AngularJs yang di temui, ada yang menggunakan Grunt sebagai kompilasi nya dan ada juga yang menggunakan Gulp, lalu apa yang membedakan??

Grunt :

• Saat ini memiliki lebih dari 4000 plugin
• Grunt dapat meminifies Javascript, file CSS, pengujian file, kompilasi file CSS prepocessor (SASS, LESS), dll
• Grunt mengurangi kemungkinan mendapatkan kesalahan saat melakukan tugas yang berulang

Gulp :

• Konfigurasi dari Gulp lebih simpel daripada task runner lainnya
• Gulpjs telah built-in untuk setiap plugin yang dibutuhkan berbeda dengan grunt
• Otomatis refresh halaman setelah mengedit file sumber

Dari konfigurasi, file Gruntfile.js dan Gulpfile.js juga sangat berbeda. File Gulpfile.js sangat simpel dan mudah untuk di pahami karena tidak terlalu banyak, sedangkan Gruntfile.js terlalu ribet dan panjang juga sangat detail.

gulpfile.js

 

gruntfile.js

Konfigurasi Gulp lebih mudah dibaca, banyak pula yang merasa bahwa kode Grunt lebih mudah untuk menulis, tergantung dari mana yang lebih memenuhi kebutuhan si developer. 

Dari segi kecepatan, Gulp lebih cepat di banding Grunt. Sebuah tes kecepatan yang dilakukan oleh tmwtech menunjukkan perbandingan antara Gulp dan Grunt dalam hal jumlah waktu yang dibutuhkan untuk melakukan kompilasi Sass. Hasil penelitian menunjukkan bahwa Gulp secara signifikan lebih cepat dengan hanya mengambil 1,27 detik vs Grunt ini 2,348 detik.

Alasan untuk keunggulan kecepatan Gulp saat ini adalah ke fakta bahwa Gulp menggunakan streams dan menangani tugas-tugas dalam memori, yang berarti hanya satu file ditulis. Selanjutnya, Gulp dapat memproses beberapa tugas pada waktu yang sama, tetapi Grunt biasanya hanya akan menangani satu tugas pada satu waktu.

Di bawah ini terdapat gambar bagaimana perbedaan Grunt dan Gulp bila di persentasi kan dengan angka.

Grunt lebih banyak di download, tetapi Gulp lebih banyak di gunakan oleh developer. Melihat hasil presentase dan keterangan di atas, Grunt memiliki beberapa keunggulan karena memang Grunt lebih dulu lahir daripada Gulp. Tetapi Gulp juga lebih sederhana untuk di pelajari dan implementasi, jadi tidak ada salah nya bila di gunakan, tapi ingat ini tergantung kebutuhan project juga, tidak perlu memaksakan menggunakan Gulp atau pun Grunt.  Semoga informasi ini dapat menjadikan bahan refernsi, dan selamat mencoba :D

Starting AngularJS Development with Yeoman, Grunt and Bower Part 2

Sebelumnya pada part 1 kita sudah mengenerate project menggunakan angular generator dan sudah menambahkan library angular-bootstrap. Maka pada kesempatan kali ini kita akan menambahkan beberapa perubahan.
Mari kita tambahkan library AngularUI Boostrap yang sudah kita include di part 1. Dikarenakan Bower hanya package manager, dia tidak bertanggung jawab untuk menambahkan file ke index.html. Kita harus menambahkan itu sendiri.
Jadi buka app/index.htmldan tambahkan line code berikut.

 <script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>  

Setelah itu kita harus menambahkan ui-boostrap dependency ke Angular module kita. Buka app/scripts/app.js dan tambahkan ui.bootstrap module sebagai dependency.
/app/scripts/app.js

 'use strict';  
 /**  
  * @ngdoc overview  
  * @name simpleAngularApp  
  * @description  
  * # simpleAngularApp  
  *  
  * Main module of the application.  
  */  
 angular  
  .module('simpleAngularApp', [  
   'ngAnimate',  
   'ngAria',  
   'ngCookies',  
   'ngResource',  
   'ngRoute',  
   'ngSanitize',  
   'ui.bootstrap'  
  ])  
  .config(function ($routeProvider) {  
   $routeProvider  
    .when('/', {  
     templateUrl: 'views/main.html',  
     controller: 'MainCtrl'  
    })  
    .otherwise({  
     redirectTo: '/'  
    });  
  });  

Kita harus melakukan beberapa perubahan pada view kita.
View: app/views/main.html

 <div class="hero-unit">  
   <h1>'Allo, 'Allo!</h1>  
   <p>You now have</p> <!-- kita memindahkan ng-repeat kedalam directive   
   modal yang dibawa oleh angular bootstrap-->  
   <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>  
   <!--ng-click sejenis event onClick dia akan melakukan sesuatu,   
   pada kasus ini ketika di klik angular akan membuka method open-->  
   </div>  
   <p>installed.</p>  
   <h3>Enjoy coding! - Yeoman</h3>  
   <!-- script disini digunakan untuk mengenerate template modal -->  
   <script type="text/ng-template" id="myModalContent.html">  
     <div class="modal-header">  
       <h3 class="modal-title">I'm a modal!</h3>  
     </div>  
     <div class="modal-body">  
       <ul>  
     <!-- ng-repeat dipindahkan kedalam sini -->  
         <li ng-repeat="item in items">  
           <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>  
         </li>  
       </ul>  
       Selected: <b>{{ selected.item }}</b>  
     </div>  
     <div class="modal-footer">  
       <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>  
       <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>  
     </div>  
   </script>  
  </div>  

Controller : app/script/controller/main.js

 'use strict';  
 /**  
  * @ngdoc function  
  * @name simpleAngularApp.controller:MainCtrl  
  * @description  
  * # MainCtrl  
  * Controller of the simpleAngularApp  
  */  
 angular.module('simpleAngularApp')  
  .controller('MainCtrl', ['$scope','$uibModal','$log',function ($scope,$uibModal,$log) {  
  $scope.items = [  
     'HTML5 Boilerplate',  
     'AngularJS',  
     'Karma',  
     'SitePoint'  
    ];  
   $scope.animationsEnabled = true;  
  $scope.open = function (size) {  
   var modalInstance = $uibModal.open({  
    animation: $scope.animationsEnabled,  
    templateUrl: 'myModalContent.html',  
    controller: 'ModalInstanceCtrl',  
    size: size,  
    resolve: {  
     items: function () {  
      return $scope.items;  
     }  
    }  
   });  
   modalInstance.result.then(function (selectedItem) {  
    $scope.selected = selectedItem;  
   }, function () {  
    $log.info('Modal dismissed at: ' + new Date());  
   });  
  };  
  $scope.toggleAnimation = function () {  
   $scope.animationsEnabled = !$scope.animationsEnabled;  
  };  
 }]);  
 angular.module('simpleAngularApp').controller('ModalInstanceCtrl',['$scope','$uibModalInstance','items', function ($scope, $uibModalInstance, items) {  
  $scope.items = items;  
  $scope.selected = {  
   item: $scope.items[0]  
  };  
  $scope.ok = function () {  
   $uibModalInstance.close($scope.selected.item);  
  };  
  $scope.cancel = function () {  
   $uibModalInstance.dismiss('cancel');  
  };  
 }  
  ]);  

Kita sudah menggunakan beberapa bootstrap css class, membuat modal dialog menggunakan bawaan dari angular-bootstrap dan memindahkan ng-repeat ke dalam modal dialog.
Setelah ini jalankan code dibawah untuk menjalankan angular apps. Jangan lupa jalankan ini pada root folder project kalian dimana terdapat Gruntfile.js dll

 grunt serve  

Berikut tampilan nya jika dijalankan.

Sedangkan jika kita akan meminified nya jalankan code dibawah, hasilnya akan berada di dalam folder dist dan jalankan kode ini pada root folder project kalian dimana terdapat Gruntfile.js dll

 grunt clean build  

Sekian dahulu dari saya.
Semoga Bermanfaat !

Starting AngularJS Development with Yeoman, Grunt and Bower Part 1

Pada blog ini saya akan membahas tentang AngularJS. Salah satunya adalah membuat skeleton struktur AngularJS app dengan menggunakan Yeoman, kemudian menggunakan Grunt untuk mempercepat proses development.
Pertama-tama yang harus kita lakukan adalah menginstall Yeoman, Grunt dan Bower. Untuk mempermudah kita akan memakai Node Package Manager untuk melakukan nya sekaligus. Jalankan code berikut di dalam terminal.

 npm install -g yo grunt-cli bower  

Sambil menunggu instalasi, saya akan menjelaskan sedikit apa saja yang akan kita pakai. Yeoman digunakan untuk mengenerate skeleton app. Yeoman akan membuat basic folder, files, dan konfigurasi untuk mempermudah pekerjaan kita. Salah satu fitur terbaik dari Yeoman adalah kemampuan untuk menggunakan custom generator. Salah satu generator yang akan dipakai adalah AngularJS generator.
Jika proses instalasi di atas sudah selesai. Jalankan code berikut untuk menginstall AngularJS generator.

 npm install -g generator-angular  

Jika sudah, kita sudah bisa mengenerate AngularJS Application. Untuk mengenerate jalankan code berikut.

 yo angular  

Pada saat menjalankan generator, generator tersebut akan menanyakan beberapa pertanyaan tentang apa saja yang akan di include pada aplikasi Angular yang akan di generate.

Pada gambar di atas saya membuat aplikasi angular pada folder SimpleAngular. Setelah menjawab beberapa pertanyaan tersebut, Yeoman akan mengenerate semua file dan konfigurasi yang kita butuhkan. 
Berikut adalah yang digenerate oleh Yeoman.

app/directory
app directory berisi angular app. Di dalam nya terdapat html, css dan javascript. Disinilah kalian akan menghabiskan banyak waktu saat proses development.

package.json
File package.json membantu npm untuk mengindentifikasi project kita dan juga menghandle semua dependencies nya.

node_modules
Di folder ini terdapat semua node module yang kalian butuhkan oleh angular.

Gruntfile.js
File ini merupakan file javascript untuk menkonfigurasi project yang dilakukan oleh task apapun atau plugin apapun yang dibutuhkan di dalam project. Di file inilah kita akan mengkonfig spesifik direktori ketika akan membuild.

component.json
File ini digunakan untuk memberitahu dependencies kepada Bower package manager.
File ini dipakai untuk mendistribusi config options ke bower.

Karma files
Karma adalah sebuah framework untuk testing. Kita akan menggunakannya untuk menjalankan test pada Angular app.
Bower - Package Manager untuk Web
Sebelum kita menggunakan bower, ada sedikit configurasi yang harus kita tambahkan sendiri. Buka file .bowerrc

Pada gambar di atas adalah isi dari file .bowerrc yang belum di edit. Tambahkan code berikut.

 ,"json":"bower.json"  

Sehingga isi file tersebut menjadi :

Yang dilakukan pada code tersebut adalah memberitahu Bower untuk menggunakan package bower.json bagaimana menginstall package itu. Jika sudah jalankan code berikut untuk meng-fetch dependencies.

 npm install  

 bower install  

Bower  adalah package manager. Bower akan membantu kita untuk menemukan dan menginstall favorite CSS Frameworks, javascript libraries dan plugins hanya dengan menggunakan beberapa command yang mudah.
Sekarang kita akan menginstall Angular Boostrap. Jalankan code berikut untuk menambahkan library angular boostrap menggunakan Bower.

 bower install angular-bootstrap --save

--save berarti memberitahu bower untuk menambahkan angular-bootstrap ke file bower.json sebagai dependency.
Content pada app/directory

index.html
Ini merupakan core HTML page dari app kalian.

scripts/ directory
Disini adalah tempat javascript apps kalian berada.

styles/ directory
Disini adalah tempat css/sass kalian berada.

Views
Disini adalah tempat halaman template kalian berada.

Modul: /app/scripts/app.js

'use strict';

/**
* @ngdoc overview
* @name simpleAngularApp
* @description
* Main module of the application.
* # simpleAngularApp
**/

//Disini kita mengeset angular module
angular.module('simpleAngularApp', [
    'ngAnimate',
    'ngAria',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize'
  ])
  .config(function ($routeProvider) {

//Disini kita mengconfig routerProvider
//route provider dipakai untuk meng-config app routes kita.
//views/main.html template menggunakan MainCtrl sebagai controllernya.
//config dibawah simpelnya jika kita membuka '/' itu akan membuka
//Method lain yang tidak terdaftar akan teridirect ke home.

    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }); 

Controller: /app/scripts/controllers/main.js

 'use strict';

/**
 * @ngdoc function
 * @name simpleAngularApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the simpleAngularApp
 */

angular.module('simpleAngularApp') //ini cara memasukkan controller ke dalam module
//Kita menginject $scope ke dalam dependency Angular

.controller('MainCtrl', ['$scope',function ($scope) {
//Pada kasus ini kita menambahkan collection awesomeThings untuk di display di view.
//Apapun yang kita masukkan ke dalam scope akan bisa ditampilkan di view.

 $scope.items = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Karma',
        'SitePoint'
      ];
}]);

View: app/views/main.html

  <div class="hero-unit">  
   <h1>'Allo, 'Allo!</h1>  
   <p>You now have</p>  
   <ul>  
     <!-- Disini kita menggunakan AngularJS Directive  
     untuk menghitung jumlah item yang di declare di items   
     dan menampilkan mereka sebagai list item menggunakan tag {{}} -->  
     <li ng-repeat="thing in items">{{thing}}</li>  
   </ul>  
   <p>installed.</p>  
   <h3>Enjoy coding! - Yeoman</h3>  
  </div>  

View: app/index.html

 [html] <!doctype html>  
  <html>  
   <head>...</head>  
   <!-- ng-app directive memberitahu angular module mana yang kita pakai.  
   Pada kasus ini yang kita define di scripts/app.js -->  
   <body ng-app="simpleAngularApp">   
    <!-- ng-view directive menspesifik template view yang akan di load di div ini-->  
    <div class="container" ng-view></div>  
    <!-- Disini kita load AngularJS dan AngularJS resource komponen -->  
     <script src="bower_components/jquery/dist/jquery.js"></script>  
     <script src="bower_components/angular/angular.js"></script>  
     <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>  
     <script src="bower_components/angular-animate/angular-animate.js"></script>  
     <script src="bower_components/angular-aria/angular-aria.js"></script>  
     <script src="bower_components/angular-cookies/angular-cookies.js"></script>  
     <script src="bower_components/angular-resource/angular-resource.js"></script>  
     <script src="bower_components/angular-route/angular-route.js"></script>  
     <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>  
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>   
    <!-- Disini kita memasukan script yang kita gunakan -->  
    <!-- build:js scripts/scripts.js -->  
    <script src="scripts/app.js"></script>  
    <script src="scripts/controllers/main.js"></script>  
    <!-- endbuild -->  
   </body>  
  </html>  

Sampai disini kita sudah membuat Angular App dan sudah sedikit tahu tentang komponen komponen yang di generate. Berikut tampilan nya jika dijalankan.

Pada kesempatan berikut nya kita akan sedikit mengedit dari apa yang sudah di generate. Bersambung ke part 2...