Criando testes em aplicação angular com Protractor

 Ao longo do desenvolvimento de sua aplicação fica cada vez mais difícil de testar todos os cenários possíveis conforme incluímos novas funcionalidades. Este é um velho assunto e mais uma vez a automação de testes esta ai para nos ajudar.

Se você esta criando suas aplicações em angular e sente a necessidade de saber se as páginas funcionam conforme o esperado, é uma boa prática implementar os testes com o PROTRACTOR

Quando você cria uma aplicação com angular cli, são incluídos os arquivos necessários para realizar testes automatizados com protractor. Estes arquivos podem ser encontrados no diretório e2e/src. Na pasta são encontrados arquivos de configuração do protractor e os arquivos iniciais para com os testes com código similar ao a seguir:

	import { AppPage } from './app.po';
	describe('workspace-project App', () => {
	let page: AppPage;
	beforeEach(() => {
	page = new AppPage();
	});
	it('should display welcome message', () => {
	page.navigateTo();
	expect(page.getParagraphText()).toEqual('Welcome to app!');
	});
	});

view raw app.e2e-spec.ts hosted with ❤ by GitHub

	import { browser, by, element } from 'protractor';
	export class AppPage {
	navigateTo() {
	return browser.get('/');
	}
	getParagraphText() {
	return element(by.css('app-root h1')).getText();
	}
	}

view raw app.po.ts hosted with ❤ by GitHub

Na construção dos testes você terá a disposição a união matadora do jasmine na parte de checagem com teste unitário e o selenium na parte de execução de navegador com teste de sistema. A organização de arquivos para teste contém uma combinação de arquivo .po.ts e outro .e2e-spec.ts. Por padrão toda iteração com navegador como navegação e obtenção de elementos deve ficar no arquivo po.ts, que conterá nossos objetos da pagina ou page objects. No arquivo e2e-spec é onde incluímos a lógica dos testes utilizando jasmine e importando a class de page objects para interagir com objetos do navegador e validar o sistema. Existe uma longa lista de métodos prontos para utilizar em seus testes e todos eles podem ser acessados na pagina de api do protractor. 

No código a seguir irei exemplificar alguns testes simples para verificar dados na tela. Neste código são testados navegação para url de página categorias, existência de tabela categorias e existência de linhas no corpo da tabela.

	import { CategoriasPage } from './categorias.po';
	describe('workspace-project categorias', () => {
	let pagina: CategoriasPage;
	beforeEach(() => {
	pagina = new CategoriasPage();
	});
	/**
	* descrição do teste dentro do primeiro parametro do metodo it
	* segundo parametro a funcão a ser executada
	*/
	it('deve navegar para categoria', () => {
	pagina.navegarParaCategorias();
	//espera que o texto seja igual categorias
	expect(pagina.obterTextoParagrafoPaginaCategorias()).toEqual('Categorias');
	});
	it('deve existir tabela categorias',() => {
	expect(pagina.obterTabelaCategorias().isPresent()).toEqual(true);
	})
	it('existem categorias cadastradas' ,() => {
	expect(pagina.existemCategoriasCadastradas()).toBe(true);
	})
	});

view raw categorias.e2e-spec.ts hosted with ❤ by GitHub

	import { browser, by, element } from 'protractor';
	export class CategoriasPage{
	navegarParaCategorias() {
	return browser.get('/categorias');
	}
	obterTextoParagrafoPaginaCategorias() {
	//navega entre os elementos da página buscando página categorias e o titulo da página
	return element(by.css('app-categorias h2')).getText();
	}
	obterTabelaCategorias(){
	return element(by.css('app-categorias table'));
	}
	existemCategoriasCadastradas(){
	return element(by.css('app-categorias table tbody tr')).isPresent();
	}
	}

view raw categorias.po.ts hosted with ❤ by GitHub

Para executar os testes e2e criados na sua aplicação basta digitar:

ng e2e 

Após a execução do comando no terminal, o resultado dos testes foram os seguintes:

O código de exemplo pode ser visto no github.