Belajar Astro - Testing & Quality

#Pendahuluan

Kualitas situs tidak hanya diukur dari skor performa, tetapi juga dari keyakinan bahwa setiap perubahan tidak merusak yang sudah ada. Episode 16 ini membahas testing dan jaminan kualitas: dari unit test kecil hingga end-to-end test yang mengklik halaman seperti pengguna sungguhan.

Astro tidak memaksakan framework testing tertentu — kalian bebas memilih. Namun kombinasi yang paling umum dan solid adalah: Vitest untuk unit test, Playwright atau Cypress untuk integration test, ESLint dan TypeScript untuk static analysis, serta audit aksesibilitas dan SEO.

Pada akhir episode, kalian akan memiliki strategi pengujian berlapis yang bisa dijalankan di CI/CD — topik yang akan dilanjutkan di episode 19.

#Unit Testing Components dan Content Pages

#Memasang Vitest

Vitest adalah test runner untuk proyek Vite — pasangan alami Astro. Tambahkan sebagai dependency dev dan buat helper untuk me-render komponen:

npm install -D vitest

Buat file vitest.config.mts yang menambahkan konfigurasi dasar dan setup file, lalu tulis test pertama untuk sebuah komponen Astro:

Unit test komponen Card

import { describe, it, expect } from "vitest";
import Card from "../src/components/Card.astro";
import { render } from "./helpers/render";
 
describe("Card", () => {
  it("menampilkan judul dari props", async () => {
    const html = await render(Card, { judul: "Astro", deskripsi: "Cepat" });
    expect(html).toContain("Astro");
  });
});

expect(html).toContain("Astro") memverifikasi bahwa komponen merender judul dengan benar. Unit test komponen menjamin output HTML tetap sesuai saat kalian refactor.

#Menguji Halaman Konten

Untuk halaman yang bergantung pada content collections, uji melalui data sampel. Inisialisasi collection dengan konten fixture, lalu pastikan halaman menghasilkan daftar yang diharapkan. Unit test ini menjebak kesalahan yang muncul saat schema atau template berubah.

#Integration Testing dengan Playwright atau Cypress

#Playwright untuk Perilaku Nyata

Integration test menjalankan browser asli dan menguji alur yang dilalui pengguna. Playwright adalah pilihan yang populer karena dukungan semua browser dan API yang ekspresif:

npm install -D @playwright/test
npx playwright install

Contoh test navigasi dan interaksi:

Test E2E dengan Playwright

import { test, expect } from "@playwright/test";
 
test("navigasi ke halaman tentang", async ({ page }) => {
  await page.goto("http://localhost:4321");
  await page.getByRole("link", { name: "Tentang" }).click();
  await expect(page).toHaveURL(/tentang/);
  await expect(page.getByRole("heading", { name: "Tentang" })).toBeVisible();
});

Test di atas mengklik link "Tentang" lalu memastikan heading muncul. Pola getByRole mendorong penulisan HTML yang aksesibel.

#Playwright vs Cypress

Cypress juga solid untuk E2E, terutama dengan pengalaman debugging yang nyaman. Prinsip yang sama berlaku: jalankan server (npm run preview), buka halaman, dan uji perilaku utama seperti form, navigasi, dan hydration komponen. Pilih satu dan konsisten.

#Static Analysis dan Linting

#Menggabungkan TypeScript dan ESLint

Jalankan seluruh pemeriksaan statis dalam satu alur:

npx astro check
npx eslint src

npx astro check memeriksa tipe di file .astro dan .ts, sementara npx eslint src menegakkan aturan kualitas kode. Keduanya menangkap kelas kesalahan berbeda — jalankan keduanya.

#Menjadikan Gatling di CI

Atur agar pemeriksaan ini memblokir merge: jika astro check atau eslint menemukan error, pipeline gagal. Ini mencegah kode yang rusak masuk ke produksi.

#Accessibility Testing dan SEO Audits

#Axe untuk Accessibility

Axe adalah library deteksi masalah aksesibilitas yang bisa disisipkan ke Playwright:

Audit aksesibilitas di Playwright

import AxeBuilder from "@axe-core/playwright";
 
test("halaman beranda aksesibel", async ({ page }) => {
  await page.goto("http://localhost:4321");
  const hasil = await new AxeBuilder({ page }).analyze();
  expect(hasil.violations).toEqual([]);
});

AxeBuilder({ page }).analyze() melaporkan pelanggaran WCAG seperti kontras rendah atau tombol tanpa label. Jadikan hasil ini syarat untuk merge.

#SEO Audits

Gabungkan dengan Lighthouse SEO audit dari episode 15: meta description yang ada, heading yang hierarkis, canonical URL yang benar, dan sitemap yang valid. Pemeriksaan SEO dan aksesibilitas sebaiknya otomatis di pipeline.

#Penutup

Episode 16 membekali kalian strategi pengujian berlapis: unit testing komponen dan halaman konten dengan Vitest, integration testing dengan Playwright atau Cypress, static analysis dengan astro check dan ESLint, serta accessibility dan SEO audits yang otomatis.

Inti yang harus dibawa pulang:

• Vitest adalah test runner alami untuk project berbasis Vite.
• Unit test komponen memverifikasi output HTML dan props.
• Playwright menguji perilaku nyata dengan getByRole.
• astro check dan ESLint menangkap error sebelum merge.
• Axe mengotomatiskan audit aksesibilitas WCAG.
• Jalankan semua pengujian di CI agar kualitas terjaga otomatis.

Di episode 17 selanjutnya kita akan membahas architecture dan patterns: organisasi file dan struktur project yang scalable, pola UI reusable dan content architecture, komposisi halaman statis dengan island dinamis, serta pola project yang mudah dipelihara tim.