Разработка UI в JavaScript с помощью Принципов TDD

для одномерного массива, который вы можете просто использовать:

arr1.sort().toString() == arr2.sort().toString()

, это также позаботится о массиве с несогласованным индексом.

43
задан Chris MacDonald 19 September 2008 в 07:19
поделиться

6 ответов

Я сделал некоторый TDD с JavaScript в прошлом и что я должен был сделать, был, делают различие между Модульными и Интеграционными тестами. Селен протестирует Ваш полный сайт, с выводом с сервера, его спин сообщения, ajax вызовы, все это. Но для поблочного тестирования, ничего подобного не важен.

то, Что Вы хотите, является просто UI, Вы собираетесь быть взаимодействием с, и Ваш сценарий. Инструмент, который Вы будете использовать для этого, в основном JsUnit, который берет документ HTML, с некоторыми функциями JavaScript на странице и выполняет их в контексте страницы. Таким образом, то, что Вы будете делать, включает Погашенный HTML на странице с Вашими функциями. Оттуда, можно протестировать взаимодействие сценария с компонентами UI в изолированной единице дразнившего 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'ing с JavaScript.

22
ответ дан Rob W 4 August 2019 в 18:49
поделиться

У меня никогда нет успешно TDDed код UI. Самое близкое мы приехали, должно было действительно разделить код UI как можно больше от прикладной логики. Это - одна причина, почему шаблон образцового контроллера представления полезен - модель и контроллер могут быть TDDed без большой проблемы и без того, чтобы быть слишком сложным.

, По моему опыту, представление всегда оставлялось для наших тестов приемлемости для пользователя (мы записали веб-приложения, и наш UATs использовал HttpUnit Java). Однако на этом уровне это - действительно интеграционный тест без свойства теста в изоляции, которого мы требуем с TDD. Из-за этой установки, мы должны были записать, что наш контроллер/модель тестирует/кодирует сначала, тогда UI и соответствующий UAT. Однако в коде GUI Swing я писал в последнее время, я писал, что GUI кодирует сначала с тупиками, чтобы исследовать мой дизайн фронтэнда, прежде, чем добавить к контроллеру/модели/API. YMMV здесь все же.

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

4
ответ дан Desty 4 August 2019 в 18:49
поделиться

Я как раз собираюсь начать делать TDD JavaScript на новом проекте, я продолжаю работать. Мой текущий план состоит в том, чтобы использовать qunit, чтобы сделать поблочное тестирование. В то время как разработка тестов может быть выполнена путем простого обновления тестовой страницы в браузере.

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

я также собираюсь использовать JSCoverage для получения анализа покрытия кода тестов. Это будет также автоматизировано с Селеном.

я в настоящее время посреди установки этого. Я обновлю этот ответ с более точными деталями, как только мне выработали установку.

<час>

Инструменты тестирования:

0
ответ дан Karl 4 August 2019 в 18:49
поделиться
2
ответ дан Community 4 August 2019 в 18:49
поделиться

Это - основная причина, которую я переключил на Google Web Toolkit... Я разрабатываю и тестирую в Java и имею разумное ожидание, что скомпилированный JavaScript будет функционировать правильно на множестве браузеров. Так как TDD является, прежде всего, функцией поблочного тестирования, большая часть проекта может быть разработана и протестирована перед компиляцией и развертыванием.

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

0
ответ дан Steve Moyer 4 August 2019 в 18:49
поделиться

I've found the MVP architecture to be very suitable for writing testable UIs. Your Presenter and Model classes can simply be 100% unit tested. You only have to worry about the View (which should be a dumb, thin layer only that fires events to the Presenter) for UI testing (with Selenium etc.)

Note that in the I'm talking about using MVP entirely in the UI context, without necessarily crossing to the server-side. Your UI can have its own Presenter and Model that lives entirely on the client-side. The Presenter drives the UI interaction/validation etc. logic while the Model keeps state information and provides a portal to the backend (where you can have a separate Model).

You should also take a look at the Presenter First TDD technique.

1
ответ дан 26 November 2019 в 23:10
поделиться
Другие вопросы по тегам:

Похожие вопросы: