Blogger Jateng
Home / Tutorial

Pengujian Unit dan Debugging SPA Sudut

Membangun Single Page Application (SPA) yang kuat dengan Angular tidak hanya membutuhkan penulisan kode fungsional tetapi juga memastikan bahwa kode tersebut dapat diandalkan dan bebas dari cacat. Dua praktik penting yang membantu mencapai tujuan ini adalah pengujian unit dan debugging. Pengujian unit memverifikasi masing-masing komponen secara terpisah, sementara debugging membantu mengidentifikasi dan memperbaiki masalah secara efisien. Artikel ini membahas praktik dan alat terbaik untuk pengujian unit dan debugging Angular SPA.

Pentingnya Pengujian Unit

Pengujian unit melibatkan pengujian masing-masing komponen, layanan, dan fungsi untuk memastikan bahwa komponen, layanan, dan fungsi tersebut berperilaku seperti yang diharapkan. Hal ini memberikan beberapa manfaat, seperti:
  • Deteksi Bug Secara Dini: Deteksi dini berarti bug tidak menjadi masalah kritis.
  • Pemeliharaan Kode: Kode yang telah teruji dengan baik lebih mudah untuk diperbaiki dan diperluas tanpa menambahkan bug baru.
  • Keandalan yang Ditingkatkan: Meminimalkan terjadinya kesalahan saat runtime, mendorong stabilitas aplikasi yang lebih baik.
  • Dokumentasi yang Lebih Baik: Pengujian berfungsi sebagai dokumentasi dengan mengilustrasikan perilaku kode yang diinginkan.
sumber: medium.com

Cara Mengatur Pengujian Unit di Angular

Ketika Anda membuat aplikasi Angular, aplikasi ini memiliki kemampuan Unit Testing yang sudah tertanam di dalamnya, yang menggunakan Jasmine sebagai kerangka pengujian dan Karma sebagai pelari pengujian. Untuk memulai:

1. Pastikan Anda telah menginstal Angular CLI:

npm install -g @angular/cli

2. Jika Anda belum memilikinya, buatlah proyek Angular baru:

ng new my-angular-app
cd my-angular-app

3. Jalankan pengujian dengan:

ng test

Perintah ini memulai Karma, yang mengeksekusi unit test dalam pengaturan browser.

Menulis Unit Test di Angular

Di Angular, kita biasanya menulis unit test di file spec.ts di samping komponen atau layanan yang sedang diuji. TestBed dari @angular/core/testing adalah sebuah utilitas untuk mengonfigurasi dan menginisialisasi unit test di Angular.

Menguji Komponen

Contoh: Menguji CounterComponent sederhana.

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

describe('CounterComponent', () => {
  let component: CounterComponent;
  let fixture: ComponentFixture<CounterComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [CounterComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should increment counter', () => {
    component.increment();
    expect(component.count).toBe(1);
  });
});

Menguji Layanan

Contoh: Menguji AuthService.

import { TestBed } from '@angular/core/testing';
import { AuthService } from './auth.service';

describe('AuthService', () => {
  let service: AuthService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(AuthService);
  });

  it('should return true for authenticated user', () => {
    service.login();
    expect(service.isAuthenticated()).toBeTrue();
  });
});

Debugging SPA Sudut

Debugging adalah fase fundamental dalam pengembangan. Angular dilengkapi dengan banyak alat untuk membantu pengembang menemukan dan memperbaiki masalah dengan cepat.

Menggunakan Angular DevTools

Angular DevTools digunakan untuk memeriksa komponen Angular aplikasi Anda dan memantau deteksi perubahan saat Anda membuat aplikasi.

  1. Menginstal Angular DevTools untuk Chrome atau Firefox
  2. Tekan F12 atau Ctrl + Shift + I untuk membuka DevTools, lalu buka tab Angular.
  3. Periksa properti komponen dan statusnya.

Debugging dengan Pencatatan Konsol

Cara sederhana dan efektif untuk men-debug aplikasi Angular adalah dengan menggunakan pernyataan console.log().

ngOnInit() {
  console.log('Component initialized:', this.data);
}

Menggunakan Breakpoint untuk Browser

  1. Anda harus memuat F12 (Alat Pengembang di Chrome atau Edge),
  2. Buka tab Sumber.
  3. Temukan dan panggil file TypeScript.
  4. Klik pada nomor baris untuk mengatur breakpoint.
  5. Muat ulang halaman dan berinteraksi dengan aplikasi untuk mencapai breakpoint.

Melakukan debug dengan VS Code

VS Code memiliki lingkungan debugging yang kuat untuk aplikasi Angular.

1. Kami menyiapkan Debugger untuk ekstensi Chrome di VS Code.

2. Tempatkan konfigurasi di bawah ini di dalam peluncuran. json:

{

  "version": "0.2.0",

  "configurations": [

    {

      "type": "chrome",

      "request": "launch",

      "name": "Launch Chrome",

      "url": "http://localhost:4200",

      "webRoot": "${workspaceFolder}"

    }

  ]

}

3. Mulai debug dengan mengklik Jalankan dan Debug di VS Code.

Praktik Terbaik Pengujian Unit & Debugging

  • Susun-Tindak-Tegaskan: Tes harus disusun dengan baik agar mudah dibaca.
  • Tulislah Tes yang Kaya: Tangani berbagai kasus tepi dan kasus kegagalan.
  • Hindari Menguji Detail Implementasi:  Ekspektasi harus menunjukkan perilaku yang diharapkan dan bukan logika internal.
  • Gunakan Spies dan Mocks: Ganti dependensi dengan uji coba ganda dengan mata-mata Jasmine, misalnya
  • Tes Independen: Setiap pengujian harus dapat berjalan tanpa ketergantungan pada pengujian lain, atau Anda berisiko mengalami efek samping yang tidak diharapkan.
  • Memanfaatkan Laporan Cakupan Pengujian: Jalankan ng test --code-coverage untuk mengidentifikasi kode yang belum diuji.

Kesimpulan

Pengujian unit dan debugging sangat diperlukan untuk membangun Angular SPA yang andal. Dengan memanfaatkan alat seperti Jasmine, Karma, dan Angular DevTools, pengembang dapat memastikan aplikasi mereka kuat, mudah dipelihara, dan bebas dari bug. Dengan mengikuti praktik terbaik, tim dapat menyederhanakan pengembangan dan membuat perangkat lunak berkualitas tinggi yang memenuhi harapan pengguna.