isVisible doesn't check visibility due to CSS classes

[bbones]

What problem does this feature solve?

Making test for components like this

<template>
    <div>
        <h1>Header</h1>
        <button class="hidden">Test</button>
    </div>
</template>

<script>
  export default {
    name: "Foo"
  }
</script>

<style scoped>
    .hidden {
        display: none;
    }
</style>

describe('Foo.vue', () => {
  test('Button', () => {
    const wrapper = shallowMount(Foo, {});
    console.log(wrapper.isVisible());
    const but = wrapper.find('button');
    console.log(window.getComputedStyle(but.element).display);
    console.log(but.isVisible());
  });
});

What does the proposed API look like?

Call of isVisible will be the same as before

[lmiller1990]

This is not possible because of jsdom limitations as far as I know. I tried implementing this once. If you are interested in why, read a bit more here and see all the regular techniques for knowing is css is hiding an element here.

Normally you use things like getComputedStyle (as you suggested) or parentOffset, but since jsdom doesn't actually render anything, we cannot know if something is hidden or not based on css.

I'm sorry, for the limitations of jsom explained above, we will not be able to support this feature.

[IGx89]

This appears to have been fixed in v2 with vuejs/test-utils#454. Any chance of backporting to v1 for those of us still on Vue 2?

[smearedyam]

+1 to IGx89's sentiment

[lmiller1990]

Sure thing, would you be interested in making a PR? If you do, please tag me in the PR, I can review it for you.

[IGx89]

Sure can! Have unit tests passing, however it's failing when run in the browser using Karma -- breaks most isVisible tests. vue-test-utils v2 doesn't run tests in the browser so it doesn't have to deal with that issue. Will need to dig into it more to find the root cause -- sadly doesn't appear to be as simple as just copying the changes over.

[IGx89]

Found the root cause, pretty interesting stuff :). PR submitted: #2013.

Note that this will only work on attached elements, so the example above would need to have this change:

shallowMount(Foo, {
   attachTo: document.body
});

[benoitkopp]

Hello,

I'm still getting this issue when I try to use isVisible when using a css class setting opacity to 0 after getting the 1.3.4 version.
Can it be due to sass ?

[samb1999]

Getting the issue with V3 even after attaching to document.body
I'm using SASS

[lmiller1990]

It looks like opacity should work: https://github.com/vuejs/test-utils/pull/454/files

Please provide a minimal reproduction, that is the only way anyone can help.

[samb1999]

@lmiller1990

Minimal reproduction:
https://stackblitz.com/edit/github-397rht-qtqmur

Run Instructions:
After load run vitest in terminal .

In HomeView.vue there is a div with a class called "class" and dummy text, the class applies opacity: 0 and the text is not visible, you can remove the class to check that the opacity in fact hides it.

test.test.ts mounts the HomeView,finds the element and then checks if isVisible.

Test fails.