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

[elmoknit]

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]

Okie doke. I went through and create a standard hello-world app using @vue-cli, installed Cypress 3.4.0 and vue-on-click-outside.

I added the template code into my HelloWorld.vue file and added an array of items into the default default: ['foo', 'bar', 'baz'].

I don't see the dropdown rendering on my screen at all with the code you provided. I can see that all of it has display: none set. Maybe you forgot to include some css you have that is important to reproduce this?

Please provide every piece of code needed so that I can get it running and reproducible. Ideally, provide a hello-world repo that you've completely tested against first to show that it's failing please. If we can't reproduce the issue, we will have to close the issue.

[elmoknit]

Hello!

I create a repository on my git hub :

https://github.com/elmoknit/cypress-bug-vue-click-outside

Thanks and have a nice day!

[jennifer-shehane]

Hey @elmoknit, I still don't see the checkbox code or test in this repo, is it on a separate branch? Did you commit all the changes?

[elmoknit]

Edit: oupsy! I think my push didn't work. I'll change that right now! sorry! 😖

[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.