lifelong learner — urip iku urup, currently working on accenture.

Cara melakukan unit testing pada angular dengan jasmine

0
Degananda.com -

Testing adalah aktivitas untuk mengevaluasi ekspektasi dari suatu hasil. Misalnya kita memiliki proses pertambahan A dan B. Maka kita akan test apakah jika 1+1 benar-benar menghasilkan angka dua. Jika menghasilkan angka dua maka proses tersebut sukses jika tidak maka proses tersebut dinyatakan gagal dan terdapat kesalahan kalkulasi.

Jika anda menggunakan dengan angular cli maka telah dibekali tools untuk melakukan testing. Pada kasus unit testing terdapat jasime. Sedangkan pada kasus end to end testing untuk browser menggunakan protactor. Ulasan ini akan membahas bagaimana melakukan unit testing pada angular dengan menggunakan jasime(bukan teh ya hhe tapi nama library javascript untuk testing).

Unit testing

Unit testing merupakan aktivitas mengevaluasi suatu fungsi pada source code atau kita dapat katakan melakukan test pada unit of code / bagian dari suatu kode. Contohnya kita memiliki kode pada app.component.ts seperti dibawah ini

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  keranjang : Array<any> = [
    {
      nama : 'Shampo',
      jumlah : 5
    }, 
    {
      nama  : 'Sabun',
      jumlah : 10
    }
  ];
  totalItem : number;

  constructor(){
    this.hitungItemKeranjang();
  }

  hitungItemKeranjang(){
    this.totalItem = this.keranjang.reduce(
      (prev, current,index) => prev.jumlah+current.jumlah
    )
  }

}

Kode diatas jika eksekusi akan menampilkan suatu tabel dengan daftar item sesuai dengan array yang telah didefinisikan. Selain itu pada bagian bawah tabel akan menampilkan jumlah kalkulasi dari total item tersebut. Sehingga berdasarkan kode diatas kita dapat identifikasi terdapat satu fungsi yang dapat di unit testing yaitu

  1. Fungsi hitungItemKeranjang() yang menghitung jumlah barang di dalam keranjang

Jika kode diatas dijalankan(menggunakan ng server) maka akan menghasilkan tampilan seperti ini pada browser.

Goal

Goal kita adalah melakukan unit test terhadap fungsi tersebut (hitungItemKeranjang). Kita memiliki shampo 5 dan sabun 15 maka seharusnya operasi tersebut akan menghasilkan 15. Jika kita lihat pada browser saat dieksekusi memang benar 15, tetapi yang kita lakukan adalah dengan menggunakan indra mata kita. Sekarang kita akan menggunakan jasmine untuk memastikan bahwa total item pada keranjang tersebut adalah 15.

Implementasi unit testing

Menulis unit testing di spec.ts

Kode diatas berada pada app.component.ts yang mana setiap komponen pada angular akan dibekali dengan file .spec.ts untuk melakukan unit testing dengan jasmine. Perhatikan gambar dibawah ini

setiap komponen pasti memiliki file html, ts dan juga spec.ts. Lalu bukalah file spec.ts tersebut jika terdapat isi maka silahkan anda hapus karena kita akan menulis unit testing sesuai dengan kasus kita diatas yakni mengecek operasi kalkulasi yang menghitung jumlah item pada keranjang.

pada app.component.spec.ts tuliskan kode dibawah ini (kode untuk unit testing)

import { AppComponent } from './app.component';
describe('Testing App component', () => {
  it('perhitungan benar', ()=> {
    let app = new AppComponent();
    expect(app.totalItem).toBe(15);
  })
})

berikut adalah rincian penjelasan kode diatas

  • Pertama kita wajib mengimport komponen yang hendak kita testing. Sesuaikan dengan nama spec.ts agar tidak membingungkan. app.component.spec.ts berarti untuk melakukan testing terhadap app.component.ts. Proses import ini dilakukan agar kita dapat mengakses variabel maupun fungsi yang ada pada class component tersebut. Nantinnya variabel atau fungsi itulah yang akan kita testing.
  • Langkah kedua kita deskripsikan dan tentukan kondisi ekspektasi. Contoh diatas ekspektasi kita adalah variable totalItem bernilai 5 dan kita korelasikan dengan fungsi toBe() untuk menguji/mengevaluasi ekspektasi tersebut.

Menjalankan testing

Sama halnya dengan saat kita menghosting aplikasi angular pada local server dengan lite web server pada port tertentu maka testing juga demikian. Angular akan menjalankan karma pada port tertentu. Tujuannya adalah development server dan testing server berjalan bersamaan. Sehingga proses develope dan testing dapat berjalan secara pararel. Perintah yang digunakan adalah

ng test

tunggu beberapa saat seperti menunggu ng serve maka akan terbuka satu window dan aplikasi pada port tertentu yang akan melakukan testing sesuai spesifikasi unit testing yang kita tulis. Contohnya pada spec testing diatas akan menghasilkan seperti dibawah ini

kita lihat bahwa hasil testing yang dikeluarkan adalah “gagal”  atau failure karena kita berekspektasi bahwa fungsi perhitungan item pada keranjang tersebut menhasilkan angka 5 (tobe(5). Sekarang kita coba mengganti ekspektasi kita menjadi toBe(15).

Maka tidak ada spesifikasi testing yang gagal karena spec test dan kondisi real aplikasi telah match (cocok). Itulah sedikit penjelasan sederhana mengenai unit testing pada angular dengan menggunakan karma serta jasmine (bundled di angular-cli). Semoga dapat bermanfaat bagi kita semua.

Terimakasih.