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
Verifico se o evento existe
Verifico se o
type
do evento é 'click'
ENTER
Verifico se o evento existe
Verifico se o
type
do evento ékeyup
Verifico se a instância do evento é
KeyboarEvent
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'.