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; } }