Testes

Configuração

Testar aplicações Mithril.js é relativamente fácil. A maneira mais simples de começar é com ospec, mithril-query e JSDOM. A instalação desses pacotes é bastante simples: abra um terminal e execute este comando.

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

A configuração também é relativamente fácil e requer alguns passos curtos:

1. Adicione um "test": "ospec" aos seus scripts npm no seu arquivo package.json. O resultado será algo semelhante a isto, talvez com alguns campos extras relevantes para o seu projeto:

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

2. Crie um arquivo de configuração, test-setup.js, com o seguinte conteúdo:

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

// Define as variáveis globais que o Mithril.js precisa para operar. Além disso, as duas primeiras são frequentemente
// úteis para usar nos testes.
global.window = dom.window;
global.document = dom.window.document;
global.requestAnimationFrame = dom.window.requestAnimationFrame;

// Importe o Mithril.js para garantir que ele seja carregado corretamente.
require('mithril');

// Finalmente, garanta que o JSDOM seja finalizado após a conclusão dos testes.
o.after(function () {
  dom.window.close();
});

3. Crie um componente, digamos src/my-component.js, com o seguinte conteúdo:

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

module.exports = MyComponent;

4. E, finalmente, crie um arquivo de teste, digamos src/tests/my-component.js, com o seguinte conteúdo:

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

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

o.spec('MyComponent', function () {
  o('things are working', function () {
    var out = mq(MyComponent, { text: 'What a wonderful day to be alive!' });
    out.should.contain('day');
  });
});

Depois de ter tudo configurado, no mesmo terminal em que você instalou tudo, execute este comando.

npm test

Se você tiver tudo configurado corretamente, você deverá obter um resultado semelhante a este:

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

Melhores práticas

Os testes são relativamente simples na maioria dos casos. Cada teste geralmente consiste em três partes: configurar o estado, executar o código e verificar os resultados. Mas há coisas que você precisa ter em mente ao testar, para garantir o melhor aproveitamento do seu tempo e para ajudar a economizar muito tempo.

1. Primeiro e acima de tudo, você deve escrever seus testes o mais cedo possível no processo. Você não precisa escrever seus testes imediatamente, mas você deve, pelo menos, escrevê-los à medida que escreve seu código. Dessa forma, se as coisas não estiverem funcionando como você pensava, você gastará 5 minutos agora, sabendo exatamente o que está acontecendo, em vez de 5 dias consecutivos, 6 meses depois, quando você estiver tentando lançar aquela ideia incrível de aplicativo que agora está completamente inoperante. Você não vai querer se ver nessa situação.

2. Teste a API, teste o comportamento, mas não teste a implementação. Se você precisa testar se um evento está sendo disparado quando uma ação particular acontece, isso é perfeitamente aceitável, e sinta-se à vontade para fazer isso. Mas não teste a estrutura DOM inteira no seu teste. Você não quer ficar preso tendo que reescrever parte de 5 testes diferentes só porque você adicionou uma classe simples relacionada ao estilo. Você também não quer reescrever todos os seus testes simplesmente porque você adicionou um novo método de instância a um objeto.

3. Não evite repetições, e só abstraia quando estiver fazendo a mesma coisa dezenas a centenas de vezes no mesmo arquivo ou quando você estiver explicitamente gerando testes. Normalmente, no código, é uma boa ideia estabelecer um limite quando você repete a mesma lógica mais de 2-3 vezes e abstraí-la em uma função, mas quando você está testando, mesmo que haja muita lógica duplicada, essa redundância ajuda no diagnóstico de problemas. Lembre-se: testes são especificações, não código normal.

Teste unitário

O teste unitário isola partes da sua aplicação, geralmente um único módulo, mas às vezes até mesmo uma única função, e os testa como uma única "unidade". Ele verifica se, dada uma entrada específica e um estado inicial, ele produz a saída e os efeitos esperados. Tudo isso parece complicado, mas eu prometo, não é. Aqui estão alguns testes unitários para o operador + do JavaScript para números:

o.spec('addition', function () {
  o('works with integers', function () {
    o(1 + 2).equals(3);
  });

  o('works with floats', function () {
    // Sim, devido às peculiaridades do padrão IEEE-754 para ponto flutuante.
    o(0.1 + 0.2).equals(0.30000000000000004);
  });
});

Assim como você pode realizar testes unitários em coisas simples como essa, você pode testar unitariamente componentes Mithril.js também. Suponha que você tenha este 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;

Você poderia facilmente criar alguns testes unitários para isso.

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

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

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

  o("says 'Hello, world!' when no `type` is given", function () {
    var out = mq(MyComponent);
    out.should.contain('Hello, world!');
  });
});

Como mencionado anteriormente, os testes são especificações. Você pode ver pelos testes como o componente deve funcionar, e o componente funciona exatamente como esperado.