disabled attribute rendered with 'false' instead of ''

[Ken-vdE]

The original issue can be found here: vuejs/test-utils#1759

The disabled attribute gets set to 'false', which is incorrect.
The spec does not allow for false values, as per https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes.

The issue arises here (using Vue Test Utils):

<template>
   <component :is="type" :disabled="index > 1" @click="$emit('something')" data-testid="button"/>
</template>

And running a test like this:

const wrapper = mount(Component, { props: { type: 'button' } })
const button = wrapper.find('[data-testid="button"]')
await button.trigger('click');
expect(wrapper.emitted()).toHaveProperty('something')

Does not work because the this.attributes().disabled (in Test Utils baseWrapper) returns 'false' instead of undefined...

That means the dom was rendered incorrectly (... disabled="false" instead of not having disabled attribute).

[pkgray]

@Ken-vdE Curious why this was closed and re-opened as a vuejs/test-utils issue - I only experience this when using happy-dom and not jsdom

[Ken-vdE]

@pkgray you can view the mentioned issue above. More information is given there.

[pkgray]

@pkgray you can view the mentioned issue above. There, more information is given.

When I switch back to jsdom, this issue is no longer a problem, so I think it is caused by happy-dom

[capricorn86]

Thank you for reporting @Ken-vdE and @pkgray! 🙂

The issue has been fixed now.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v9.11.0