Ini salah satu contohnya: Aplikasi web saya mengandung elemen yang dapat diseret. Saat menyeret elemen, browser menghasilkan "gambar hantu". Saya ingin menghapus "gambar hantu" ketika menyeret dan saya menulis tes untuk perilaku ini.
Masalah saya adalah bahwa saya awalnya tidak tahu cara memperbaiki bug ini dan satu-satunya cara saya bisa menulis tes adalah setelah saya memperbaikinya.
Dalam fungsi sederhana seperti let sum = (a, b) => a - b, Anda dapat menulis tes mengapa sum(1, 2)tidak sama 3sebelum menulis kode apa pun.
Dalam kasus yang saya jelaskan, saya tidak dapat menguji, karena saya tidak tahu apa verifikasi itu (saya tidak tahu apa yang seharusnya menjadi pernyataan).
Solusi untuk masalah yang dijelaskan adalah:
let dataTransfer = e.dataTransfer
let canvas = document.createElement('canvas');
canvas.style.opacity = '0';
canvas.style.position = 'absolute';
canvas.style.top = '-1000px';
dataTransfer.effectAllowed = 'none';
document.body.appendChild(canvas);
dataTransfer.setDragImage(canvas, 0, 0);
Saya tidak mungkin tahu bahwa ini adalah solusinya. Saya bahkan tidak bisa menulis tes setelah menemukan solusi online, karena satu-satunya cara saya bisa tahu jika itu benar-benar bekerja, adalah menambahkan kode ini ke dalam basis kode saya dan memverifikasi dengan browser jika memiliki efek yang diinginkan. Tes harus ditulis setelah kode, yang bertentangan dengan TDD.
Apa yang akan menjadi pendekatan TDD untuk masalah ini? Apakah menulis tes sebelum kode wajib atau opsional?
sumber
Jawaban:
Ketika saya memahami Anda dengan benar, Anda bahkan tidak dapat menulis tes otomatis yang dapat diandalkan untuk contoh "gambar hantu" Anda setelah Anda menemukan solusi, karena satu-satunya cara memverifikasi perilaku yang benar adalah dengan melihat layar dan memeriksa apakah tidak ada gambar hantu lagi. Itu memberi saya kesan headline asli Anda menanyakan pertanyaan yang salah. Pertanyaan sebenarnya seharusnya
Dan jawabannya adalah - untuk beberapa jenis masalah UI, Anda tidak . Tentu saja, seseorang dapat mencoba untuk mengotomatiskan membuat UI menunjukkan masalah, dan mencoba untuk mengimplementasikan sesuatu seperti perbandingan tangkapan layar, tetapi ini sering rawan kesalahan, rapuh dan tidak hemat biaya.
Terutama desain "test driving" UI atau peningkatan UI oleh tes otomatis yang ditulis di muka secara harfiah tidak mungkin. Anda "mengarahkan" desain UI dengan melakukan peningkatan, menunjukkan hasilnya kepada manusia (diri Anda sendiri, beberapa penguji atau pengguna) dan meminta umpan balik.
Jadi terima fakta bahwa TDD bukan peluru perak, dan untuk beberapa jenis masalah masih pengujian manual lebih masuk akal daripada tes otomatis. Jika Anda memiliki proses pengujian yang sistematis, mungkin dengan beberapa penguji yang berdedikasi, hal terbaik yang dapat Anda lakukan adalah menambahkan kasing pada rencana pengujian mereka.
sumber
Salah satu caranya adalah menerapkan analog dari solusi spike .
James Shore menggambarkannya seperti ini:
Ide dasarnya adalah bahwa Anda meletakkan alat desain saat Anda mencari tahu apa yang sedang terjadi. Setelah memiliki bantalan Anda, Anda mengambil alat desain lagi.
Caranya: Anda membawa pengetahuan dari penyelidikan Anda kembali ke basis kode produksi Anda, tetapi Anda tidak membawa kode itu . Alih-alih, Anda membuatnya ulang saat menggunakan teknik desain disiplin.
Kuda untuk kursus.
EDIT:
Saya ingin menyarankan ejaan yang sedikit berbeda: "Bagaimana Anda bisa mengotomatiskan tes jika mengotomatisasi tes tidak efektif biaya?"
Jawabannya, tentu saja, "Anda tidak". Alih-alih, cobalah untuk memisahkan implementasi Anda menjadi dua bagian - sebagian besar di mana pengujian efektif biaya, dan bagian yang lebih kecil yang terlalu mudah untuk dipecah.
Jadi ketika bekerja dengan kode pihak ketiga, kami akan memiliki shell kode yang sangat tipis yang bertindak sebagai proxy untuk perpustakaan pihak ketiga. Dalam pengujian, kami mengganti shell itu dengan "test double", yang memverifikasi protokol , tanpa khawatir akan menghasilkan efek yang diinginkan.
Untuk pengujian integrasi kode kami dengan kode pihak ketiga nyata, kami mengandalkan teknik lain (verifikasi visual, panggilan dukungan teknis, optimisme ....)
Berguna untuk menyimpan beberapa artefak demonstrasi di sekitar, sehingga Anda dapat memeriksa bahwa asumsi Anda masih berlaku ketika Anda meningkatkan perpustakaan pihak ketiga.
sumber
Perspektif yang berbeda, pengujian di sekitar UI / GUI dapat dilakukan agak lebih baik dalam hal pengujian penerimaan (fitur / tes yang berpusat pada alur kerja bisnis).
Untuk web, saya pikir kerangka kerja seperti selenium webdriver memiliki potensi untuk mendekati tes yang benar, tetapi overhead untuk memulai bisa sedikit banyak, dan itu adalah perubahan dalam aliran yang terlihat dengan TDD sehubungan dengan hanya unit test .
Bagian yang secara khusus akan membantu situasi Anda adalah sesuatu yang disebut Page Object Model ( https://www.guru99.com/page-object-model-pom-page-factory-in-selenium-ultimate-guide.html ). Ini mencapai pemetaan eksplisit run-time GUI ke beberapa kode, baik dengan penamaan metode / acara / anggota kelas.
Argumen utama yang menentang hal ini adalah overhead, dan bahwa overhead ini biasanya dapat dilihat pada akhir siklus pengembangan. Overhead adalah bahwa tes memerlukan beberapa pembungkus yang akan muncul untuk membuat pekerjaan yang digandakan.
Ke depan, itu akan tergantung pada biaya / manfaat tim dan bisnis, jadi itu bisa menjadi topik yang bermanfaat untuk dibahas untuk menentukan harapan dan pandangan.
sumber
Seperti apa rupa gambar hantu? Jika Anda membuat boneka ui dengan satu warna yang dikenal, di mana Anda meletakkan komponen yang dapat diseret? Apakah akan ada hadiah warna tertentu jika ada gambar hantu.
Kemudian tes bisa menguji tidak adanya warna gambar hantu.
Tes semacam itu akan masuk akal, tahan lama, dan bisa dilakukan.
sumber