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 3
sebelum 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?