<aside> 💡 Data de publicação: 26/03/2023

</aside>

Quando estamos utilizando Observables sempre há uma dificuldade em como organizar os testes para que possamos entender e testar toda a nossa stream. Podemos testar da forma mais “simples” utilizando subscribes para validar os valores da nossa subscription, porém temos uma outra abordagem para testes reativos e os mesmos podem ser feitos com um Scheduler nativo da biblioteca.

Por isso foi criado o TestScheduler que é uma classe de utilidade e que podemos usar para ter um ambiente de teste assíncrono e confiar no resultado.Para começar, primeiro precisamos entender o conceito de hot e cold Observables. Com isso podemos entender mais facilmente como os diagramas funcionam.

Hot Observables

Esse tipo de Observable pode emitir mais de uma vez, ou seja, geram um producer para multiplos subscribes, podem muitas vezes atuar como listeners e conter informações diferentes com o passar do tempo. Esses Observables vão “produzir” valores mesmo quando não houver ninguém se inscrevendo nos mesmos, diferentemente do cold Observable, um exemplo prático de um hot Observable seria um Subject.

Cold Observables

Os Observables “gelados” geram um producer para cada subscriber, ou seja, toda vez que alguém se interessa e se inscreve, o Observable irá gerar um novo produtor de dados, um exemplo prático de um cold Observable seria uma requisição HTTP.

## Sintaxe de marble

Isso é uma simplificação da explicação disponível na documentação

• ' ' whitespace: espaços são ignorados, é útil para alinhar múltiplos diagramas;
• '-' frame: 1 "frame" de tempo decorrido;
• [0-9]+[ms|s|m] time progression: Essa é a sintaxe de progressão virtual de tempo, que se baseia em um número junto de uma unidade de tempo, ms (milisegundos), s (segundos), m (minutos). Leia a documentação na seção de Time progression syntax para mais detalhes;
• '|' complete: Simboliza a conclusão com sucesso de um Observable, equivalente a utilizarmos um complete() de um Subject;
• '#' error: Simboliza a finalização com erro de um Observable, utiliza-se para ativar producer de error() ;
• [a-z0-9]: Qualquer caractere alfanúmerico: Representa um valor emitido por um producer next();
• '^' subscription point: (Apenas para Observables hot) Simboliza o ponto em que o Observable irá ter a sua inscrição iniciada, esse é o frame zero para esses Observables, todos os frames antes do ^ serão negativos;
• '()' sync groups: Quando multiplos eventos precisam estar no mesmo frame de forma sincrona, os eventos que precisamos emitir nesse mesmo frame vamos adicionar nesse grupo com os parenteses, por exemplo (abc) , aqui vamos emitir os valores abc no mesmo frame.

Primeiro vamos testar um service de todos, esse service contém um BehaviorSubject dois getters e um método que modifica o esse mesmo Subject:

import { Injectable } from "@angular/core";
import { BehaviorSubject, filter, map } from "rxjs";
import { Todo } from "../models/todo.model";

@Injectable({
	providedIn: "root",
})
export class TodoService {

	private todos = new BehaviorSubject<Todo[]>([]);

	get todos$() {
		return this.todos.asObservable();
	}

	get todosCount$() {
		return this.todos$.pipe(
			map((todos) => todos.filter((todo) => !todo.completed).length)
		);
	}

	addTodo(todo: Todo) {
		this.todos.next([...this.todos.value, todo]);
	}
}

Testes com o padrão subscribe/done: