Belajar Capacitorjs - Testing & Debugging di Perangkat

#Pendahuluan

Setelah di episode 17 kita membangun arsitektur offline-first, pada episode ini kita membahas testing dan debugging — dua aktivitas yang memakan waktu paling banyak dalam siklus development mobile. Bug yang hanya muncul di perangkat fisik dan tidak bisa direproduksi di browser adalah tantangan unik Capacitor.

Mengapa testing di perangkat penting? Karena WebView berperilaku berbeda di setiap versi OS. Fitur yang works di Chrome desktop bisa broken di WebView Android 12. Testing di perangkat nyata adalah satu-satunya cara memastikan aplikasi berjalan dengan benar.

#Debugging di Perangkat

#Safari Web Inspector (iOS)

Buka Safari di macOS.
Safari → Preferences → Advanced → centang "Show Develop menu in menu bar".
Jalankan aplikasi di iOS Simulator.
Safari → Develop → [Nama Simulator] → [Nama App WebView].

Dari sini kalian bisa:

Elements: inspeksi DOM, ubah CSS secara live.
Console: jalankan JavaScript, lihat log dan error.
Network: analisis request/response, lihat payload.
Timeline: profiling performa, CPU, dan memory.

#chrome://inspect (Android)

Buka Chrome di komputer.
Navigasi ke chrome://inspect/#devices.
Pastikan emulator atau device terhubung via ADB (adb devices).
Klik "inspect" pada WebView yang sesuai.

Fitur yang tersedia:

Elements: DOM inspector.
Console: JavaScript console.
Network: network analysis.
Performance: CPU profiling.
Memory: heap snapshots.

#Native Logging

#iOS (Xcode)

Lihat log iOS dari terminal

xcrun simctl spawn booted log stream --level debug --predicate 'process == "MyApp"'

Di Xcode, buka Output Console untuk melihat semua log dari simulator/device. Gunakan NSLog() atau os_log() di kode Swift untuk logging native.

#Android (Logcat)

Lihat log Android dari terminal

adb logcat | grep -i "myapp"

Di Android Studio, buka tab Logcat untuk melihat semua log dari emulator/device. Gunakan Log.d(), Log.e() di kode Kotlin untuk logging native.

#Unit Testing

#Web Logic Testing

Unit test untuk logika bisnis berjalan normal dengan Vitest atau Jest:

Unit test dengan Vitest

import { describe, it, expect } from 'vitest';
import { formatCurrency } from './utils';
 
describe('formatCurrency', () => {
  it('formats IDR correctly', () => {
    expect(formatCurrency(1500000)).toBe('Rp 1.500.000');
  });
 
  it('handles zero', () => {
    expect(formatCurrency(0)).toBe('Rp 0');
  });
});

#Plugin Mocking

Untuk test kode yang memanggil plugin native:

Mock Capacitor plugins

import { vi } from 'vitest';
import { Preferences } from '@capacitor/preferences';
 
vi.mock('@capacitor/preferences', () => ({
  Preferences: {
    get: vi.fn().mockResolvedValue({ value: 'test-value' }),
    set: vi.fn().mockResolvedValue(undefined),
    remove: vi.fn().mockResolvedValue(undefined),
  },
}));
 
it('reads preference', async () => {
  const result = await Preferences.get({ key: 'test' });
  expect(result.value).toBe('test-value');
});

#End-to-End Testing

#Appium

Appium adalah framework e2e untuk aplikasi mobile native dan hybrid:

Setup Appium

npm install -g appium
appium driver install uiautomator2
appium driver install xcuitest

Appium test script

import { remote } from 'webdriverio';
 
async function testApp() {
  const driver = await remote({
    hostname: '127.0.0.1',
    port: 4723,
    capabilities: {
      platformName: 'Android',
      'appium:automationName': 'UiAutomator2',
      'appium:app': 'path/to/app.apk',
    },
  });
 
  // Cek elemen
  const title = await driver.$('~home-title');
  await expect(title).toHaveText('Welcome');
 
  // Tap tombol
  const button = await driver.$('~my-button');
  await button.click();
 
  await driver.deleteSession();
}

Warning

E2E testing di Capacitor membutuhkan build native terlebih dahulu. Pastikan app sudah di-build (npx cap sync) sebelum menjalankan test.

#Trace Bug Perangkat

Ketika bug hanya muncul di perangkat fisik:

Reproduce: jalankan di emulator dulu. Jika tidak muncul, coba di perangkat.
Log intensif: tambahkan console.log di setiap langkah.
Native logs: cek Xcode Console atau Logcat untuk error native.
WebView inspect: sambungkan Safari/Chrome debugger ke perangkat.
Bisect: isolasi perubahan terakhir yang mungkin menyebabkan bug.

Tip

Beberapa bug hanya muncul di perangkat karena perbedaan WebView version, memory constraint, atau gesture handling. Selalu test di minimal satu perangkat fisik sebelum release.

#Penutup

Pada episode 18 ini, kalian telah memahami:

Safari Web Inspector (iOS) dan chrome://inspect (Android) untuk debugging WebView.
Native logging: Xcode Console dan Android Logcat.
Unit test dengan Vitest/Jest + plugin mocking.
E2e testing dengan Appium untuk aplikasi hybrid.
Strategi trace bug perangkat: reproduce → log → inspect → bisect.

Di episode 19 selanjutnya, kita akan membahas CI/CD pipeline build aplikasi — GitHub Actions build signed IPA/APK, Fastlane untuk signing dan build, Ionic Appflow sebagai managed option, serta keamanan secrets di CI. Sampai jumpa!