Статьи

JavaScript BDD, с жасмином, без браузера

Ноябрь 2, 2017

Я тестировал домен моего сборочного радиатора, XFD, с прекрасной платформой Jasmine BDD для JavaScript. Жасмин прекрасна. Браузеры нет. У меня есть проблемы с появлением нового браузера для запуска ваших тестов:

  • Создание браузера занимает время и разрушает мой поток,
  • Я пытаюсь изгнать логику — наличие браузера приведет мой дизайн к неестественным связям, и
  • Это делает непрерывную интеграцию намного сложнее

Поэтому я начал исследовать, что я могу сделать с Rhino и Envjs, чтобы сделать тестирование с Jasmine более потрясающим. Ингвальд Скауг был там раньше . Мне потребовалось некоторое время, чтобы по-настоящему понять, как сочетаются друг с другом части, поэтому я решил расширить его.

Шаг 1: Убедитесь, что Жасмин работает

Я бы сэкономил столько времени, если бы начал с этого. Что вам нужно сделать, это загрузить ядро ​​Jasmine и вставить его в свой проект. Я начал с Jasmine RubyGem, который порождает браузер и выполняет сантехнику, но для этого он вернулся к основам. В моем проекте это проверено в lib / jasmine-1.0.1 . Вам нужен HTML-файл для ссылки на все сценарии и запуска тестов. Вот пример, полученный из документов Jasmine:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Jasmine Test Runner</title>
  <link rel="stylesheet" type="text/css" href="lib/jasmine-1.0.1/jasmine.css"></link>
  <script type="text/javascript" src="lib/jasmine-1.0.1/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-1.0.1/jasmine-html.js"></script>

  <!-- include source files here... -->
  <script type="text/javascript" src="src/Player.js"></script>
  <script type="text/javascript" src="src/Song.js"></script>

  <!-- include spec files here... -->
  <script type="text/javascript" src="spec/SpecHelper.js"></script>
  <script type="text/javascript" src="spec/PlayerSpec.js"></script>

</head>
<body>

<script type="text/javascript">
  jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
  jasmine.getEnv().execute();
</script>

</body>
</html>

В моем реальном проекте я генерирую этот файл во время сборки из шаблона ERB , чтобы убедиться, что я получаю все исходные файлы и тесты. Как бы вы это ни делали, сначала убедитесь, что он работает в браузере . Да. В самом деле.

Шаг 2: Получите нужные вам биты

В моем каталоге lib у меня есть:

  • js.jar — это реализация JavaScript для Rhino. Я уже использовал это для запуска JsLint как часть моей сборки
  • env.rhino.1.2.js — это Envjs — реализация DOM, написанная на JavaScript.
  • jasmine.console_reporter.js , jasmine.junit_reporter.js и envjs.bootstrap.js — все из отличного проекта Ларри Майерса « Жасмин репортеры ». Jasmine Reporters — это то, что склеивает все вместе.


Шаг 3: Подключите Жасмин Репортеры

В SpecRunner.html можно подключить множество репортеров Jasmine. В этом примере я оставляю два объекта — TrivialReporter, который предоставляет отчеты HTML / CSS, и ConsoleReporter, который мы будем использовать позже. Вот редактирование файла SpecRunner сейчас:

<script type="text/javascript">
  jasmine.getEnv().addReporter(new jasmine.ConsoleReporter());
  jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
  jasmine.getEnv().execute();
</script>

Шаг 4: собрать все вместе

Вот где все это происходит. В моем примере я использую сценарий оболочки, но в реальной жизни Rakefile, который генерирует файл SpecRunner, также запускает JVM и проверяет STDOUT на наличие сообщений об ошибках.

#!/bin/bash
java -jar lib/js.jar -opt -1 lib/envjs.bootstrap.js SpecRunner.html

envjs.bootstrap.js также заслуживает изучения:

load('lib/env.rhino.1.2.js');

Envjs.scriptTypes['text/javascript'] = true;

var specFile;

for (i = 0; i < arguments.length; i++) {
    specFile = arguments[i];

    console.log("Loading: " + specFile);

    window.location = specFile
}

Этот файл берет список файлов HTML, которые вы ему передаете, и сообщает поддельному браузеру внутри JVM, чтобы загрузить каждый из них. Затем Жасмин запускает ваши тесты:

jsimpson@curie:~/Documents/workspace/jasmine-rhino-envjs$ ./jasmine
[  Envjs/1.6 (Rhino; U; Linux i386 2.6.32-26-generic; en-US; rv:1.7.0.rc2) Resig/20070309 PilotFish/1.2.13  ]
Loading: SpecRunner.html
Runner Started.
Player : should be able to play a Song ...
>> Jasmine Running Player should be able to play a Song...
Passed.
when song has been paused : should indicate that the song is currently paused ...
>> Jasmine Running when song has been paused should indicate that the song is currently paused...
Passed.
when song has been paused : should be possible to resume ...
>> Jasmine Running when song has been paused should be possible to resume...
Passed.
when song has been paused: 4 of 4 passed.
Player : tells the current song if the user has made it a favorite ...
>> Jasmine Running Player tells the current song if the user has made it a favorite...
Passed.
#resume : should throw an exception if song is already playing ...
>> Jasmine Running #resume should throw an exception if song is already playing...
Passed.
#resume: 1 of 1 passed.
Player: 8 of 8 passed.
Runner Finished.

Есть также совместимый с JUnit XML-репортер, любезно предоставленный Ларри. Это позволяет вам делать результаты теста отчетов сервера Continuous Integration как обычно.

Резюме
Я очень впечатлен. Все мои тесты, которые раньше выполнялись в браузере, выполняются без заголовка, с некоторыми путями. Я использую плагин Jasmine JQuery , который, вероятно, сохранил мой бекон на тесте, который слишком тесно связан с представлениями. Я собрал пример на GitHub.

Принадлежит к Ingvald , Ларри , и Жасмин командам, Rhino и Envjs. Вы, ребята, молодцы.

33
Share: