Bug: expect summary element inside a details element to be visible

[jashaj]

Describe the bug

isVisible() always returns false for the details element and its descendants when there is no open attribute.
The summary is visible in the browser even when details is not open. details is visible, but any other children than summary are hidden when the attribute open is not present.

To Reproduce

Given component DetailsComponent.vue:

<template>
  <details :open="open">
    <summary>Details</summary>
    <p>Something small enough to escape casual notice.</p>
  </details>
</template>

<script setup lang="ts">
defineProps<{
  open?: boolean;
}>();
</script>

Expected behavior

const wrapper = mount(DetailsComponent)
const details = wrapper.find('details');
expect(details.exists()).toEqual(true);
expect(details.isVisible()).toEqual(true); // debatable, because only `summary` inside `details` is visible

const summary = details.find('summary');
expect(summary.isVisible()).toEqual(true); // currently fails

expect(details.find('p').isVisible()).toEqual(false)

Additional context

A text node can also be a direct child of details. That direct text node is hidden when the attribute open is missing;

Used test-utils version 2.4.6

[cexbrayat]

Hi @jashaj

Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?

It only takes a few minutes, and we'll be able to take a look

[jashaj]

Hi @cexbrayat, here's the test file: https://stackblitz.com/edit/github-utvcwwef?file=src%2Fcomponents%2F__tests__%2FDetailsComponent.spec.ts

[cexbrayat]

I wouldn't be surprised if this was a jsdom issue. have you tried to run the test in a real browser? (see https://vitest.dev/guide/browser/)

[jashaj]

It's more likely this line but I wasn't sure if summary was overlooked while implementing this.

[cexbrayat]

That could be 👍 Would you like to open a PR to fix this? We would gladly review and merge it!