Angular: testes unitários com Jasmine para componentes e serviços

Angular: testes unitários com Jasmine para componentes e serviços | Alura Cursos Online

<!-- app.component.html -->
<main>
  <h1>{{ titulo }}</h1>
  <form (ngSubmit)="adicionarItem()">
    <input type="text" [(ngModel)]="novoItem" name="novoItem" />
  </form>
  <ul>
    @for (item of itens; track item) {
      <li>
        {{ item }}
      </li>
    }
  </ul>
</main>

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TodoService } from './todo.service';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
  titulo = 'Todo List';
  novoItem = '';
  itens: string[] = [];
  constructor(private todoService: TodoService) {}
  ngOnInit(): void {
    this.itens = this.todoService.obterItens();
  }
  adicionarItem() {
    this.todoService.adicionarItem(this.novoItem);
    this.itens = this.todoService.obterItens();
  }
}

// todo.service.ts
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class TodoService {
  private itens: string[] = [];
  obterItens(): string[] {
    return this.itens;
  }
  adicionarItem(item: string): void {
    this.itens.push(item);
  }
}

// todo.service.spec.ts
import { TodoService } from './todo.service';
describe('TodoService', () => {
  let servico: TodoService;
  beforeEach(() => {
    servico = new TodoService();
  });
  it('deveria inicialmente retornar uma lista vazia', () => {
    expect(servico.obterItens()).toEqual([]);
  });
  it('deveria adicionar um item na lista', () => {
    const item = 'Estudar testes';
    servico.adicionarItem(item);
    expect(servico.obterItens()).toContain(item);
  });
});

// app.component.spec.ts
const mockListaTodo = ['Estudar Testes', 'Estudar Angular'];
class MockTodoService {
  private itens: string[] = mockListaTodo;
  obterItens(): string[] {
    return this.itens;
  }
  adicionarItem(item: string): void {
    this.itens.push(item);
  }
}

// app.component.spec.ts
describe('AppComponent', () => {
  let componente: AppComponent;
  let servico: TodoService;
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        AppComponent,
        { provide: TodoService, useClass: MockTodoService },
      ],
    });
    componente = TestBed.inject(AppComponent);
    servico = TestBed.inject(TodoService);
  });
  // testes a serem escritos...
});

// app.component.spec.ts
it('deveria ser criado com lista vazia (antes de buscar do serviço)', () => {
  expect(componente.itens).toEqual([]);
});
it('deveria obter lista do TodoService', () => {
  componente.ngOnInit();
  expect(componente.itens).toEqual(mockListaTodo);
});
it('deveria adicionar um novo item', () => {
  componente.ngOnInit();
  const novoItem = 'Assinar Alura';
  componente.novoItem = novoItem;
  componente.adicionarItem();
  expect(componente.itens).toContain(novoItem);
});

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Angular: testes unitários com Jasmine para componentes e serviços

Antônio Evaldo

Explore por tópico

Conhecendo o projeto

Escrevendo o primeiro teste

Usando o pacote de testes do Angular

Testando a classe do componente

Karma depreciado?

Antônio Evaldo

Inscreva-se em nossa Newsletter

Explore por tópico

Conhecendo o projeto

Escrevendo o primeiro teste

Usando o pacote de testes do Angular

Testando a classe do componente

Karma depreciado?

Leia também