2015-06-05 17 views
7

Sto provando ad aggiungere il test dell'unità per JavaScript nel mio sito web. Io uso VS2013 e il mio progetto è un sito Web ASP.NET.Come creare test QUnit con riferimento ad un'altra classe?

Sulla base delle raccomandazioni (http://www.rhyous.com/2013/02/20/creating-a-qunit-test-project-in-visual-studio-2010/) che ho fatto finora:

  1. Creato nuova applicazione ASP.NET
  2. importata QUnit (tramite NuGet)
  3. Into "Script" link aggiunti al JS- file nel mio sito Web originale (file PlayerSkill.js - contiene PlayerSkill class e trainings.js - contiene il Trainer e alcune altre classi)
  4. Creata nuova cartella "TestScripts"
  5. Aggiunto TrainingTests.js il file
  6. Ha scritto semplice test:

    test("Trainer should have non-empty group", function() { 
        var group = "group"; 
        var trainer = new Trainer(123, "Name123", group, 123); 
        EQUAL(trainer.getTrainerGroup(), group); 
    }); 
    

Avviso: il mio file trainings.js tra gli altri contiene

function Trainer(id, name, group, level) { 
    ... 
    var _group = group; 
    this.getTrainerGroup = function() { return _group ; } 
}; 

Quando eseguo la mia prova vedo errore: Trainer non è definito .

Sembra che il riferimento alla mia classe non sia riconosciuto. Mi sembra che il file di collegamento non sia abbastanza, ma cosa mi è mancato?

Si prega di contribuire ad aggiungere riferimento al file originale con classe ed eseguire test di unità.

Grazie.

P.S. Domanda 2: Posso aggiungere un riferimento a 2 file (il mio test di unità richiederà un'altra classe che si trova in un altro file)? Come?

risposta

4

Si dovrebbe aggiungere tutta la logica corrispondente della vostra applicazione per il file test di unità in modo che tutti eseguono prima di eseguire i test

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>QUnit Test Results</title> 
     <link rel="stylesheet" href="/Content/qunit.css"> 
    </head> 
    <body> 
     <div id="qunit"></div> 
     <div id="qunit-fixture"></div> 
     <script src="/Scripts/qunit.js"></script> 
     <script src="/Scripts/PlayerSkill.js"></script> 
     <script src="/Scripts/trainings.js"></script> 
     <script src="/TestScripts/TrainingTests.js"></script> 
    </body> 
</html> 

Si non dovrebbe uso legato file perché essi non esiste fisicamente nella cartella degli script.

Se si desidera veramente utilizzarli, è necessario consentire a Visual Studio intellisense di risolvere il percorso fisico del file in questo modo.

  1. Digitare il tag script <script src=""></script>
  2. Posizionare il cursore all'interno delle virgolette nella attributo src e premere CTRL + SPACE
  3. Cerca i file e lasciare che il percorso risolto intatta
  4. Se la posizione di modifiche del progetto è necessario aggiornare i file collegati e anche i riferimenti di script.

{Edit1}

Soluzione 2:

Si potrebbe anche usare un controller MVC e un rasoio View per creare la tua pagina di test di unità ei file collegati funzionerà come previsto con la sola problema che avrai un controller in più nel tuo progetto ma questo non è affatto male se per esempio vuoi testare il caricamento dei contenuti usando ajax che per impostazione predefinita è bloccato dal browser se sono eseguiti da un file locale.

Soluzione 3:

È possibile anche impostare un nuovo progetto MVC solo per la vostra unit testing javascript proprio come di solito l'installazione di un nuovo progetto per qualsiasi codice lato server e questo vi aiuterà a evitare che il test per interferire con la vostra codice di produzione

{2} Modifica

Soluzione 4:

Come parte dell'ecosistema javascript si potrebbe usare grugnito o sorso di automatizzare la copia dei tuoi script da qualsiasi parte del tuo progetto prima di eseguire i test. Si potrebbe scrivere un gulpfile.js come questo

var sourcefiles = [/*you project file paths*/]; 
gulp.task('default', function() { 
    return gulp.src(sourcefiles).pipe(gulp.dest('Scripts')); 
}); 

e quindi eseguirlo apertura di una console e l'esecuzione del comando gulp o gulp default

+0

Per quanto riguarda prima parte del commento: premendo Ctrl + Spazio con la "" non aiuta: VS non permette di scegliere il file dal sito web corrente. – Budda

+0

Riguardo alla 2a parte: consiglia di creare controller MVC e Razor View nel mio progetto originale? Voglio chiaramente evitare questo. Ma se li creo in Test-project ... come risolverà il problema? Non riesco ancora a fare riferimento a file esterni. Ti consiglia di caricare file JS esterni in modo dinamico? – Budda

+0

@Budda Informazioni sulla prima parte VS ** risolverà il percorso se aggiungi il file come collegato, se non lo hai ancora aggiunto. Ho già provato e funziona. Per quanto riguarda la seconda parte, in genere le persone creano progetti separati per i test unitari in modo da poter creare un progetto MVC separato per javascript, a seconda delle dimensioni del progetto e della quantità di test delle unità. IMHO il * modo giusto * è quello di creare un'attività di gulp e copiare i file di script prima del test, ma questo può essere complicato per progetti molto semplici. – devconcept

3

Sembra trainings.js non è definito al momento della chiamata TrainingTests.js. Vedi la domanda this per ulteriori dettagli sul perché questo accade! Una volta risolto, funziona. E sì, simile a trainings.js puoi avere un numero qualsiasi di file in qualsiasi cartella purché tu li faccia riferimento correttamente. Ho creato un violino campione accessibili @http://plnkr.co/edit/PnqVebOzmPpGu7x2qWLs?p=preview

<body> 
    <div id="qunit"></div> 
    <div id="qunit-fixture"></div> 
    <script src="http://code.jquery.com/qunit/qunit-1.18.0.js"></script> 
    <script src="trainings.js"></script> 
    <script src="TrainingTests.js"></script> 
</body> 
+0

Grazie, ma voglio fare riferimento al file. I tentativi di fare riferimento a JS di un sito Web da un altro non funzionano. Credo che VS e IIS lo impediscano. – Budda

+0

Ok, ma la tua domanda non ha menzionato nulla sulla necessità di fare riferimento al file js da un altro server :) – prem89

0

Beh, a causa di aiuto di due risposte che ho fatto localizzare il problema in effetti era in incapacità di VS per copiare file necessario nel progetto di test.

Questo può essere probabilmente risolto diversi modi, ho trovato uno, idea copiata da: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

soluzione è semplice: aggiungere tag dinamicamente

Al fine di raggiungere questo obiettivo, ho aggiunto il seguente codice in tag:

<script> 
    var fileref = document.createElement('script'); 
    fileref.setAttribute("type", "text/javascript"); 
    var path = 'path'; // here is an absolute address to JS-file on my web site 
    fileref.setAttribute("src", path); 
    document.getElementsByTagName("head")[0].appendChild(fileref); 

    loadjscssfile(, "js") //dynamically load and add this .js file 
</script> 

e si è trasferito le mie prove in (richiesti anche riferimento a jQuery prima)

$(document).ready(function() { 
     QUnit.test("Test #1 description", function() { ... }); 
    }); 

L'approccio simile funziona anche per i file di test puri.

+0

Questo è un overkill per un'attività molto semplice. È esattamente la stessa cosa includere il tag script con il percorso assoluto del file, l'unica differenza è che verrà aggiunta in seguito, che a un certo punto potrebbe rappresentare un problema per i test delle unità, poiché è necessario attendere il caricamento di questi script. Anche avere un problema principale, non è possibile fare riferimento a file collegati con questo metodo o file al di fuori del tuo sito web. Devi prima copiarli, che potrebbero essere facilmente automatizzati con un compito di gulp, in entrambi i casi non è una buona soluzione. – devconcept

+0

Sono scarso in JavaScript e strumenti di configurazione/creazione, quindi se ho qualche soluzione che funzioni (specialmente se ho passato un lungo modo per farlo funzionare) a volte mi fermo con questo. – Budda

+0

Il problema è che nel tuo caso devi scrivere codice boilerplate per assicurarti che gli script vengano caricati quando esegui i test. Il risultato di non farlo è che non appena il progetto cresce, finisci con test indeterminativi. A volte avrete un test che fallisce senza una ragione apparente e il motivo è che i vostri test vengono eseguiti e lo script ha completato il caricamento di alcuni millisecondi dopo. È necessario rimuovere tutti i fattori che possono potenzialmente far fallire il test. Ecco perché aggiungere javascript in modo dinamico non è una buona idea a meno che non sia davvero giustificato o sia anche parte del test. – devconcept