1
resposta

Ideia: Click e ENTER key press no mesmo teste

Achei interessante a abordagem de executar duas expectativas no mesmo teste. Como dito no vídeo, a propriedade event é definida por dois eventos distintos e assim possibilita falso positivo nos testes, uma vez que ao verificar a expectativa do ENTER, se não por um problema não for gerado o evento, a propriedade event já estaria definida pelo teste da expectativa do click, validando de forma indesejada a verificação dessa expectativa e por consequência o teste, camuflando a falha.

Podemos "ajustar" isso zerando a variável após a primeira expectativa maaas, como o Flavio disse, não é legal que o componente fique conhecendo as lógicas de testes. Então cheguei nesse modelo onde verifico as duas expectativas no mesmo teste, porém com uma forma de separar elas sem necessitar que o componente conheça a lógica de testes:

  it(`(DOM) (@Output appAction) should emit event with payload when clicked or <ENTER> pressed`, () => {
    const divEl: HTMLElement =
      fixture.nativeElement.querySelector('.dummy-component');

    // Evento Click
    const eventClick = new KeyboardEvent('click');
    divEl.dispatchEvent(eventClick);
    expect(component.event.type).withContext('Click event type').toBe('click');

    // Evento teclar <ENTER>
    const eventEnter = new KeyboardEvent('keyup', { key: 'Enter' });
    divEl.dispatchEvent(eventEnter);
    expect(component.event.type)
      .withContext('<ENTER> pressed: type')
      .toBe('keyup');
    expect(component.event)
      .withContext('<ENTER> Check event instance')
      .toBeInstanceOf(KeyboardEvent);
    expect((component.event as KeyboardEvent).key)
      .withContext('<ENTER> pressed: payload')
      .toBe('Enter');
  });

Além disso, no componente fantoche também troquei a propriedade event para public, mas poderia ter criado um getter para ficar mais elegante tipo o hasEvent().

Explicando

Click

  1. Verifico se o evento existe

  2. Verifico se o type do evento é 'click'

ENTER

  1. Verifico se o evento existe

  2. Verifico se o type do evento é keyup

  3. Verifico se a instância do evento é KeyboarEvent

  4. Verifico se a tecla pressionada foi Enter

Concluindo

Verificando a instância, o tipo do evento e o payload é possível distinguir a definição de event em duas expectativas do mesmo teste e assim evitar o falso positivo. Se o evento de pressionar "Enter" falhar, a expectativa verificará o último evento lançado, que foi "click", assim falhando o teste conforme esperado: Error: <ENTER> pressed: type: Expected 'click' to be 'keyup'.

1 resposta

Olá Jonas, tudo bem?

Muito interessante a sua abordagem para solucionar o problema do falso positivo nos testes automatizados. É importante lembrar que, como você mencionou, não é legal que o componente conheça as lógicas de testes, e sua solução é uma forma elegante de separar as duas expectativas sem precisar fazer isso.

Além disso, sua explicação sobre como funciona o código ficou bem clara e objetiva, o que é muito importante para quem está aprendendo.

Continue assim, sempre buscando soluções criativas e elegantes para os problemas que surgem no desenvolvimento.

Um abraço e bons estudos.