2015-04-03 8 views
10

Ich versuche, eine QUnit Umgebung mit requirejs und grunt-contrib-qunit einzurichten. HierWie grunt Aufgabe für requirejs und qunit einrichten

ist das, was ich habe.

gruntfile:

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

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

QUnit-test-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(); 
}); 

Test 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'"); 
    }); 

}); 

Problem ist, dass alles gut funktioniert, wenn ich die test-suite.html in meinem Browser öffne. Einmal PhantomJS schickte ich die folgende Fehlermeldung erhalten:

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. 

Voll Setup: https://github.com/markusfalk/test-travis

Testlauf: https://travis-ci.org/markusfalk/test-travis

Vielen Dank für jede Hilfe :)

+0

Ist die Brücke die Problem? Was könnte dagegen getan werden? http://StackOverflow.com/a/18433173/2538388 Aber ich lade tatsächlich Qunit innerhalb des HTML und nicht über requireJS – Markus

+0

Ich habe gerade herausgefunden, dass die Verwendung von [email protected] dieses Setup funktioniert. Vielleicht hat es mit dem Update zu tun, das sie gemacht haben: v0.6.0 Add noGlobals Option, weitergeleitet an QUnit. Melden Sie den richtigen Beendigungscode, um basierend auf Fehlern zu grunzen. Fügen Sie Unterstützung für AMD hinzu. – Markus

+0

Ich habe das Setup auf etwas umgestellt, das Jörn Zaefferer vorgeschlagen hatte (https://github.com/markusfalk/test-travis/tree/20150411_falk_require-qunn-as-amd/qunn), aber es läuft immer noch ab (https: // travis -ci.org/markusfalk/test-travis/builds/58909816) – Markus

Antwort

4

Mit Hilfe von Jörn kam ich zu einem funktionierenden Setup. Trick besteht darin, requireJS vor dem Laden von QUnit einzurichten (requireJS config in config.js verschieben und zuerst laden).

Anforderungen:

  • Grunzen-contrib-QUnit v0.7.0
  • QUnit v1.18.0

HTML-Testsuite:

<!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> 

Konfig.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(); 
}); 

Test-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'"); 
    }); 
    }; 
}); 

Und schließlich das Modul I zu testen wollen:

define(['jquery'], function($) { 
    'use strict'; 
    var Foo = { 
    saySomething: function() { 
     return "Hello"; 
    } 
    }; 
    return { 
    saySomething: Foo.saySomething 
    }; 
}); 
0

Apologies im Voraus, wenn ich bin das offensichtliche angeben, aber hast du PhantomJS installiert? Ich kann es nicht in Ihrer packages.json Datei sehen. Sie können es unter Verwendung von npm install phantomjs --save-dev in Ihrem Projektstammverzeichnis installieren. Der save-dev wird es zu Ihrer packages.json hinzufügen. Wenn Sie npm install ausführen, wird es automatisch installiert.

+0

Ich habe [email protected] installiert, die Phantomjs enthält – Markus

1

Haben Sie versucht, grunt mit den Flags -v und/oder -d auszuführen, um eine ausführlichere Ausgabe zu erhalten? Ich habe bemerkt, dass etwas in Bezug auf PhantomJS in Ihrem Travis-ci Build übersprungen wurde.

Writing location.js file

PhantomJS is already installed at /usr/local/phantomjs/bin/phantomjs.

npm WARN excluding symbolic link lib/socket.io-client.js -> io.js

Wenn es auf io.js abhängig ist und die Verbindung ist nicht da, wird es scheitern.

UPDATE: Ich habe das Problem mit der ausführlichen Ausgabe gefunden. Ihr Test ist 404 wegen eines Dateinamensproblems.

["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 "}]

Sie versuchen, die Datei test-Foo.js zu verwenden. Die Datei heißt test-foo.js in Ihrem Repository. Das Ändern des Falls sollte den Test beheben.

+0

Ich habe hinzugefügt -vd zu den Travis bauen, aber kann nicht wirklich viel Sinn machen es – Markus

+0

Ich fand die Antwort. Meine Antwort wurde aktualisiert, um zu reflektieren, was ich in der ausführlichen Ausgabe gefunden habe. – voldemortensen

+0

Danke für Ihre Bemühungen, aber das war nicht das Problem. Ich habe das 404 behoben aber immer noch das gleiche Ergebnis. – Markus