Использование отчетов HTML с помощью тестовой среды Mocha

Я генерировал некоторые тесты с помощью NodeJS и Mocha, и я хотел бы найти способ разместить результаты в браузере. Я знаю, что у Mocha есть поддержка для этого, используя репортер html и mocha init <dir>, но ни один из них не работает для меня (репортер действительно бросает ошибки, даже не выполняя тест).

Может ли кто-нибудь дать мне хороший пример запуска теста через Mocha и создания отчета HTML? Пример, который я хочу воспроизвести, находится на visionmedia сайте. Кроме того, для примера, мы скажем, что я использую тестовый файл с именем example.js.

Заранее благодарим за любую помощь, удивительно, что вокруг всего так мало примеров.

Ответ 1

Чтобы Mocha выполнил ваш тест как в браузере, так и в терминале, следуйте этому небольшому учебнику:

Я предполагаю следующие плагины для обычного тестового набора node.js mocha.

Node.js
Мокко

И следующая древовидная структура:

/root
  /test
    my_something_spec.js
  /javascript
  index.html

index.html

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

<html>
<head>
    <meta charset="utf-8">
    <title>Mocha Tests</title>
    <link rel="stylesheet" href="node_modules/mocha/mocha.css" />
</head>
<body>
    <div id="mocha"></div>
    <script src="node_modules/mocha/mocha.js"></script>
    <script>mocha.setup('bdd')</script>
    <script src="test/my_something_spec.js"></script>
    <script>
        mocha.checkLeaks();
        mocha.run();
    </script>
</body>
</html>

тест /my _something_spec.js

describe("my function", function() {
  it("is a function", function() {
    expect(true).to.be(true);
  });
});

Выполняя это с помощью простого сервера python python -m SimpleHTTPServer 8080 из корня и посетив localhost:8080, вы получите хороший и неудачный тест. И запуск мокки с терминала даст вам тот же результат, что expect не определен.

Ответ 2

Вы пытаетесь использовать репортер html, который бросает, когда вы пытаетесь использовать его в Node:

$ mocha --reporter html > report.html

/usr/local/lib/node_modules/mocha/lib/reporters/html.js:194
    , div = document.createElement('div')
            ^
ReferenceError: document is not defined

В Документация Mocha (и релевантная проблема в Github), репортер html работает только в браузере, т.е. для проверки клиентского кода в браузере.

Если вы хотите вывести HTML для теста Node.js script, используйте doc репортер, который будет генерировать HTML.

Ответ 3

Мне нравится тестировать один и тот же код через Node.js и в браузере, в зависимости от ситуации. Я знаю, что вы просили "поместить результаты в браузер" (от Node.js?), Но я надеюсь, что этого будет достаточно.

Этот пример был создан на компьютере Windows, но он также будет работать и на Mac и Linux.

Для этого вам не нужен веб-сервер (Node.js или другой).

Чтобы запустить тесты в браузере, откройте файл. /test/index.html.

Чтобы запустить тесты в командной строке, просто выполните "mocha".

Начиная с ничего:

C:\TEMP>mkdir mocha_node_browser

C:\TEMP>cd mocha_node_browser

C:\TEMP\mocha_node_browser>dir
Volume in drive C is MessedUp
Volume Serial Number is CAB2-E609

Directory of C:\TEMP\mocha_node_browser

2014-08-09  12:17    <DIR>          .
2014-08-09  12:17    <DIR>          ..
               0 File(s)              0 bytes
               2 Dir(s)  287,218,769,920 bytes free

Инициализируйте каталог, в котором будут храниться все ваши тесты. Всегда называйте это "test":

C:\TEMP\mocha_node_browser>mocha init test

Редактировать и/или создать несколько файлов:

C:\TEMP\mocha_node_browser>gvim -p test_me.js test\index.html test\tests.js

Я использую Чай. Один и тот же файл chai.js будет использоваться в обоих тестах.

C:\TEMP\mocha_node_browser>cd test

C:\TEMP\mocha_node_browser\test>curl -O http://chaijs.com/chai.js
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  117k  100  117k    0     0  99902      0  0:00:01  0:00:01 --:--:-- 99902

C:\TEMP\mocha_node_browser\test>cd ..

После создания/редактирования файлов выполните тесты через командную строку:

C:\TEMP\mocha_node_browser>mocha

  .

  1 passing (15ms)

... или укажите свой браузер на. /test/index.html.

passes: 1
failures: 0
duration: 0.03s

whatever
    should return "it worked!"

Содержимое файла:

C:\TEMP\mocha_node_browser>type test_me.js

// the function to be tested
function whatever() {
  return 'it worked!';
}

// only kicks in when running in Node.js via "mocha"
if (typeof module !== 'undefined') {
  module.exports = whatever;
}

Добавьте Chai и ваш источник, который вы хотите протестировать в test/index.html:

C:\TEMP\mocha_node_browser>type test\index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Mocha</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="mocha.css" />
  </head>
  <body>
    <div id="mocha"></div>
    <script src="mocha.js"></script>
    <script>mocha.setup('bdd')</script>

    <!-- added to index.html: -->
    <script src="./chai.js"></script>
    <script src="../test_me.js"></script>

    <script src="tests.js"></script>
    <script>
      mocha.run();
    </script>
  </body>
</html>

Сделайте ваши тесты совместимыми с командной строкой и браузером

C:\TEMP\mocha_node_browser>type test\tests.js

if (typeof require !== 'undefined') {
  // testing in command-line
  var chai = require('./chai');
  var whatever = require('../test_me');
}

var expect = chai.expect;

describe('whatever', function() {
  it('should return "it worked!"', function() {
    expect(whatever()).to.equal("it worked!");
  });
});