2015-04-03 16 views
10

Sto provando a configurare un ambiente QUnit usando requirejs e grunt-contrib-qunit.Come impostare il task grunt per requirejs e qunit

Ecco quello che ho.

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

}); 

Il problema è che tutto funziona correttamente quando apro il test-suite.html nel mio browser. Una volta inviato a PhantomJS ottengo il seguente errore:

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. 

configurazione completa: https://github.com/markusfalk/test-travis

Test Run: https://travis-ci.org/markusfalk/test-travis

Grazie per qualsiasi aiuto :)

+0

Is il ponte del problema? Cosa si potrebbe fare a riguardo? http://stackoverflow.com/a/18433173/2538388 Ma in realtà carico Qunit all'interno dell'HTML e non tramite requireJS – Markus

+0

Ho appena scoperto che l'uso di [email protected] renderà funzionante questa configurazione. Forse ha a che fare con l'aggiornamento che hanno fatto: v0.6.0 Aggiungi l'opzione noGlobals, inoltrata a QUnit. Segnala il codice di uscita corretto a grugnito in base agli errori. Aggiungi supporto per AMD. – Markus

+0

Ho rielaborato l'installazione su qualcosa che Jörn Zaefferer aveva proposto (https://github.com/markusfalk/test-travis/tree/20150411_falk_require-qunit-as-amd/qunit) ma è ancora in timeout (https: // travis -ci.org/markusfalk/test-travis/builds/58909816) – Markus

risposta

4

Con l'aiuto di Jörn mi è venuta una configurazione di lavoro. Trucco è impostare requireJS prima dei carichi QUnit (spostato requireJS config su config.js e caricarlo prima).

Requisiti:

  • grugnito-contrib-qunit v0.7.0
  • qunit v1.18.0 suite di test

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

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

E infine il modulo che voglio prova:

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

Ci scusiamo in anticipo se sto affermando l'ovvio ma hai installato PhantomJS? Non riesco a vederlo nel file packages.json. Puoi installarlo usando npm install phantomjs --save-dev nella root del progetto. Save-dev lo aggiungerà al pacchetto packages.json così quando verrà eseguito npm install verrà automaticamente installato.

+0

Ho installato [email protected] che include phantomjs – Markus

1

Hai provato a eseguire grunt con i flag -v e/o -d per ottenere un output più dettagliato? Ho notato che c'era qualcosa saltato riguardo a PhantomJS nella tua costruzione di travis-ci.

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

Se dipende da io.js e il collegamento non è presente, non funzionerà.

UPDATE: Ho trovato il problema utilizzando l'output dettagliato. Il tuo test sta inviando 404 a causa di un problema di nome file.

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

Stai provando a utilizzare il file test-Foo.js. Il file è denominato test-foo.js nel tuo repository. Cambiando il caso dovrebbe risolvere il test.

+0

Ho aggiunto -vd alla build di travis ma non posso davvero dare molto senso it – Markus

+0

Ho trovato la risposta. Aggiornato la mia risposta per riflettere ciò che ho trovato nell'output dettagliato. – voldemortensen

+0

Grazie per i vostri sforzi ma non era questo il problema. Ho risolto il 404, ma ottengo lo stesso risultato. – Markus