Cypress: Trigger hover to check a tooltip with Angular (v5) and Material

[maxime1992]

Current behavior:

I cannot display a tooltip built with Angular Material

Desired behavior:

Trigger hover to show the tooltip

How to reproduce:

Here's a stackblitz repro with the editor:

https://stackblitz.com/edit/angular-material2-issue-iyyert

And the same but just the app running into the browser:

https://angular-material2-issue-iyyert.stackblitz.io

Test code:

  cy.get('span').invoke('trigger', 'mouseover');
  cy.get('mat-tooltip-component').contains('Tooltip!');

Additional Info (images, stack traces, etc)

Related to #10

• Operating System: Ubuntu 17.10 - 64 bits
• Cypress Version: 1.1.1
• Browser Version: Chrome 62.0.3202.89

[brian-mann]

Using invoke('trigger') is simply calling the "trigger" method on the jquery wrapped DOM element. Since angular isn't bound to jquery events, that's why its not triggering.

You never have to do this anymore, because our own (and very real) cy.trigger() now exists and works in every situation you would have otherwise used invoke('trigger').

Change to that and it will work.

I have updated my comments on that old issue, and we have lots of docs in many places explaining this.

https://github.com/cypress-io/cypress/issues/10#issuecomment-346436968

[azollai]

It was only working to me with .trigger('mouseenter'). None of 'mouseover' and 'hover' was working.

Also: be sure that you are getting the right element with the tooltip directive before your .trigger call :)

[palakdua27]

@azollai , still not working for me :-
cy.get('[data-testid="SortByTitle"]').trigger('mouseenter')

[maxime1992]

@brian-mann you said:

You never have to do this anymore, because our own (and very real) cy.trigger() now exists and works in every situation you would have otherwise used invoke('trigger').

But Cypress doc seems to have a different opinion on that:

I did what azollai mentionned and it worked though