Cypress should fire 'mouseenter' event on .click()

Current behavior:

I have a custom dropdown with checkboxes. I’m using vue-on-click-outside lib. It’s a directive vue.js. When I click outside of my dropdown it’s close the dropdown.

In real life, everything is successful. It’s opening when I click on the DOM element and when I click outside, it’s closing.

But with Cypress, when I click the dropdown doesn’t show. When I remove the directive, the click works. Obviously, I can’t close it when I click outside without the directive.

My component

<div class="checkbox-select" v-on-click-outside="closeDropdown">
    <div class="checkbox-select trigger" :class="{ isActive: dropdown }" @click="toggleDropdown" data-testid="displayDropdown">
      <slot v-if="!dropdown" name="label"></slot>
      <span v-show="dropdown" class="checkbox-select title" data-testid="titleOpenedDropdown">TITLE</span>
    </div>
[...]
  </div>

I’m using a custom command to get by the data accessor "data-testid". I am using it everywhere, it’s not the source of this problem.

export const getByTestId = (id: string) => {
  return cy.get(`[data-testid=${id}]`);
};

My cypress test

it("should open dropdown",()=>{
  cy.getByTestId("displayDropdown").should('be.visible').click()
    .getByTestId("titleOpenedDropdown").should("be.visible");
});

The result

Desired behavior:

I want to be able to use the vue-on-click-outside lib and make my cypress tests work when I click.

Steps to reproduce: (app code and test code)

On a vue.js project

1- npm install vue-on-click-outside --save 2- Add it on something you can toggle open/close

<template>
  <div class="checkbox-select" v-on-click-outside="closeDropdown">
    <div class="checkbox-select trigger" :class="{ isActive: dropdown }" @click="toggleDropdown" data-testid="displayDropdown">
      <slot v-if="!dropdown" name="label"></slot>
      <span v-show="dropdown" class="checkbox-select title" data-testid="titleOpenedDropdown">TITLE</span>
    </div>

    <div id="dropdown" class="checkbox-select dropdown" v-show="dropdown">
      <ul id="customScroll" class="checkbox-select items-wrapp">
        <li v-for="(item, index) in items" :key="index">
          <div class="checkbox-select">
            {{ item }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { mixin as onClickOutside } from 'vue-on-click-outside';

  export default {
    name: 'input-dropdownCheckboxes',
    mixins: [onClickOutside],
    props: {
      items: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        dropdown: false
      };
    },
    methods: {
      toggleDropdown() {
        this.dropdown = !this.dropdown;
      },
      closeDropdown() {
        if(this.dropdown) {
          this.dropdown = false;
        }
      }
    }
  };
</script>

3- Try to click on this element with cypress to open it.

it("should open dropdown",()=>{
  cy.getByTestId("displayDropdown").should('be.visible').click()
    .getByTestId("titleOpenedDropdown").should("be.visible");
});

Versions

Cypress 3.3.2 Chrome 75

[jennifer-shehane]

Ok. Thanks. I’m able to reproduce this now with the code from this repo https://github.com/elmoknit/cypress-bug-vue-click-outside.

Luckily vue-on-click-outside is nice enough to explain how their package works without me having to dig into code.

vue-on-click-outside uses mouseenter and mouseleave events to determine if the user is still inside the element. This should account for content that is dynamically removed on click events and is the primary distinction to the existing vue-clickaway library. Once a user clicks on something the click event bubbles up the DOM tree until it reaches the documentElement. A click listener on the documentElement then looks for elements that were not targetted by the click event and calls the callback you provided via the directive.

vue-on-click-outside is expecting a mouseenter event to be called before the click, which is not fired from within Cypress currently.

Workaround:

You can get your test to simulate this and pass by writing:

it("should open dropdown",()=>{
  // I removed the should be visible - we already check for visibility before clicking.
  cy.getByTestId("displayDropdown").trigger('mouseenter').click()
    .getByTestId("titleOpenedDropdown").should("be.visible");
});

We should fire the mouseenter event before some actions, like .click(). I will update the title of this issue to reflect this. cc @Bkucera

Similar to this issue about firing mouseover https://github.com/cypress-io/cypress/issues/1847

[sainthkh]

It’s working in 4.12.0. Close this issue.

If the problem still happens for some reason, please leave a comment.