FlexUnit 4 – Testando componentes visuais

Colocado por DClick Team na(s) categoria(s): 1, 4, 6, app, AR, class, classe, collection, Componente, Componentes, DataProvider, demo, Dica, event, EventListener, Evento, Flex, for, function, handle, ide, IE, if, int, lista, O, on, problema, processo, RIA, Ria’s Geral, Sem categoria, tag, TAT, Teste, Twitter, UI, update, XML, XMLList em 02 24th, 2011 | Sem comentários

Bom, acho que essa dica vai ajudar se você está pensando em testar componentes visuais.

No projeto do componente de organograma para a Petrobrás, além dos testes unitários padrões eu me aventurei um pouco com testes visuais do componente para me assegurar que dada uma modificação de algumas propriedades no componente o mesmo estava modificando corretamente sua visualização e avisando os componentes de suporte como Navigator, Logger dessas modificações.

O problema de testes visuais que acredito que todos saibam está no ciclo de vida dos componentes. Não conseguimos ser determinísticos em quanto tempo o componente estará pronto para sofrer asserts em suas propriedades. Vamos começar com o setUp e o tearDown de um teste unitário visual.

Vamos utilizar o FlexUnit 4.x nos casos de teste

1
2
3
4
5
6
7
8
9
10
11
12

[Before( async, ui )]
public function setUp ():void {
_chart = new OrganizationChart();
Async.proceedOnEvent( this, _chart, FlexEvent.CREATION_COMPLETE, 1000 )
UIImpersonator.addChild( _chart );
}

[After( ui )]
public function tearDown ():void {
UIImpersonator.removeChild( _chart );
_chart = null;
}

[Before( async, ui )]
Será executado antes de todos os casos de teste. As indicações async e ui na metadata dizem para o Runner do teste que esse método possui processos assíncronos e que o mesmo deve verificar a classe Async para proceder com o teste.

Async.proceedOnEvent( this, _chart, FlexEvent.CREATION_COMPLETE, 1000 )
Avisa que o teste só deve continuar quando o evento FlexEvent.CREATION_COMPLETE for disparado pelo componente.

UIImpersonator.addChild( _chart );
Adiciona o componente como um filho de uma espécie de Application que iniciará o ciclo de vida de criação do componente.

[After( ui )]
Executando após o teste em questão ser executado. Faz a limpeza dos elementos criados anteriormente.

UIImpersonator.removeChild( _chart );
Remove o componente da lista de filhos e executa o ciclo de vida de destruição do componente.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

[Test( async )]
public function testDataProvider():void {
var x:XML = sampleXML.data as XML;
var collection:XMLListCollection = new XMLListCollection( new XMLList( x.item ) );

var asyncHandler:Function = Async.asyncHandler( this, updateCompleteHandler, timeout );
_chart.addEventListener( FlexEvent.UPDATE_COMPLETE, asyncHandler );

_chart.dataProvider = collection;
}

private function updateCompleteHandler( event:FlexEvent, passData:Object ):void {
Assert.assertEquals( 10, _chart.dataGroup.numElements );
}

No caso do componente, ao setar o dataProvider ele modifica o dataProvider de um DataGroup interno, que consequentemente vai efetuar a criação dos renderers. Nesse teste estamos validando se “ao preencher o dataProvider o DataGroup está criando os renderers enviados na coleção” efetuando a contagem de elementos presentes no DataGroup.

Utilizando o mesmo tipo de teste assíncrono podemos testar algumas interações do usuário como MouseEvent.MOUSE_CLICK, MouseEvent.MOUSE_MOVE simplesmente pegando a instância do componente criado e executando o evento manualmente. Com isso os listeners serão disparados e você poderá utilizar o Async.asyncHandler para escutar um determinado do componente e efetuar os asserts necessários para validar se a interação modificou as propriedades do componente.

Veja o post original no blog do autor aqui!