1
resposta

Teste if com Karma e Jasmine (Mock)

Salve!

Estou fazendo o curso de Front end voltado a Testes com Karma e Jasmine.

Tenho uma dúvida de como testar, mockando os dados desse trecho do meu component.ts:

  ngOnInit() {
    if (history.state.data !== null && history.state.data !== undefined) {
      this.mensagem = history.state.data.mensagem;
      this.sucesso = history.state.data.sucesso;
    }
    this.listaGenerica();
  }
1 resposta

Oi Nilson, tudo bem?

Desculpe a demora em retornar.

Vamos ver como podemos testar o trecho de código que você mencionou, mockando os dados.

Primeiro, precisamos entender o que é o método ngOnInit(). Ele é um dos métodos do ciclo de vida de um componente do Angular. Ele é executado após a criação do componente e é usado para inicializar valores e executar outras operações necessárias. No seu caso, você está usando o método para verificar se há dados no objeto history.state.data e, em seguida, atribuir valores às variáveis mensagem e sucesso. Além disso, você está chamando o método listaGenerica().

Para testar esse trecho de código, precisamos verificar se as variáveis mensagem e sucesso são atribuídas corretamente quando history.state.data não é nulo nem indefinido. Uma maneira de fazer isso é usar um spyOn para simular o objeto history.state.data. Vamos ver como podemos fazer isso:

it('verifica se a mensagem e sucesso são atribuídos corretamente quando history.state.data não é nulo nem indefinido', () => {
  const dados = {
    mensagem: 'Teste de mensagem',
    sucesso: true
  };
  spyOn(history.state, 'data').and.returnValue(dados);

  component.ngOnInit();

  expect(component.mensagem).toEqual('Teste de mensagem');
  expect(component.sucesso).toEqual(true);
});

Neste exemplo, criamos um objeto dados com valores para as variáveis mensagem e sucesso. Em seguida, usamos spyOn para simular o objeto history.state.data e retornar o objeto dados quando ele for acessado. Então, chamamos o método ngOnInit() do componente e, finalmente, verificamos se as variáveis mensagem e sucesso foram atribuídas corretamente.

Além disso, precisamos verificar se o método listaGenerica() é chamado após a atribuição das variáveis mensagem e sucesso. Podemos fazer isso usando outro spyOn para o método listaGenerica(). Vamos ver como podemos fazer isso:

it('verifica se o método listaGenerica() é chamado após a atribuição das variáveis mensagem e sucesso', () => {
  const dados = {
    mensagem: 'Teste de mensagem',
    sucesso: true
  };
  spyOn(history.state, 'data').and.returnValue(dados);
  spyOn(component, 'listaGenerica');

  component.ngOnInit();

  expect(component.listaGenerica).toHaveBeenCalled();
});

Neste exemplo, usamos spyOn para simular o objeto history.state.data e retornar o objeto dados quando ele for acessado. Também usamos spyOn para o método listaGenerica(). Em seguida, chamamos o método ngOnInit() do componente e verificamos se o método listaGenerica() foi chamado.

Espero que esses exemplos tenham sido úteis para você entender como testar, mockando os dados, o trecho de código que você mencionou. Lembre-se de que esses são apenas exemplos e podem ser adaptados de acordo com a sua situação específica. Além disso, é importante sempre manter seus testes atualizados e garantir que eles cubram todos os cenários possíveis.

Um abraço e bons estudos.