Testing Frontend (Draft)

export default function HomePage() {
return (
  <div className="header">
    <h1 className="header__title mb-2">Home</h1>
    <div>
      <i title="icon"
        className="header__icon fa fa-star"
      />
    </div>
  </div>
 );
}

Apakah saya perlu testing untuk komponen tsb? Coba lihat kemungkinannya:

• Testing className untuk memastikan di masa depan saya tidak sengaja mengubah UI. Misal: expect(Heading).toHaveClass(“mb-2”)
• Testing teks yang bisa dilihat oleh user untuk memastikan di masa depan saya tidak sengaja mengubahnya. Misal: expect(Heading).toHaveTextContent(“Home”)
• Testing className untuk memastikan di masa depan saya tidak sengaja mengubah icon. Misal: expect(Icon).toHaveClass(“fa fa-star”).

Testing adalah ketika proses diberi input maka harus keluar output yang sesuai. Ketika <HomePage /> dipanggil (input) maka dia mengeluarkan output (rendered html). Keliatannya benar semua hal itu harus di test. Tapi coba lihat argumen oposisinya:

• className adalah implementation detail (lihat catatan kaki 1) dan harus dihindari oleh testing. Bagaimana kalau saya hapus mb-2 dan diganti dengan .header__title { margin-bottom: 2px } . Sehingga tidak perlu test untuk ini dan diganti dengan visual testing.
• Oke ini adalah static content. Kenapa tidak visual testing alih-alih functional test?
• Oke ini adalah static content — hanya saja bentuknya className — sehingga tidak memiliki implementation detail. Kenapa tidak visual testing alih-alih functional test?

Catatan kaki:

1. Implementation detail adalah proses dalam menghasilkan sesuatu. Misalkan 3 x 2 = 6 dengan 3 x 2 sebagai implementation detail dan 6 sebagai hasil. Kita bisa mengubah implementation detail tanpa mengubah hasil. Misal 3 + 3 = 6. Kita mungkin perlu optimasi atau refactor sehingga perlu mengubah implementation detail. Hal ini yang tidak boleh ada di testing kita.