Testing for visibility with transition (v-show)

[soullpoint]

Hi, I was trying to test that an element is not visible after triggering an event, but am having trouble with getting the test to pass when the element is wrapped in a transition. I wasn't able to find any related issues, apart from the fact that isVisible is no longer supported. I was hoping someone would be able to point me in the right direction

Consider the following structure where state.showItem is toggled between true/false on mouse enter/leave in a different element:

<transition name="fade">
    <span class="item" v-show="state.showItem">
      {{content}}
    </span>
</transition>

The following test fails on the second assertion:

await wrapper.find(".trigger-item").trigger("mouseenter");
expect(
  wrapper.find(".item").attributes("style").includes("display: none")
).toBe(false);

await wrapper.find(".trigger-item").trigger("mouseleave");
expect(
  wrapper.find(".item").attributes("style").includes("display: none")
).toBe(true);

But succeeds once I've removed the wrapping transition component. I have tried using await nextTick to no avail.

Perhaps I am doing something wrong?

Any advice would be appreciated.

Thanks

[lmiller1990]

Hi!

Deprecating isVisible turned out to be not a popular move. We un-deprecated it in v1. It will be supported here, too. If you would like you could submit a PR by copy-pasting it from here, basically.

You could also see the implementation there to get some ideas on how isVisible actually works.

[lmiller1990]

Ok the problem is timing; it takes some amount of ms for the transition to complete.

Below is a passing test. I think we should stub out transitions entirely; that is what v1 did, we can just replace them with <transition-stub> or something, and everything should work the same without the race condition.

  it('handles transitions', async (done) => {
    const Comp = {
      template: `
        <button @click="show = false" />
        <transition name="fade">
          <span class="item" v-show="show">
            Content
          </span>
        </transition>
      `,
      data() {
        return {
          show: true
        }
      }
    }
    const wrapper = mount(Comp, {
    })

    expect(wrapper.find('span').isVisible()).toBe(true)
    await wrapper.find('button').trigger('click')
    setTimeout(() => {
      expect(wrapper.find('span').isVisible()).toBe(false)
      done()
    }, 100)
  })

[lmiller1990]

I will make a PR with isVisible in a few hours, and fixing the transition problem. Please wait.

You could probably use your current strategy with setTimeout to work around it for now.

[lmiller1990]

This is merged #212

It will be in the next release. This will fix your problem.