🌐 E2E Testing di Vue.js

End-to-End (E2E) testing adalah metode pengujian aplikasi secara menyeluruh — dari input pengguna hingga hasil yang ditampilkan di browser. Di Vue.js, alat paling umum untuk E2E testing adalah Cypress.

---

🔧 1. Apa Itu Cypress?

Cypress adalah framework modern untuk pengujian UI berbasis browser. Dengan Cypress, kamu bisa menulis test yang mensimulasikan interaksi nyata pengguna, seperti klik tombol, isi form, navigasi halaman, dll.

---

📦 2. Instalasi Cypress

a. Jika pakai Vue CLI:

vue add e2e-cypress

b. Manual:

npm install --save-dev cypress

Tambahkan script di package.json:

"scripts": {
  "test:e2e": "cypress open"
}

---

📂 3. Struktur Direktori

Setelah instalasi, folder cypress/ akan berisi:

cypress/
├── integration/   # Di sinilah file test kamu berada
├── support/       # Helper dan konfigurasi global
└── fixtures/      # Data mock (opsional)

---

🧪 4. Contoh Test Sederhana

File: cypress/integration/homepage.spec.js

describe('Halaman Utama', () => {
  it('menampilkan judul halaman', () => {
    cy.visit('http://localhost:8080');
    cy.contains('h1', 'Selamat Datang');
  });

  it('bisa klik tombol dan ubah teks', () => {
    cy.get('button').click();
    cy.contains('p', 'Anda sudah klik tombol');
  });
});

---

🧭 5. Menjalankan E2E Test

GUI Mode (interaktif):

npm run test:e2e

Akan membuka Cypress Test Runner secara visual.

Headless (CI Mode):

npx cypress run

Cocok untuk pipeline CI/CD seperti GitHub Actions atau GitLab CI.

---

🧠 6. Fitur Cypress

Fitur	Keterangan
cy.visit()	Membuka URL
cy.get()	Seleksi elemen dengan CSS selector
cy.contains()	Seleksi berdasarkan teks
cy.click()	Simulasi klik
cy.type()	Isi input form
cy.should()	Assertion (verifikasi)
cy.intercept()	Mock/fake request API

---

🧼 7. Tips dan Best Practice

• Gunakan data-testid untuk selector yang lebih stabil

• Jangan uji logic JavaScript → gunakan unit test untuk itu

• Jalankan Cypress di environment yang menyerupai produksi

• Simpan data dummy di folder fixtures/ jika diperlukan

---

✅ 8. Contoh Test Interaktif

it('login berhasil dengan kredensial benar', () => {
  cy.visit('/login');
  cy.get('#email').type('admin@example.com');
  cy.get('#password').type('123456');
  cy.get('form').submit();
  cy.url().should('include', '/dashboard');
});