Menu
I have html row element as so
<tr class="worktask" (click)="setCurrentTask($event, task)" (dblclick)="openTask($event, task)">some content</tr>
Now I want to test if openTask is called when some one double click on a row element in the table.
The way I am trying to do this is:
it('should be able to double click on a row to open work stream', async(() => {
fixture.detectChanges();
comp.tasks=workflowServiceStub.getTasks(); //get dummy task
fixture.detectChanges(); // update view based on dummy task
spyOn(comp, 'openTask'); //spy on openTask function if it is called
let workTaskRow = fixture.debugElement.nativeElement.querySelectorAll('.worktask'); //getting task row
workTaskRow[0].dblclick();
fixture.whenStable().then(() => {
expect(comp.openTask).toHaveBeenCalled();
})
}));
But when I run the test I get an error saying:
workTaskRow[0].dblclick is not a function
I tried .click() and it seem to work , not sure I can trigger a double click here to test if openTask() function is called.
801
The ng-dblclick directive tells AngularJS what to do when an HTML element is double-clicked. The ng-dblclick directive from AngularJS will not override the element's original ondblclick event, both are executed.
For click event we can use triggerEventHandler method of Angular DebugElement class. We can also call native JavaScript click method of button. On click of button, we call a component method and it is possible that our component method has other dependencies to execute.
According to the Angular Testing documentation, to trigger the events from the tests, we use the triggerEventHandler() method on the debug element. This method takes the event name and the object . Now, this works if we are adding the events using the HostListener .
Angular 2 Double Click (dblclick) event using the EventEmitter, a mother component receives the double click (dblclick) event from the child component when a user clicks twice on an element. 6. Angular 2 Tutorial: Adding HotKeys (Keyboard shortcuts) to a Component
The Angular DebugElement instance provides a handy method for triggering events — triggerEventHandler (). Let’s see how we can use it. We have a simple test for a component that, upon a click, sets an emoji.
If you want to navigate differently on a double-click, you would have to delay the navigation, to allow the double-click event to be triggered (or not). You could also navigate to a different destination if a key is pressed (e.g. shift, ctrl) when the row is clicked. Here you can use a timeout and a boolean flag to solve this.
Luckily, it’s a click event and we can trigger a click programmatically by using the native HTMLElement click () method. Cool, but what about other events, like mouseenter, input, etc.? We can use the native Event APIs in conjunction with the dispatchEvent () method to trigger events programmatically. For example:
the answer is there: Angular 2 unit tests: How do I test for the context menu and double click events?
const doubleClickEl: DebugElement[] = fixture.debugElement.queryAll(By.css("li"));
doubleClickEl[0].triggerEventHandler("dblclick", new MouseEvent("dblclick"));
fixture.detectChanges();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
