Ggtcf

I've been writing unit-test cases for my angular application. I have created a @Directive which listens to dragstart event using @HostListner.

In my test case I'm expecting the event handler function to be called, but it seems that the handler is called(console.log() works), but the jasmine toHaveBeenCalledTimes() is throwing error.

I couldn't find any possible cause for the error

This is the directive

@Directive(
 selector: '[directiveDraggable]'
)
export class DraggableDirective 

 constructor() 

 @HostBinding('draggable')
 get draggable() 
 return true;
 

 @HostListener('dragstart', ['$event'])
 onDragStart(event) 
 console.log(event);
 event.dataTransfer.setData('dropableId', event.target.id);
 
 

and the spec file

 @Component(
 template: `<div class="draggable-div" style="width:150px;height:100px;background-color:yellow;" directiveDraggable></div>`
)
class TestDraggableComponent 


describe('DraggableDirective', () => 
 const dragstartEvent = 
 'bubbles': true,
 'cancelable':true,
 'composed': true,
 'target': 
 'id': 'my-draggable-div-id'
 ,
 'dataTransfer': 
 setData : (key, val) => 
 console.log("setData called.!");
 
 
 ;
 let directive: DraggableDirective;
 let fixture: ComponentFixture<TestDraggableComponent>;
 let draggableElement: DebugElement;

 beforeEach(() => 
 TestBed.configureTestingModule(
 declarations: [TestDraggableComponent, DraggableDirective]
 );
 directive = new DraggableDirective()
 fixture = TestBed.createComponent(TestDraggableComponent);
 draggableElement = fixture.debugElement.query(By.css('div'));

 );

 it('HostListner to listen to "dragstart" event', async() => 
 spyOn(directive, 'onDragStart').and.callThrough();
 expect(directive.onDragStart).toBeDefined();
 expect(directive.onDragStart).toHaveBeenCalledTimes(0);

 const customEvent = new Event('dragstart', dragstartEvent);
 draggableElement.triggerEventHandler('dragstart', dragstartEvent);
 fixture.detectChanges();
 expect(directive.onDragStart).toHaveBeenCalledTimes(1);
 );
);

I'm getting the following error..

P.S. console.log(setData called.!) is logged but expect() doesn't seem to work.!

Thank you.