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

Cara melakukan end to end testing pada angular dengan protractor

0
Degananda.com -

Pada ulasan sebelum ini kita telah membahas cara melakukan unit testing dengan menggunakan karma dan jasime. Maka tak lengkap jika tidak dibahas pula jenis testing yang lain pada angular yakni end to end testing atau biasannya kita singkat dengan sebutan e2e.

Jika anda menggunakan angular-cli maka setelah membuat project baru dengan ng new pada project tersebut anda akan menemukan folder e2e. Ini adalah lokasi untuk melakukan end 2 end test di angular.

End to end testing

Apa itu end to end testing ? end to end (e2e) testing adalah proses evaluasi terhadap lingkungan operasi yang meliputi berbagai domain mulai dari jaringan, database, aplikasi, dan lain sebagainnya. Pada angular e2e ini akan menguji lingkungan aplikasi dan browser. Karena angular berjalan pada sisi client. Pada intinnya end to end testing ini akan berfokus pada elemen-elemen yang ada pada browser (DOM).

Case

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. Kode diatas jika dijalankan dibrowser akan menampilkan hasil seperti berikut ini

untuk bagian view kode yang digunakan adalah seperti ini

kode diatas dibuat untuk mendemokan unit testing maka setiap element td pada tr diberikan class. Nantinnya kita akan melakukan end to end testing untuk mengecek apakah ada elemen td yang memiliki id berupa “shampo”. Jika ada maka end to end testing berhasil.

Goal

Kita akan menguji apakah pada halaman aplikasi angular kita terdapat text Shampo.

kita dapat melihat bahwa pada DOM terdapat elemen dengan classname “Shampo” seharusnya test kita nanti akan berhasil.

Implementasi

langsung saja langkah pertama adalah membuka folder e2e dan kemudian lihat file app.e2e-spec.ts. File ini berfungsi untuk menuliskan spec testing seperti yang kita lakukan pada unit testing sebelumnya.

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

kode spec testing diatas akan menguji apakah pada browser terdapat elemen <td> yang memiliki class “shampo”. Jika ada maka testing berhasil jika tidak maka testing gagal. Selanjutnya kita jalankan end 2 end (e2e) test server angular dengan menggunakan perintah

ng e2e

setelah ini tunggu beberapa saat hingga browser membuka server untuk testing pada port tertentu. Hasil testing dapat anda lihat diterminal. Karena browser yang digunakan untuk e2e akan secara otomatis tertutup. Berikut ini adalah hasilnya

done itulah proses end to end testing. Semoga dapat memberikan manfaat untuk semuannya

terimakasih.