Uma introdução ao Protractor - Angular Testing E2E
Tags: javascript, angular, testing, e2e
Published: 2023-01-22 21:47:31


Neste pequeno post pretendo condensar meu estudos referente a ferramenta  **[Protactor](https://www.protractortest.org/#/)** compartilhando este pequeno documento como "guia" de consulta sobre o assunto.

## O que são testes 🤔

O teste do software é a investigação do software a fim de fornecer informações sobre sua qualidade em relação ao contexto em que ele deve operar, se relaciona com o conceito de verificação e validação. Isso inclui o processo de utilizar o produto para encontrar seus defeitos.
 

Dito isso teste de softwares tem apenas uma finalidade **revelar falhas/bugs para que sejam corrigidas até que o produto final atinja a qualidade desejada / acordada**.

Com isso, seguimos um  **ciclo** de **desenvolvimento** onde escrevemos:

- **(Red)**: É a primeira fase do ciclo, em que o desenvolvedor escreve um código de teste para uma nova funcionalidade, ainda que não tenha o código de produção elaborado. Provavelmente, esse teste vai falhar, mas é justamente essa a intenção.
- **(Green)**: Esta é a segunda etapa, em que é feito o código que irá passar no teste da etapa anterior. É importante que somente esse código seja escrito.
- **(Refactoring)**: Esta é a etapa final, para limpar o código, melhorar estruturas, diminuir as linhas e aprimorar a performance.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1upn35l7xxaw7rlg6sqm.png)


          *Imagem referente ao ciclo do TDD.*

Existem também diversos tipos de testes de softwares alguns são:

- **Teste de unidade** – testa-se unidades menores de um software, de modo isolado, para ver se todas funcionam adequadamente;
- **Teste de integração** – depois das unidades testadas, realiza-se uma verificação se elas funcionam juntas, integradas. Pode ocorrer delas apresentarem incompatibilidades ao funcionarem em conjunto, mesmo após terem sido aprovadas no teste de unidade;
- **Testes E2E**  - São baseados em regras e/ou requisitos associados à uma ação do usuário. Você parte do princípio que deverão existir reações satisfatórias para determinadas ações na sua interface (sucesso em um redirecionamento a partir de um link clicado, a validação de um formulário, se o pagamento de um produto foi confirmado, se o produto foi adicionado ao carrinho corretamente, etc).

Neste pequeno documento vamos estar vendo um pouco sobre como funciona testes do tipo **E2E** usando **Angular** com **Protractor** porém antes vamos entender um pouco sobre o que é essa ferramenta.

## O que é o Protractor 🤔

**Protractor** é um **framework** de testes funcionais para aplicações AngularJS (Angular 2+) e funciona como uma solução integradora combinando poderosas ferramentas e tecnologias tais como NodeJS, Selenium, webDriver, Jasmine, Cucumber e Mocha.

Para que possamos  fazer a instalação do protractor podemos seguir a documentação oficial da ferramenta [neste link](https://www.protractortest.org/#/)

Dito isso vamos entender um pouco sobre como funciona a sua estrutura.

```
e2e
├── protractor.conf.js
├── src
│   └── home
│       └── signin
│           ├── signin.e2e-spec.ts
│           └── signin.po.ts
└── tsconfig.e2e.json
```

- Dentro do diretório e2e temos o arquivo de configuração do protractor. É nele que vamos colocar todo o tipo de configuração que utilizaremos em nossos testes, como, por exemplo, o browser, a url padrão que acessaremos, a pasta na qual estão nossos testes e etc.
- Dentro do diretório home temos o componente que será testado no caso o **signin**.
- Dentro de signin temos os arquivos:
    - signin.e2e-spec - Arquivo onde temos os testes de signin.
    - signin.po - Arquivo onde iremos ter os métodos que iram utilizar a api do protractor.
    

*Ex:  signin.po*

```jsx
import { browser } from "protractor";

export class SigninPage {
  acessarPaginaHome() {
    return browser.get("");
  }
}
```

Dentro deste pequeno exemplo importamos de dentro de protractor o método **browser,** com isso exportamos uma class chamada **SigninPage** por exemplo ****e dentro dela temos um pequeno método **acessarPaginaHome,** dentro do método **acessarPaginaHome** **iremos utilizar a função **get** de **browser** para que possamos acessar uma rota informada.

Neste exemplo foi apenas passada uma string vazia, pois dentro do arquivo **protractor.conf.js** onde temos toda a configuração da ferramenta temos definido a url padrão do nosso projeto.

Agora dentro do arquivo *signin.e2e-spec*  temos o seguinte conteúdo:

*Ex: signin.e2e-spec*

```jsx
import { SigninPage } from "./signin.po";

describe("Testando a tela home", () => {
  let signinPage: SigninPage;
  beforeEach(() => {
    signinPage = new SigninPage();
  });

  it("Deve acessar a página Home", () => {
    expect(signinPage.acessarPaginaHome()).toBeNull();
  });
});
```

### Describe

Primeiramente fazemos o import da classe **SigninPage** do arquivo *signin.po*  como já vimos antes e utilizamos a função **describe** que define uma suíte de testes, passando como primeiro parâmetro uma **descrição** e o segundo parâmetro é um **callback** onde vão ter os testes.

Primeiramente definimos uma variável do signinPage do **SigninPage** a classe onde teremos os métodos para a utilização do protractor.

Em seguida temos a função **beforeEach**  onde estamos definido que antes de rodar os nossos testes queremos ter uma instância de signinPage.

A função **it**  é o teste em si, que vai ser executado. Ele recebe dois parâmetros também, uma **descrição** do teste e um **callback**. E dentro da função **it**  temos o nosso primeiro teste 

Describe, it, são funções referentes ao **Jasmine** que **é um framework de testes JavaScript baseado na metodologia de desenvolvimento guiado por comportamento**.

**O Jasmine conta com seu próprio script de execução de testes**, que utiliza uma página web para exibir os resultados dos testes executados, o desenvolvedor só precisa se preocupar em referenciar na página os scripts de dependências para execução dos testes, os scripts de testes e as implementações a serem testadas. A utilização deste script é bem simples e pode ser encontrado na documentação da ferramenta.

## Rodando os testes 😎

Agora dentro da sua aplicação iremos rodar o comando `webdriver-manager start`  que irá executar o Selenium na porta 4444 e dentro do nosso projeto angular você pode rodar o comando `ng e2e` que o angular irá cuidar de rodar todos os testes dentro de sua aplicação.

```bash
Testando a tela home
✓ Deve acessar a pagina Home

Executed 1 of 1 spec SUCCESS in 1 sec.
```

Pronto, o nosso primeiro teste rodando..👨‍💻

Links e referências:

- Jasmine*:* [*https://jasmine.github.io/*](https://jasmine.github.io/)
- Protractor: [https://www.protractortest.org/#/](https://www.protractortest.org/#/)