Тестирование веб-приложений с помощью Mocha и Chai

Question

Я понимаю, как тестировать функции, которые выводят значения с моккой и chai в браузере, но я не понимаю, как я могу использовать эту систему для тестирования полноценных веб-приложений. Чтобы разбить его на нечто более простое, как я могу проверить, что при нажатии на кнопку отображается <div>, которая уже существует в HTML?

Я следил за этим tutorial, но это просто не относится к уже существующим приложениям. Он хочет, чтобы я создал новый test.html, но это не имеет смысла, если мое приложение полагается на ранее существовавший HTML. Он также ожидает, что вы сможете создать new Foo, а затем запустить тесты, например, Foo имеет параметр по умолчанию name. Но мое приложение уже создает Foo на document ready.

Возможно, мне не хватает точки.

Answer 1

При тестировании приложений вы не должны тестировать приложение в целом, а отдельные компоненты, из которых состоит ваша заявка. Вы тестируете эти компоненты индивидуально и изолированно.

Таким образом, у вас обычно есть «test.html» (чтобы взять ваш пример), который включает в себя только те элементы, которые необходимы вам для тестирования вашего компонента. Учитывая ваше первое описание «test.html», может состоять только из одной кнопки и скрытого div. Ваш тест будет эмулировать нажатие кнопки, а затем проверить, что div больше не скрыт.

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

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

Похоже, вы не используете рамки приложения, которые я бы рекомендовал. Они обеспечивают хорошо изученную структуру для веб-приложений и обычно имеют богатую документацию по тестированию приложений, построенных с ними. Я бы порекомендовал AngularJS (https://angularjs.org/) или React (https://facebook.github.io/react/), но есть много альтернатив.