From 0c2efe3f95e48b6b2f46ced040ee5075d532d4d0 Mon Sep 17 00:00:00 2001
From: Alec Gibson <12036746+alecgibson@users.noreply.github.com>
Date: Mon, 11 Sep 2023 13:35:56 +0100
Subject: [PATCH] feat: allow custom `<transition>` stubs

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
---
 .../stubComponentsTransformer.ts               | 12 +++++++-----
 tests/mountingOptions/global.stubs.spec.ts     | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/vnodeTransformers/stubComponentsTransformer.ts b/src/vnodeTransformers/stubComponentsTransformer.ts
index 716a94675..7f1a110fd 100644
--- a/src/vnodeTransformers/stubComponentsTransformer.ts
+++ b/src/vnodeTransformers/stubComponentsTransformer.ts
@@ -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
+      })
+    }
   }
 }
 
diff --git a/tests/mountingOptions/global.stubs.spec.ts b/tests/mountingOptions/global.stubs.spec.ts
index 29ccbcc2b..80b220084 100644
--- a/tests/mountingOptions/global.stubs.spec.ts
+++ b/tests/mountingOptions/global.stubs.spec.ts
@@ -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', () => {