Как настроить задачу grunt для requirejs и qunit

Я пытаюсь настроить среду QUnit, используя requirejs и grunt-contrib-qunit.

Вот что у меня есть.

gruntfile:

qunit: {
  all: {
    options: {
      urls: [
        'http://localhost:8000/qunit/qunit-test-suite.html'
      ]
    }
  }
},

connect: {
  server: {
    options: {
      port: 8000,
      base: '.'
    }
  }
},

QUnit тест-suite.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Tests Suite: travis CI Test</title>
  <link rel="stylesheet" href="../components/libs/qunit/qunit/qunit.css">
</head>
<body>

  <div id="qunit"></div>
  <div id="qunit-fixture"></div>

  <script src="../components/libs/qunit/qunit/qunit.js"></script>
  <script>
    QUnit.config.autoload = false;
    QUnit.config.autostart = false;
  </script>

  <script data-main="qunit" src="../components/libs/requirejs/require.js"></script>

</body>
</html>

qunit.js:

require.config({
    baseUrl: "../",
    paths: {
      'jquery': 'components/libs/jquery/dist/jquery.min',

      // Test for Foo
      'foo': 'components/app/foo/foo',
      'test-Foo': 'components/app/foo/test-Foo'
    },
    shim: {
     'QUnit': {
       exports: 'QUnit',
       init: function() {
         QUnit.config.autoload = false;
         QUnit.config.autostart = false;
       }
      }
    }
});

require(['test-Foo'], function (Foo) {
  QUnit.load();
  QUnit.start();
});

тест-foo.js:

define(['foo'], function(Foo) {

  'use strict';

  module("Foo");

  test("Foo return Test", function() {
    equal(Foo.foo(), "foo", "Function should return 'foo'");
    equal(Foo.oof(), "oof", "Function should return 'oof'");
  });

  test("Bar return Test", function() {
    equal(Foo.bar(), "barz", "Function should return 'bar'");
  });

});

Проблема в том, что все работает нормально, когда я открываю test-suite.html в своем браузере. После отправки в PhantomJS я получаю следующую ошибку:

Running "connect:server" (connect) task
Started connect web server on http://localhost:8000

Running "qunit:all" (qunit) task
Testing http://localhost:8000/qunit/qunit-test-suite.html

>> PhantomJS timed out, possibly due to a missing QUnit start() call.
Warning: 1/1 assertions failed (0ms) Use --force to continue.

Aborted due to warnings.

Полная настройка: https://github.com/markusfalk/test-travis

Тестовый прогон: https://travis-ci.org/markusfalk/test-travis

Спасибо за любую помощь:)

Источник

3 ответа

Решение

С помощью Jörn Zaefferer я разработал рабочую установку. Хитрость заключается в том, чтобы настроить requireJS перед загрузкой QUnit (перенесите config requireJS в config.js и загрузите его первым).

Требования:

  • grunt-contrib-qunit v0.7.0
  • qunit v1.18.0

Тестовый набор HTML:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>QUnit Tests Suite: asdf</title>
    <link rel="stylesheet" href="../components/libs/qunit/qunit/qunit.css">
  </head>
  <body>

    <div id="qunit"></div>
    <div id="qunit-fixture"></div>

    <script src="config.js"></script>
    <script data-main="unit" src="../components/libs/requirejs/require.js"></script>

  </body>
</html>

config.js

var requirejs = {
  baseUrl: "../",
  paths: {
    //{{app}}
    'foo': 'components/app/foo/foo',
    'test-foo': 'components/app/foo/test-foo',

    //{{libs}}
    'unit': 'qunit/unit',
    'qunit': 'components/libs/qunit/qunit/qunit',
    'jquery.exists': 'libs/jquery.exists/jquery.exists',
    'jquery': 'components/libs/jquery/dist/jquery.min'
  },
  'shim': {
    'jquery.exists': ['jquery']
  }
};

unit.js

require([
  'qunit',
  'test-foo'
],
function(qunit, TestFoo) {
  TestFoo();
  qunit.start();
});

тест-foo.js:

define(['jquery', 'qunit', 'foo'], function($, qunit, Foo) {
  'use strict';
  return function() {
    qunit.module("Foo");
    qunit.test("Foo Test", function() {
      equal(Foo.saySomething(), "Hello", "returns 'Hello'");
    });
  };
});

И, наконец, модуль, который я хочу протестировать:

define(['jquery'], function($) {
  'use strict';
  var Foo = {
    saySomething: function() {
      return "Hello";
    }
  };
  return {
    saySomething: Foo.saySomething
  };
});
Источник

Вы пытались запустить grunt с флагами -v и / или -d, чтобы получить более подробный вывод? Я заметил, что в PhantomJS было что-то пропущено в вашей сборке travis-ci.

Запись файла location.js

PhantomJS уже установлен в / usr / local / phantomjs / bin / phantomjs.

npm ПРЕДУПРЕЖДЕНИЕ, исключая символическую ссылку lib / socket.io-client.js -> io.js

Если он зависит от io.js и ссылка отсутствует, произойдет сбой.

ОБНОВЛЕНИЕ: я нашел проблему, используя подробный вывод. Ваш тест 404ing из-за проблемы с именем файла.

["phantomjs", "onResourceReceived", {"contentType": "text / html; charset = utf-8", "headers": [{"name": "X-Content-Type-Options", "value": "nosniff"}, {"name": "Content-Type", "value": "text / html; charset = utf-8"}, {"name": "Content-Length", "value": "43 "}, {" name ":" Date "," value ":" Fri, 10 Apr 2015 06:45:47 GMT "}, {" name ":" Connection "," value ":" keep-alive "} ], "id": 6, "redirectURL": null, "stage": "end", "status": 404, "statusText": "Not Found", "time": "2015-04-10T06: 45: 47.747Z "," url ":" http://localhost:10000/components/app/foo/test-Foo.js"}]

Вы пытаетесь использовать файл test-Foo.js. Файл называется test-foo.js в вашем хранилище. Изменение случая должно исправить тест.

Источник

Заранее извиняюсь, если я констатирую очевидное, но у вас установлен PhantomJS? Я не вижу его в вашем файле packages.json. Вы можете установить его используя npm install phantomjs --save-dev в корне вашего проекта. Save-dev добавит его в ваш packages.json, поэтому при запуске npm install он будет автоматически установлен.

Источник
Другие вопросы по тегам