Testare con NPM ([name])

Questo articolo mostra come inserire three.js in un ambiente [link:https://nodejs.org/en/ node.js] così che tu possa eseguire test automatici. I test possono essere eseguiti da linea di comando o da strumenti CI automatici come [link:https://travis-ci.org/ Travis].

Versione breve

Se sei a tuo agio con node e npm, installa npm $ npm install three --save-dev e aggiungi const THREE = require('three'); al tuo test.

Creare un progetto testabile da zero

Se non sei familiare con questi strumenti, ecco una guida rapida per linux (il processo di installazione sarà leggermente diverso usando Windows, ma i comandi NPM saranno uguali).

Configurazione di base

  1. Installa [link:https://www.npmjs.org/ npm] e nodejs. Il percorso più breve in genere assomiglia a qualcosa del simile: $ sudo apt-get install -y npm nodejs-legacy # fix any problems with SSL in the default registry URL $ npm config set registry http://registry.npmjs.org/
  2. Crea una nuova cartella per il progetto $ mkdir test-example; cd test-example
  3. Crea un nuovo file di progetto tramite npm: $ npm init e accetta tutti i valori suggeriti premendo Enter per ogni richiesta. Con queste richieste si creerà il file package.json.

  4. Prova ad avviare la funzione di test con: $ npm test fallirà, come ci aspettiamo. Se controlli nel file package.json la definizione dello script di test è: "test": "echo \"Error: no test specified\" && exit 1"

Aggiungere mocha

Utilizzeremo [link:https://mochajs.org/ mocha].
  1. Installare mocha con: $ npm install mocha --save-dev Si noti che è stata creata la cartella node_modules/ e le tue dipendenze sono state installate al suo interno. Inoltre, si noti che il file package.json è stato aggiornato: è stata aggiunta la proprietà devDependencies, aggiornata dal comando --save-dev.

  2. Modificare il file package.json per usare mocha per i test. Quando viene invocato il test, vogliamo eseguire mocha e specificare un reporter dettagliato. Per impostazione predefinita questo eseguirà qualsiasi cosa nella cartella test/ (non avendo una cartella test/ si può incorrere in un npm ERR!, bisogna crearla con il comando mkdir test) "test": "mocha --reporter list"
  3. Rilanciare il test con: $ npm test Adesso il test dovrebbe essere eseguito con successo, riportando "0 passing (1ms) or similar".

Aggiungere three.js

  1. Inseriamo la nostra dipendenza three.js con il comando: $ npm install three --save-dev
    • Se hai bisogno di una versione di three.js diversa, usa $ npm show three versions per vedere quali sono le versioni disponibili. Per dire ad npm la versione scelta, usa $ npm install three@0.84.0 --save (0.84.0 nell'esempio). --save fa sì che sia una dipendenza del progetto piuttosto che una devDependecy. Per maggiori informazioni consulta il documento [link:https://docs.npmjs.com/cli/v8/configuring-npm/package-json qui].
  2. Mocha cercherà i test nella cartella test/, quindi creiamola $ mkdir test
  3. Infine abbiamo effettivamente bisogno di un test JS per l'esecuzione. Aggiungiamo un semplice test il quale verificherà che l'oggetto three.js sia disponibile e funzionante. Crea il file test/verify-three.js contenente: const THREE = require('three'); const assert = require('assert'); describe('The THREE object', function() { it('should have a defined BasicShadowMap constant', function() { assert.notEqual('undefined', THREE.BasicShadowMap); }), it('should be able to construct a Vector3 with default of x=0', function() { const vec3 = new THREE.Vector3(); assert.equal(0, vec3.x); }) })
  4. Adesso rieseguiamo il test con il comando $ npm test. Questo dovrebbe eseguire i test sopra definiti e terminare con successo, mostrando qualcosa del tipo: The THREE object should have a defined BasicShadowMap constant: 0ms The THREE object should be able to construct a Vector3 with default of x=0: 0ms 2 passing (8ms)

Aggiungere il tuo codice

Hai bisogno di fare tre cose:
  1. Scrivere un test per il comportamento che di aspetti dal tuo codice, e metterlo all'interno della cartella test/. [link:https://github.com/air/encounter/blob/master/test/Physics-test.js Qui] un esempio di un progetto reale.
  2. Esportare il tuo codice funzionale in modo tale che nodejs possa vederlo per usarlo insieme a require. Controlla [link:https://github.com/air/encounter/blob/master/js/Physics.js qui].
  3. Richiamare il tuo codice nel file di test, allo stesso modo in cui abbiamo fatto per richiamare three nell'esempio sopra `require('three')`

Il punto 2 e 3 saranno molto dipendenti da come hai gestito il tuo codice. Nell'esempio di Physics.js fornito sopra, la parte di esportazione si trova giustamente alla fine. Assegniamo un oggetto a module.exports:

//============================================================================= // make available in nodejs //============================================================================= if (typeof exports !== 'undefined') { module.exports = Physics; }

Affrontare le dipendenze

Se stai già utilizzando qualcosa di smart come require.js o browserify, salta questa parte.

Tipicamente un progetto three.js verrà eseguito nel browser. Il caricamento del modulo viene quindi eseguito dal browser che esegue una serie di tag di script. I tuo singoli file non si devono preoccupare per le dipendenze. Tuttavia, in un contesto nodejs non è presente il file index.html che lega tutto insieme, quindi devi essere esplicito.

Se stai esportando un modulo che dipende da altri file, dovrai dire a node di caricarli. Di seguito un approccio:

  1. All'inizio del tuo modulo, controlla se ti trovi in un ambiente nodejs.
  2. Se è così, dichiara esplicitamente le tue dipendenze.
  3. In caso contrario, probabilmente sei in un browser e quindi non devi fare nient'altro.
Esempio di codice da Physics.js: //============================================================================= // setup for server-side testing //============================================================================= if (typeof require === 'function') // test for nodejs environment { const THREE = require('three'); const MY3 = require('./MY3.js'); }