Skip to content

Commit

Permalink
feat: allow custom <transition> stubs
Browse files Browse the repository at this point in the history
At the moment, `@vue/test-utils` doesn't allow custom `<transition>`
stubs. For example, setting:

```js
config.stubs.transition = {template: '<div />'};
```

...will still just render the default `@vue/test-utils` stub:

```html
<transition-stub appear="false" persisted="false" css="true">
```

The motivation for this change is that if you're using the `@vue/compat`
migration build, these default stubs throw up the following warning:

```
Error: (deprecation ATTR_FALSE_VALUE) Attribute "persisted" with v-bind value `false` will render persisted="false" instead of removing it in Vue 3. To remove the attribute, use `null` or `undefined` instead. If the usage is intended, you can disable the compat behavior and suppress this warning with:

      configureCompat({ ATTR_FALSE_VALUE: false })

      Details: https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html
      at <Transition>
```

Since `persisted` isn't actually a [boolean HTML attribute][1], and is
actually a [prop][2], we want to ignore this false positive, but don't
want to disable this warning everywhere (so we can catch *actual*
errors).

In order to clean up our test warnings, we would like to use a custom
`<transition>` stub, which doesn't have these props. This change tweaks
the `transition` stubbing logic, and only creates the default stub if
`transition === true`. If it's any other truthy value, it falls back to
"normal" stubbing behaviour.

[1]: https://html.spec.whatwg.org/multipage/indices.html#attributes-3
[2]: https://github.com/vuejs/core/blob/b775b71c788499ec7ee58bc2cf4cd04ed388e072/packages/runtime-core/src/components/BaseTransition.ts#L37
  • Loading branch information
alecgibson authored and cexbrayat committed Sep 19, 2023
1 parent 211afd8 commit 0c2efe3
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 5 deletions.
12 changes: 7 additions & 5 deletions src/vnodeTransformers/stubComponentsTransformer.ts
Expand Up @@ -78,11 +78,13 @@ const createDefaultStub = (
if (kebabTag in stubs && stubs[kebabTag] === false) return type
if (pascalTag in stubs && stubs[pascalTag] === false) return type

return createStub({
name: kebabTag,
type,
renderStubDefaultSlot: true
})
if (stubs[kebabTag] === true || stubs[pascalTag] === true) {
return createStub({
name: kebabTag,
type,
renderStubDefaultSlot: true
})
}
}
}

Expand Down
18 changes: 18 additions & 0 deletions tests/mountingOptions/global.stubs.spec.ts
Expand Up @@ -482,6 +482,24 @@ describe('mounting options: stubs', () => {
'</transition-stub>'
)
})

it('custom transition stub', () => {
const Comp = {
template: `<transition><div id="content-custom-stub" /></transition>`
}
config.global.stubs = {
transition: {
template: '<div class="custom-transition-stub"><slot /></div>'
}
}
const wrapper = mount(Comp)

expect(wrapper.html()).toBe(
'<div class="custom-transition-stub">\n' +
' <div id="content-custom-stub"></div>\n' +
'</div>'
)
})
})

describe('transition-group', () => {
Expand Down

0 comments on commit 0c2efe3

Please sign in to comment.