Introdução aos testes unitários com Angular

Fala stakers!

Quando iniciamos um projeto com o CLI ele já nos deixa por padrão os testes com as seguintes ferramentas:

• Jasmine, um framework para testes unitários e integrados;
• Karma, o runner dos testes.

Mas tenho que deixar esclarecido aqui, que não precisamos usar esses dois, podemos utilizar outro caso você se sinta mais confortável com eles.

Mas afinal o que são esses testes?

Teste Unitário

São testes que têm como objetivo testar regras de negócio, testando cada função isoladamente, para ter certeza que ele faz somente o que foi designado para fazer. 

Podemos testar:

• Pipe;
• Class;
• Componente;
• Diretivas;
• Service.

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { UserPagesComponent } from './user-pages.component';

describe('UserPagesComponent', () => {
  let component: UserPagesComponent;
  let fixture: ComponentFixture<UserPagesComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ UserPagesComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(UserPagesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

describe: Cria um grupo de testes. Pode ser aninhado para compor diversos outros testes. Seu primeiro parâmetro é o nome da suite e o segundo é a função

it: Define um único teste. Um teste deve conter uma ou mais expectativas que testem o código.

expect: Cria uma expectativa. No exemplo, nossa expectativa é que o retorno da função seja a criação do component.

Jasmine possui uma documentação bem completa => https://jasmine.github.io/tutorials/your_first_suite

Esse trecho de código, mostro a estrutura do arquivo de teste. Sempre que você criar um componente, tenha em mente que também será gerado um arquivo spec.ts.

Este arquivo vai nos auxiar a iniciar os testes.

Teste End-to-end (E2E)

É o teste completo da aplicação, fazendo assim a imitação de um usuário comum nela, imitando o comportamento que eles fariam, dando clicks na tela e tudo mais. Rodando no browsers. 

É muito legal para testar múltiplos browsers, tamanhos de tela e devices.

Conclusão

Com essa introdução aos testes, agora podemos ter uma aplicação mais sólida e evitar alguns erros, também olhamos um norte para começar e quando usar.

Não deixe de ver também este link sobre testes unitários => https://gabrieluizramos.com.br/anatomia-de-um-teste-em-javascript

Gostou? Quer aprender mais de angular? Então veja aqui nosso Curso de Angular.

Aprenda mais de Angular em nossas postagens ou no Youtube.