Backbone.js e PhantomJS: Criando testes web em front-end

O desenvolvimento de softwares web modernos assiste, hoje, a um verdadeiro renascimento do JavaScript, com a expansão da popularidade de aplicações dirigidas ao front-end, single-page, e que executam em tempo real. Para encabeçar a lista de tecnologias que dão suporte a tal status, temos um número considerável e crescente de frameworks web JavaScript que permitem aos desenvolvedores organizar suas aplicações dentro do que chamamos de “componentes modulares dirigidos a convenções”.

A medida que mais lógica e funcionalidades são transportadas do servidor para o browser, tais frameworks se fazem criticamente necessários para manter o estado da aplicação como um todo, evitando códigos ad hoc e desestruturados, provendo abstrações e o bom funcionamento de situações comumente encontradas no ciclo de desenvolvimento, como a comunicação com serviços de integração (banco de dados nos dispositivos locais, Web Services, etc.), geração de arquivos de exportação, relatórios, dentre outras.

Este artigo foca no framework Backbone.js, que se destaca por fornecer recursos de balanceamento de configuração, incluindo fortes abstrações em seu núcleo, bem como por ter um excelente suporte da sua comunidade de desenvolvimento. Ele provê um conjunto de interfaces (modelos, coleções, roteadores, views, etc.) para o desenvolvimento de uma aplicação enquanto mantém uma enorme flexibilidade ao permitir se comunicar com engines de geração de templates, bem como eventos extensíveis para comunicação entre diferentes componentes, e uma abordagem genérica para a interação entre código e padrões. Ele é usado em larga escala por aplicações de organizações como USA Today, LinkedIn, Hulu, Foursquare, Disqus, e muitas outras. Essencialmente, o Backbone.js provê ferramentas práticas para a construção de aplicações web cliente-heavy (que exigem muito poder de processamento do browser) sem exigir tanto esforço do programador para isso.

Entretanto, esse mundo de evoluções front-end está repleto de muitos obstáculos em potencial. Mais especificamente, enquanto as possiblidades de criação de aplicações das mais diversas formas com frameworks JavaScript modernos como o Backbone.js são infinitas, um dos principais problemas que circundam esse universo está relacionado à qualidade com que os softwares como um todo são entregues, tanto no que se refere ao código e arquitetura da aplicação, quanto em relação ao bom funcionamento dos mesmos. Isso se deve, principalmente, ao fato de ser uma tecnologia recente, e não ter tido ainda todas as boas práticas e padrões organizacionais absorvidos pelos desenvolvedores que a usam.

As estatísticas e a experiência de profissionais e empresas da área provam que o mundo JavaScript é notoriamente difícil de ser verificado, testado: eventos assíncronos no DOM e dados de requisições são sujeitos a problemas de timing (tempo limite de processamento) e até falhas maiores, uma vez que a exibição de comportamentos do sistema é difícil de ser separada da lógica da aplicação, além disso as suítes de teste dependem da interação com um browser em específico. Para acabar de completar, os frameworks front-end adicionam uma camada extra de complexidade com interfaces adicionais que precisam ser isoladas e testadas, com vários componentes interagindo concorrentemente, e a lógica de eventos propagando por sobre as camadas da aplicação.

Com base nisso, trataremos de expor aqui o desafio de identificar as partes de uma aplicação a ser testada, definindo os corretos funcionamentos dos vários componentes da mesma, e verificando se o programa funciona como foi planejado para o fazer em sua total integridade. Outrossim, será pré-requisito para a leitura e compreensão deste artigo conhecimentos básicos em JavaScript (o mínimo para que se sinta confortável com objetos, Orientação a Objetos, tipificação, etc.) e jQuery, uma vez que a biblioteca será usada para minimizar a escrita do código complexo da aplicação. Além disso, é necessário que o usuário já tenha conhecimentos medianos sobre o Backbone.js, visto que não faremos implementação de código, e sim de testes.

Estruturando ambiente de teste

Para configurar uma infraestrutura de testes em sua aplicação, você precisa primeiramente de um plano definido de para onde cada uma das partes e pedaços do teste irão existir fisicamente. Começaremos com uma simples estrutura para o nosso repositório de código, como a demonstrada na Listagem 1.

Listagem 1. Estrutura inicial de diretórios da nossa aplicação.

01 app/
  02   index.html
  03   css/
  04   js/
  05     app/
  06     lib/
  07 teste/
  08    teste.html
  09    js/
  10      lib/
  11      spec/

Reproduza essa estrutura em um local de sua máquina, de preferência próximo a raiz de algum dos discos do computador, uma vez que precisaremos fazer algumas execuções que exigirão cópia do caminho absoluto do referido diretório.

O arquivo index.html contém o código da aplicação web, enquanto o teste.html fornece as páginas de teste. Já as bibliotecas da aplicação e de teste estarão contidas nas pastas app/js e teste/js, respectivamente.

Nós faremos uso ainda de três bibliotecas complementares aos nossos testes: o Mocha, o Chai e o Sinon.JS, que contêm um conjunto de recursos bem acoplados para testes em Backbone.js. Em adição a elas, também faremos uso do PhantomJS para automatizar nossa infraestrutura de testes e executar os testes a partir da linha de comando.

Configurando o PhantomJS

O PhantomJS é um “pseudo-browser” webkit com uma API JavaScript completa que executa no console do seu sistema operacional. Ele tem suporte nativo a vários padrões dos Web Standards, tais como DOM, seletores CSS, JSON, Ajax, Canvas, SVG, etc. O poder do PhantomJS é tão significativo para uma aplicação desse tipo que ele consegue inclusive acessar e manipular páginas com passe livre para o DOM e para todas as bibliotecas JS, como jQuery, Prototy ...