Đây là một ví dụ: Ứng dụng web của tôi chứa các yếu tố có thể kéo được. Khi kéo một phần tử, trình duyệt sẽ tạo ra một "hình ảnh ma". Tôi muốn xóa "hình ảnh ma" khi kéo và tôi viết một bài kiểm tra cho hành vi này.
Vấn đề của tôi là ban đầu tôi không biết làm thế nào để sửa lỗi này và cách duy nhất tôi có thể viết một bài kiểm tra là sau khi tôi đã sửa nó.
Trong một chức năng đơn giản như let sum = (a, b) => a - b, bạn có thể viết một bài kiểm tra tại sao sum(1, 2)không bằng 3trước khi viết bất kỳ mã nào.
Trong trường hợp tôi đang mô tả, tôi không thể kiểm tra, vì tôi không biết xác minh là gì (tôi không biết xác nhận nên là gì).
Một giải pháp cho vấn đề được mô tả là:
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);
Tôi không thể biết rằng đây là giải pháp. Tôi thậm chí không thể viết bài kiểm tra sau khi tìm giải pháp trực tuyến, bởi vì cách duy nhất tôi có thể biết nếu nó thực sự hoạt động, là thêm mã này vào cơ sở mã của tôi và xác minh với trình duyệt nếu nó có hiệu quả mong muốn. Bài kiểm tra phải được viết sau mã, đi ngược lại TDD.
Cách tiếp cận TDD cho vấn đề này là gì? Là viết bài kiểm tra trước khi mã bắt buộc hoặc tùy chọn?