Как настроить задачу 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

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

Ответ 1

С помощью Jörn я придумал рабочую настройку. Trick - настроить requireJS до загрузки QUnit (переместить requireJS config в 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
  };
});

Ответ 2

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

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

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

npm WARN исключая символическую ссылку lib/socket.io-client.js → io.js

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

UPDATE: Я нашел проблему, используя подробный вывод. Ваш тест 404 из-за проблемы с именем файла.

[ "phantomjs", "onResourceReceived", { "contentType": "text/html; charset = utf-8", "headers": [{ "name" : "X-Content-Type-Options", "значение": "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- живое" }], "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 в вашем репозитории. Изменение случая должно исправить тест.

Ответ 3

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