Testing

Setup

Testare applicazioni Mithril.js è piuttosto semplice. Il modo più semplice per iniziare è usare ospec, mithril-query e JSDOM. Installare questi strumenti è facile: apri un terminale ed esegui questo comando.

npm install --save-dev ospec mithril-query jsdom

Anche la configurazione è semplice e richiede alcuni brevi passaggi:

1. Aggiungi "test": "ospec" agli script npm nel file package.json. Alla fine, avrai qualcosa di simile a questo, magari con alcuni campi extra rilevanti per il tuo progetto:

{
  "name": "my-project",
  "scripts": {
    "test": "ospec --require ./test-setup.js"
  }
}

2. Crea un file di setup, test-setup.js, come questo:

var o = require('ospec');
var jsdom = require('jsdom');
var dom = new jsdom.JSDOM('', {
  // Per ottenere `requestAnimationFrame`
  pretendToBeVisual: true,
});

// Imposta le variabili globali necessarie a Mithril.js per funzionare.
// Inoltre, le prime due sono spesso utili nei test.
global.window = dom.window;
global.document = dom.window.document;
global.requestAnimationFrame = dom.window.requestAnimationFrame;

// Richiedi Mithril.js per assicurarti che venga caricato correttamente.
require('mithril');

// Assicurati che JSDOM termini quando terminano i test.
o.after(function () {
  dom.window.close();
});

3. Crea un componente, ad esempio src/my-component.js, simile a questo:

function MyComponent() {
  return {
    view: function (vnode) {
      return m('div', vnode.attrs.text);
    },
  };
}

module.exports = MyComponent;

4. Infine, crea un file di test, ad esempio src/tests/my-component.js, come questo:

var mq = require('mithril-query');
var o = require('ospec');

var MyComponent = require('../my-component.js');

o.spec('MyComponent', function () {
  o('verifica il funzionamento', function () {
    var out = mq(MyComponent, { text: 'Che bella giornata per essere vivi!' });
    out.should.contain('day');
  });
});

Se la configurazione è corretta, nello stesso terminale in cui hai installato tutto, esegui questo comando.

npm test

Se la configurazione è corretta, dovresti ottenere un output simile a questo:

––––––
All 1 assertions passed in 0ms

Best practices

I test sono abbastanza semplici nella maggior parte dei casi. Ogni test di solito consiste di tre parti: impostare lo stato iniziale, eseguire il codice e controllare i risultati. Ma ci sono alcune cose da tenere a mente durante i test, per assicurarti di ottenere il massimo dal tuo investimento e per aiutarti a risparmiare molto tempo.

1. Prima di tutto, si consiglia di scrivere i test il prima possibile nel processo di sviluppo. Non è necessario scrivere i test immediatamente, ma è consigliabile almeno scriverli mentre scrivi il codice. In questo modo, se le cose non funzionano come previsto, spenderai 5 minuti ora, sapendo esattamente cosa sta succedendo, invece di 5 giorni di fila 6 mesi dopo, quando stai cercando di rilasciare quell'incredibile idea di app che ora è completamente non funzionante. Non vuoi trovarti in questa situazione.

2. Verifica l'API e il comportamento, ma non testare l'implementazione interna. Se hai bisogno di testare che un evento venga attivato quando si verifica una particolare azione, è accettabile e puoi procedere. Ma non testare l'intera struttura DOM nel tuo test. È meglio evitare di dover riscrivere parte di 5 test diversi solo perché hai aggiunto una semplice classe relativa allo stile. Inoltre, è meglio evitare di dover riscrivere tutti i tuoi test semplicemente perché hai aggiunto un nuovo metodo di istanza a un oggetto.

3. Non evitare la ripetizione e astrai solo quando stai facendo la stessa cosa decine o centinaia di volte nello stesso file o quando stai generando test esplicitamente. Normalmente, nel codice, è una buona idea tracciare una linea quando stai ripetendo la stessa logica più di 2-3 volte e astrarla in una funzione, ma quando stai testando, anche se c'è molta logica duplicata, quella ridondanza ti fornisce il contesto quando risolvi i problemi dei test. Ricorda: i test servono come specifiche, non come codice normale.

Unit testing

Il test unitario isola le parti della tua applicazione, di solito un singolo modulo ma a volte anche una singola funzione, e le testa come una singola "unità". Verifica che, dato un particolare input e uno stato iniziale, produca l'output e gli effetti collaterali desiderati. Tutto questo sembra complicato, ma ti prometto che non lo è. Ecco un paio di test unitari per l'operatore + di JavaScript, applicato ai numeri.

o.spec('addition', function () {
  o('funziona con numeri interi', function () {
    o(1 + 2).equals(3);
  });

  o('funziona con numeri decimali', function () {
    // Sì, grazie IEEE-754 per la stranezza dei numeri in virgola mobile.
    o(0.1 + 0.2).equals(0.30000000000000004);
  });
});

Proprio come puoi testare cose semplici come quella, puoi testare anche i componenti Mithril.js. Supponiamo che tu abbia questo componente:

// MyComponent.js
var m = require('mithril');

function MyComponent() {
  return {
    view: function (vnode) {
      return m('div', [
        vnode.attrs.type === 'goodbye' ? 'Goodbye, world!' : 'Hello, world!',
      ]);
    },
  };
}

module.exports = MyComponent;

Potresti facilmente creare alcuni test unitari per questo.

var mq = require('mithril-query');
var MyComponent = require('./MyComponent');

o.spec('MyComponent', function () {
  o("dice 'Hello, world!' quando `type` è `hello`", function () {
    var out = mq(MyComponent, { type: 'hello' });
    out.should.contain('Hello, world!');
  });

  o("dice 'Goodbye, world!' quando `type` è `goodbye`", function () {
    var out = mq(MyComponent, { type: 'goodbye' });
    out.should.contain('Goodbye, world!');
  });

  o("dice 'Hello, world!' quando non viene fornito alcun `type`", function () {
    var out = mq(MyComponent);
    out.should.contain('Hello, world!');
  });
});

Come già menzionato, i test sono specifiche. Puoi vedere dai test come dovrebbe funzionare il componente e il componente lo fa in modo molto efficace.