Tengo esta directiva, pero estoy luchando con la prueba de jazmín, ¿alguna idea?
import { Directive, Output, EventEmitter, HostListener } from '@angular/core'; @Directive({ selector: '[ctrlKeys]', }) export class CtrlKeysDirective { @Output() ctrlZ = new EventEmitter(); @Output() ctrlY = new EventEmitter(); @HostListener('document:keydown.control.z') onCtrlZ() { this.ctrlZ.emit(); } @HostListener('document:keydown.control.y') onCtrlY() { this.ctrlY.emit(); } }Por lo general, con las directivas, simplemente lo adjunto a un componente ficticio/elemento HTML y pruebo desde allí. Voy sin un IDE, por lo que puede haber algunos errores.
describe('CtrlKeysDirective', () => { @Component({ selector: 'dummy', template: `<div class="under-test" ctrlKeys>Hello</div>` }) class DummyComponent {} let fixture: ComponentFixture<DummyComponent>; let component: DummyComponent; let ctrlKeysDirective: CtrlKeysDirective; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ // declare both your directive and dummy component declarations: [DummyComponent, CtrlKeysDirective], }).compileComponents(); })); beforeEach(() => { // get a handle on your component fixture = TestBed.createComponent(DummyComponent); component = fixture.componentInstance; // call ngOnInit of the component (not required) fixture.detectChanges(); // get a handle on your directive (inspired from here https://stackoverflow.com/a/40282709/7365461) const ctrlKeysDirectiveEls = fixture.debugElement.query(By.directive(CtrlKeysDirective)); ctrlKeysDirective = ctrlKeysDirectiveEls[0].injector.get(CtrlKeysDirective) as CtrlKeysDirective; }); it('should create', () => { // expect the component to be truthy. Make sure this test passes to ensure // the TestBed was configured correctly. expect(component).toBeTruthy(); }); it('should emit ctrlZ', () => { const ctrlZSpy = spyOn(ctrlKeysDirective.ctrlZ, 'emit'); window.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', ctrlKey: true })); // !! try this !! const div = fixture.debugElement.query(By.css('.under-test')).nativeElement; div.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', ctrlKey: true })); fixture.detectChanges(); expect(ctrlZSpy).toHaveBeenCalled(); }); });Me inspiré con el evento de envío de aquí: https://johngrahamdev.com/Unit-Testing-Keyboard-Shortcuts-Angular/