В прошлом я работал с TDD с Javascript, и мне нужно было провести различие между модульными и интеграционными тестами. Selenium проверит ваш сайт в целом, с выходными данными сервера, его постами, вызовами ajax и всем этим. Но для модульного тестирования все это не важно.
То, что вы хотите, это просто пользовательский интерфейс, с которым вы будете взаимодействовать, и ваш скрипт. Инструмент, который вы будете использовать для этого, в основном JsUnit , который берет HTML-документ с некоторыми функциями Javascript на странице и выполняет их в контексте страницы. Итак, что вы будете делать, так это вставлять HTML-код на страницу со своими функциями. Оттуда вы можете проверить взаимодействие вашего скрипта с компонентами пользовательского интерфейса в изолированном модуле проверенного HTML, вашего скрипта и ваших тестов.
Это может немного сбивать с толку, поэтому давайте посмотрим, сможем ли мы сделать небольшой тест. Позволяет некоторым TDD предполагать, что после загрузки компонента список элементов окрашивается в зависимости от содержимого LI.
tests.html
<html>
<head>
<script src="jsunit.js"></script>
<script src="mootools.js"></script>
<script src="yourcontrol.js"></script>
</head>
<body>
<ul id="mockList">
<li>red</li>
<li>green</li>
</ul>
</body>
<script>
function testListColor() {
assertNotEqual( $$("#mockList li")[0].getStyle("background-color", "red") );
var colorInst = new ColorCtrl( "mockList" );
assertEqual( $$("#mockList li")[0].getStyle("background-color", "red") );
}
</script>
</html>
Очевидно, что TDD - это многоэтапный процесс, поэтому для нашего контроля нам понадобится несколько примеров.
yourcontrol.js (step1)
function ColorCtrl( id ) {
/* Fail! */
}
yourcontrol.js (step2)
function ColorCtrl( id ) {
$$("#mockList li").forEach(function(item, index) {
item.setStyle("backgrond-color", item.getText());
});
/* Success! */
}
Вы, вероятно, можете увидеть болевую точку здесь, вы должны держать свой макет HTML здесь на странице в синхронизации со структурой того, какими будут элементы управления вашего сервера. Но это действительно хорошая система для работы с TDD с JavaScript.