Как вы можете TDD для ошибки, которая может быть проверена только после того, как она была исправлена?

Вот один пример: мое веб-приложение содержит перетаскиваемые элементы. При перетаскивании элемента браузер создает «призрачное изображение». Я хочу удалить «призрачное изображение» при перетаскивании, и я пишу тест для этого поведения.

Моя проблема в том, что я изначально не представляю, как исправить эту ошибку, и единственный способ написать тест - это исправить его.

В простой функции, такой как let sum = (a, b) => a - b, вы можете написать тест на то, почему sum(1, 2)он не равен 3перед написанием любого кода.

В случае, который я описываю, я не могу проверить, потому что я не знаю, что такое проверка (я не знаю, каким должно быть утверждение).

Решение описанной проблемы:

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);

Я не мог знать, что это было решением. Я не мог даже написать тест после нахождения решения в Интернете, потому что единственный способ узнать, действительно ли оно работает, было добавить этот код в мою кодовую базу и проверить в браузере, имеет ли он желаемый эффект. Тест должен был быть написан после кода, который идет вразрез с TDD.

Каким будет подход TDD к этой проблеме? Написание теста перед кодом обязательно или необязательно?

Когда я вас правильно понял, вы даже не можете написать надежный автоматический тест для своего примера «призрачного изображения» после того, как найдете решение, поскольку единственный способ проверить правильность поведения - это посмотреть на экран и проверить, нет ли изображения-призрака больше Это создает впечатление, что ваш оригинальный заголовок задал неправильный вопрос. Настоящий вопрос должен быть

• Как автоматически проверить определенное поведение графического интерфейса пользователя?

И ответ таков: по нескольким видам проблем с пользовательским интерфейсом вы этого не сделаете . Конечно, можно попытаться автоматизировать создание пользовательского интерфейса, показывающего проблему, и попытаться реализовать что-то вроде сравнения снимков экрана, но это часто подвержено ошибкам, хрупко и не рентабельно.

В частности, дизайн пользовательского интерфейса «тест-драйв» или улучшения пользовательского интерфейса с помощью автоматических тестов, написанных заранее, буквально невозможны. Вы «управляете» дизайном пользовательского интерфейса, делая улучшения, демонстрируете результат человеку (себе, некоторым тестировщикам или пользователю) и запрашиваете обратную связь.

Итак, примите тот факт, что TDD не является «серебряной пулей», и для некоторых проблем ручное тестирование все же имеет больше смысла, чем автоматическое тестирование. Если у вас есть систематический процесс тестирования, может быть, с некоторыми выделенными тестировщиками, лучшее, что вы можете сделать, это добавить кейс в их план тестирования.

Каким будет подход TDD к этой проблеме? Написание теста перед кодом обязательно или необязательно?

Одним из способов является применение аналога спайка решения .

Джеймс Шор описал это так:

Мы проводим небольшие отдельные эксперименты, когда нам нужно больше информации.

Основная идея заключается в том, что вы опускаете инструменты проектирования , пока выясняете, что происходит. Как только у вас есть ориентиры, вы снова берете инструменты проектирования.

Хитрость: вы возвращаете знания из своего исследования обратно в базу производственного кода, но вы не приносите код . Вместо этого вы воссоздаете его, используя ваши дисциплинированные приемы проектирования.

Лошади на курсы.

РЕДАКТИРОВАТЬ:

Как можно автоматизировать тест, если дефект виден только человеческим глазом?

Я хотел бы предложить несколько другое правописание: «Как вы можете автоматизировать тест, если автоматизация теста не является экономически эффективной?»

Ответ, конечно же, «вы не делаете». Вместо этого старайтесь разделить вашу реализацию на две части - большую часть, где тестирование является экономически эффективным, и меньшую часть, которую слишком просто разбить.

Существует два способа конструирования программного обеспечения: один из них - сделать его настолько простым, чтобы в нем явно не было недостатков - CAR Hoare

Поэтому при работе со сторонним кодом у нас будет очень тонкая оболочка кода, которая действует как прокси для сторонней библиотеки. В тесте мы заменяем эту оболочку на «двойник теста», который проверяет протокол , не беспокоясь о том, что он дает желаемый эффект.

Для тестирования интеграции наших кодов с реальным сторонним кодом мы полагаемся на другие методы (визуальная проверка, обращения в службу технической поддержки, оптимизм ....)

Может быть полезно сохранить некоторые демонстрационные артефакты, чтобы вы могли проверить, сохраняются ли ваши предположения при обновлении сторонней библиотеки.

С другой стороны, тестирование вокруг UI / GUI можно сделать несколько лучше в отношении приемочного тестирования (функциональные / бизнес-ориентированные тесты).

Я думаю, что для сети фреймворки, такие как Selen Webdriver, могут приблизиться к правильному тесту, но издержки для начала работы могут быть довольно значительными, и это сдвиг в потоке, наблюдаемом с TDD, в отношении только модульных тестов. ,

Часть, которая будет особенно полезна в вашей ситуации, называется объектной моделью страницы ( https://www.guru99.com/page-object-model-pom-page-factory-in-selenium-ultimate-guide.html ). Это обеспечивает явное отображение графического интерфейса во время выполнения на некоторый код, либо путем присвоения имен методам / событиям / членам класса.

Основными аргументами против этого могут быть накладные расходы, и что эти накладные расходы обычно можно увидеть в конце цикла разработки. Издержки заключаются в том, что тестам требуется некоторая оболочка, которая может создать дублирующую работу.

В дальнейшем это будет зависеть от затрат / выгод команды и бизнеса, поэтому это может быть полезной темой для обсуждения, чтобы определить ожидания и взгляды.

Как выглядит призрачное изображение? Если вы создали фиктивный пользовательский интерфейс одного известного цвета, куда вы поместили свой перетаскиваемый компонент? Будет ли присутствовать определенный цвет, если будет призрачное изображение.

Затем тест может проверить отсутствие цвета изображения-призрака.

Такой тест был бы разумным, долговечным и выполнимым.