Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Olá no meu arquivo de teste esta me retornando falso, e não consegui encontrar o erro.

import { Component } from "@angular/core"; import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ActionDirectiveModule } from './action.module'; import { ActionDirective } from './action.directive';

describe(ActionDirective.name, () => {

let fixture: ComponentFixture; let component: ActionDirectiveFakeComponent;

//AQUI IREMOS APRENDER A COMO TESTAR NOSSAS DIRETIVAS //EM COMPONENTS QUE SAO DIRETIVAS NO CASO QUE NAO POSSUE //UM COMPONENT HTML PODEMOS UTILIZAR O TESTBED SEM O ASYNC AWAIT beforeEach(async () => { await TestBed.configureTestingModule({ declarations:[ //AQUI IMPORTAMOS O NOSS COMPONENT FAKE ActionDirectiveFakeComponent ], imports:[ ActionDirectiveModule ] }).compileComponents();

fixture = TestBed.createComponent(ActionDirectiveFakeComponent);
component = fixture.componentInstance;

})

//VERIFICAR PORQUE ESTA DANDO ERRO it((D) (@Output appAction) Deve emitir um evento com um parametro quando o ENTER do teclado for precionado, () => {

//PEGO A MINHA CLASSE COM O SELETOR
const divEl: HTMLElement = fixture.nativeElement.querySelector('.dummy-component');
//CRIO UM NOVO EVENTO ENTER PARA O MEU COMPONENT
const event = new KeyboardEvent('keyup', { key: 'Enter'});
//FACO UM DISPATCH DESSE EVENTO
divEl.dispatchEvent(event);

//AQUI ATRAVES DA INSTANCIA DO MEU COMPONENT VERIFICO O RETORNO DA MINHA FUNCAO
expect(component.hasEvent()).toBeTrue();

});

//VERIFICAR PORQUE ESTA DANDO ERRO it((D) (@Output appAction) Deve emitir um evento com um parametro quando for precionado o click do mouse, () => {

//PEGO A MINHA CLASSE COM O SELETOR
const divEl: HTMLElement = fixture.nativeElement.querySelector('.dummy-component');
//CRIO UM NOVO EVENTO ENTER PARA O MEU COMPONENT
const event = new Event('click');
//FACO UM DISPATCH DESSE EVENTO
divEl.dispatchEvent(event);

//AQUI ATRAVES DA INSTANCIA DO MEU COMPONENT VERIFICO O RETORNO DA MINHA FUNCAO
expect(component.hasEvent()).toBeTrue();

}); });

//AQUI IREMOS CRIAR UM COMPONENT FAKE PARA USAR A NOSSA DIRETIVA //ASSIM CONSEGUIMOS TESTAR ELA SOMENTE EM UM COMPONENT EVITANDO //TER QUE TESTAR ELA EM TODOS OS COMPONETS QUE A UTILIZAREM @Component({ template:<div class="dummy-component" (appAction)="actionHandler($event)"></div> })

class ActionDirectiveFakeComponent{

private event: Event = null;

//AQUI EU RECEBO O EVENTO E ADICIONO DENTRO DA MINHA PROPRIEDADE EVENT public actionHandler(event: Event): void { this.event = event; }

public hasEvent(): boolean{ //SE FOR NULL ELE RETORNA FALSE SE FOR PREECHIDO ELE RETORNA TRUE //USANDO !! ELE CONVERTE NOSSO TIPO PARA BOOLEAN return !!this.event; } }

1 resposta
solução!

Olá Juliana! Tudo bem?

Desculpe a demora em retornar.

Vi que você finalizou o curso, ainda tem dúvidas? De qualquer forma tentarei responder com base nas informações que mandou.

Pelo que pude entender do seu código, você está tentando testar uma diretiva que deve emitir um evento quando o usuário pressionar a tecla "Enter" ou clicar no mouse. No entanto, você está recebendo um retorno falso e não consegue identificar o erro.

Uma possível causa para esse problema é que a diretiva não está sendo adicionada corretamente ao seu componente fake. Verifique se você importou corretamente a diretiva e se ela está sendo declarada no seu módulo.

Outra possível causa é que o seletor ".dummy-component" não está sendo encontrado na sua view. Verifique se você está utilizando o seletor correto e se ele está presente na sua view.

Por fim, verifique se a função "hasEvent()" está implementada corretamente e se ela está retornando o valor esperado.

Espero ter ajudado.

Ah! Não sei você está sabendo, mas no nosso discord estão tendo vários grupos de estudos, você pode entrar e tirar suas dúvidas. Saiba mais aqui.

Um abraço e bons estudos.