DESIGN-SYSTEM UI-UX FRONTEND-DEVELOPMENT TESTING TEST-AUTOMATION VISUAL-REGRESSION-TESTING STORYBOOK ACCESSIBILITY CI-CD CODE-QUALITY DEVELOPER-EXPERIENCE

Otomatisasi Kualitas UI untuk Design System: Membangun Pipeline Testing Komponen yang Efektif

⏱️ 10 menit baca
👨‍💻

Otomatisasi Kualitas UI untuk Design System: Membangun Pipeline Testing Komponen yang Efektif

1. Pendahuluan

Pernahkah Anda bekerja di proyek di mana setiap rilis baru selalu memunculkan “bug visual” yang aneh, atau perubahan kecil di satu komponen malah merusak tampilan komponen lain? Jika ya, Anda tidak sendirian. Tantangan ini sering muncul, terutama saat kita membangun aplikasi web berskala besar dengan tim developer yang terus berkembang.

Di sinilah Design System berperan penting. Sebagai fondasi konsistensi visual dan pengalaman pengguna, design system menyediakan kumpulan komponen UI yang reusable, terdefinisi dengan baik, dan didokumentasikan. Namun, memiliki design system saja tidak cukup. Kualitas komponen-komponen di dalamnya harus terus dijaga. Bayangkan jika salah satu komponen kunci, seperti Button atau Input, memiliki bug visual atau masalah aksesibilitas. Dampaknya bisa menyebar ke seluruh aplikasi yang menggunakan design system tersebut.

Masalahnya, pengujian manual untuk setiap komponen, di setiap kondisi, dan di setiap browser adalah mimpi buruk yang memakan waktu dan rentan kesalahan. Inilah mengapa kita perlu mengotomatiskan pengujian kualitas UI untuk design system kita. Artikel ini akan memandu Anda membangun pipeline testing yang efektif, memastikan setiap komponen Anda tidak hanya fungsional, tetapi juga konsisten secara visual dan aksesibel.

🎯 Tujuan artikel ini:

Mari kita mulai!

2. Pilar Kualitas Komponen UI: Apa yang Perlu Kita Uji?

Sebelum kita masuk ke implementasi, penting untuk memahami aspek-aspek apa saja dari komponen UI yang perlu kita uji. Ada beberapa pilar utama yang harus menjadi fokus kita:

2.1. Fungsionalitas (Unit & Integration Testing)

Ini adalah dasar. Kita perlu memastikan bahwa logika internal komponen berfungsi dengan benar. Apakah props diterima dengan benar? Apakah state internal berubah sesuai ekspektasi? Apakah event di-emit dengan benar?

2.2. Konsistensi Visual (Visual Regression Testing)

Ini adalah aspek yang paling sering terlewatkan. Perubahan kecil pada CSS atau HTML di satu komponen bisa menyebabkan “regresi visual” di tempat lain. VRT membandingkan screenshot UI Anda dengan baseline yang sudah disetujui untuk mendeteksi perubahan piksel-demi-piksel.

2.3. Aksesibilitas (Automated Accessibility Testing)

Membangun web yang inklusif adalah keharusan. Pengujian aksesibilitas memastikan bahwa komponen Anda dapat digunakan oleh semua orang, termasuk mereka yang memiliki disabilitas. Kita bisa mengotomatiskan banyak pemeriksaan dasar.

2.4. Interaksi (End-to-End Testing)

Meskipun fokus kita pada komponen individual, terkadang kita perlu menguji bagaimana komponen berinteraksi dengan komponen lain atau dalam alur pengguna yang lebih besar. Untuk design system, ini bisa berarti menguji interaksi kompleks seperti dropdown, modal, atau form multi-langkah.

Dalam artikel ini, kita akan lebih fokus pada Visual Regression Testing dan Automated Accessibility Testing karena keduanya adalah kunci untuk menjaga kualitas UI di design system dan seringkali diabaikan dalam pipeline testing tradisional.

3. Fondasi: Storybook sebagai Lingkungan Pengembangan & Dokumentasi

Storybook adalah tool yang sangat powerful untuk mengembangkan, mendokumentasikan, dan menguji komponen UI secara terisolasi. Ini adalah fondasi yang ideal untuk design system Anda. Setiap “story” di Storybook mewakili state atau variasi tertentu dari sebuah komponen.

Jika Anda belum familiar dengan Storybook, Anda bisa membacanya di Storybook.js: Membangun dan Mendokumentasikan Komponen UI Secara Efisien.

📌 Tips Praktis:

// src/components/Button/Button.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: { control: 'radio', options: ['primary', 'secondary'] },
    size: { control: 'radio', options: ['small', 'medium', 'large'] },
    disabled: { control: 'boolean' },
    loading: { control: 'boolean' },
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    children: 'Primary Button',
    variant: 'primary',
  },
};

export const Secondary: Story = {
  args: {
    children: 'Secondary Button',
    variant: 'secondary',
  },
};

export const Disabled: Story = {
  args: {
    children: 'Disabled Button',
    disabled: true,
  },
};

export const Loading: Story = {
  args: {
    children: 'Loading Button',
    loading: true,
    variant: 'primary',
  },
};

export const LongText: Story = {
  args: {
    children: 'Ini adalah tombol dengan teks yang sangat panjang sekali',
    variant: 'primary',
  },
};

Setiap story ini akan menjadi “titik pengujian” kita untuk visual regression dan aksesibilitas.

4. Memastikan Konsistensi Visual dengan Visual Regression Testing (VRT)

Visual Regression Testing (VRT) adalah cara paling efektif untuk menangkap perubahan UI yang tidak disengaja. Ini bekerja dengan mengambil screenshot dari setiap story komponen Anda dan membandingkannya dengan screenshot “baseline” yang telah disetujui. Jika ada perbedaan piksel yang signifikan, tes akan gagal.

Ada beberapa opsi untuk VRT dengan Storybook:

4.1. Chromatic (Cloud-based)

Chromatic adalah layanan cloud yang dibuat oleh tim Storybook. Ini adalah solusi VRT yang paling terintegrasi dan mudah digunakan untuk Storybook.

4.2. Storybook Test Runner (Self-hosted)

Storybook menyediakan @storybook/test-runner yang memungkinkan Anda menjalankan tes di semua stories Anda menggunakan Playwright atau Puppeteer. Anda bisa mengombinasikannya dengan jest-image-snapshot atau library VRT lainnya untuk membandingkan screenshot secara lokal atau di CI/CD Anda.

⚠️ Penting: Pastikan Anda sudah membaca artikel Visual Regression Testing: Memastikan Tampilan UI Anda Tetap Sempurna untuk pemahaman dasar VRT.

Mari kita coba setup VRT dengan Storybook Test Runner dan jest-image-snapshot:

  1. Instalasi Dependensi:

    npm install --save-dev @storybook/test-runner jest-image-snapshot playwright @playwright/test
# atau yarn add --dev ...

  2. Buat File Konfigurasi VRT: Buat file jest-playwright.config.js untuk konfigurasi Playwright:

    // jest-playwright.config.js
module.exports = {
  browsers: ['chromium'], // Atau 'firefox', 'webkit'
  launchOptions: {
    headless: true, // Jalankan tanpa UI browser
  },
};

    Dan jest.config.js (jika belum ada) untuk jest-image-snapshot:

    // jest.config.js
module.exports = {
  testMatch: ['**/*.test.ts', '**/*.test.tsx'], // Sesuaikan dengan file test Anda
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  testEnvironment: 'jest-playwright',
};

    Buat jest.setup.js untuk mengaktifkan jest-image-snapshot:

    // jest.setup.js
const { toMatchImageSnapshot } = require('jest-image-snapshot');

expect.extend({ toMatchImageSnapshot });

  3. Buat File Test untuk Storybook: Storybook Test Runner akan secara otomatis menemukan stories Anda. Anda hanya perlu membuat file test yang memanggil fungsi expect dengan toMatchImageSnapshot. Biasanya, Anda bisa membuat satu file test generik atau per komponen.

    // storybook.test.ts
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import { test, expect } from '@playwright/test'; // Menggunakan Playwright test runner

expect.extend({ toMatchImageSnapshot });

// Ini adalah contoh sederhana untuk VRT.
// Storybook Test Runner akan mengambil screenshot untuk setiap story secara internal.
// Anda bisa menyesuaikan ini untuk mengambil screenshot secara manual jika diperlukan,
// atau gunakan test runner yang lebih terintegrasi seperti yang dijelaskan di dokumentasi Storybook.

// Untuk cara yang lebih terintegrasi dengan Storybook Test Runner,
// biasanya Anda tidak menulis test secara eksplisit untuk setiap story.
// Test Runner akan melakukan ini secara otomatis dengan konfigurasi yang tepat.
// Namun, jika Anda ingin kontrol lebih, ini adalah contoh struktur:

test('visual regression for Button Primary', async ({ page }) => {
  await page.goto('http://localhost:6006/?path=/story/components-button--primary'); // URL Storybook Anda
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchImageSnapshot({
    customSnapshotIdentifier: 'button-primary',
  });
});

test('visual regression for Button Secondary', async ({ page }) => {
  await page.goto('http://localhost:6006/?path=/story/components-button--secondary');
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchImageSnapshot({
    customSnapshotIdentifier: 'button-secondary',
  });
});

    ⚠️ Catatan: Cara di atas adalah contoh VRT manual dengan Playwright yang bisa Anda adaptasi. Untuk integrasi penuh dengan @storybook/test-runner, Anda biasanya menjalankan perintah test-storybook yang akan mengotomatiskan pengambilan screenshot untuk semua stories dan membandingkannya.

  4. Menjalankan VRT: Pertama, jalankan Storybook Anda: npm run storybook. Kemudian, jalankan test runner: npm run test-storybook -- --watch --snapshot-update.

    • --snapshot-update: Gunakan ini pertama kali untuk membuat baseline screenshot. Setelah itu, hapus flag ini untuk membandingkan dengan baseline.

✅ Best Practices VRT:

5. Membangun UI Inklusif dengan Automated Accessibility Testing

Aksesibilitas adalah kunci untuk menjangkau audiens yang lebih luas. Untungnya, banyak masalah aksesibilitas umum dapat dideteksi secara otomatis.

⚠️ Penting: Aksesibilitas tidak bisa 100% diotomatiskan. Pengujian manual (misalnya, navigasi keyboard, penggunaan screen reader) tetap penting. Namun, automated testing adalah langkah awal yang sangat baik. Anda bisa membaca lebih lanjut di Menguji Aksesibilitas Web: Panduan Praktis untuk Developer Membangun Pengalaman Inklusif.

Kita bisa mengintegrasikan axe-core dengan Storybook menggunakan @storybook/addon-a11y.

  1. Instalasi Addon: