feat: allow custom `<transition>` stubs #2185

alecgibson · 2023-09-11T10:53:00Z

At the moment, @vue/test-utils doesn't allow custom <transition> stubs. For example, setting:

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

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

<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, and is actually a prop, 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.

Depends on:

chore: DRY up stub component transformer #2186

netlify · 2023-09-11T10:53:07Z

✅ Deploy Preview for vue-test-utils-docs ready!

Name	Link
🔨 Latest commit	`313fd2d`
🔍 Latest deploy log	https://app.netlify.com/sites/vue-test-utils-docs/deploys/65094e515b0cd000082af278
😎 Deploy Preview	https://deploy-preview-2185--vue-test-utils-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

cexbrayat

Thanks for the PR @alecgibson

cexbrayat · 2023-09-11T12:37:26Z

src/vnodeTransformers/stubComponentsTransformer.ts

-        type,
-        renderStubDefaultSlot: true
-      })
+      if (stubs['transition'] === true || stubs['Transition'] === true) {


If this is the proper way to fix this (I don't remember how it works exactly), then the same fix must be applied to transition-group, teleport and the other cases in the function no?

Oh yeah was just being lazy because this is the thing that affects me 😅 Will change those as well (it's a shame there's not an easy way to target both PascalCased and kebab-cased, but that's beyond the scope of this change...)

alecgibson · 2023-09-11T13:12:12Z

Okay I've separately raised #2186 (which this is now on top of), where I've commonised all the boilerplate for default stubs, so now this fix will fix all default stubs in the same way.

cexbrayat · 2023-09-11T14:17:56Z

Awesome, thanks @alecgibson , one of us will take a look when we have some time 👍

cexbrayat

Thanks @alecgibson 👍

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

alecgibson · 2023-09-19T07:36:33Z

@cexbrayat I've rebased onto main

alecgibson force-pushed the custom-transition-stub branch 2 times, most recently from e8ec540 to 9cad5ff Compare September 11, 2023 12:36

alecgibson changed the title ~~✨ Allow custom <transition> stubs~~ feat: allow custom <transition> stubs Sep 11, 2023

cexbrayat reviewed Sep 11, 2023

View reviewed changes

alecgibson force-pushed the custom-transition-stub branch from 9cad5ff to 6d7a285 Compare September 11, 2023 13:11

alecgibson requested a review from cexbrayat September 11, 2023 13:12

alecgibson force-pushed the custom-transition-stub branch from 6d7a285 to 37ab367 Compare September 12, 2023 06:01

cexbrayat approved these changes Sep 19, 2023

View reviewed changes

alecgibson force-pushed the custom-transition-stub branch from 37ab367 to 313fd2d Compare September 19, 2023 07:31

cexbrayat merged commit 0c2efe3 into vuejs:main Sep 19, 2023
7 checks passed

alecgibson deleted the custom-transition-stub branch September 19, 2023 09:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: allow custom `<transition>` stubs #2185

feat: allow custom `<transition>` stubs #2185

alecgibson commented Sep 11, 2023 •

edited

netlify bot commented Sep 11, 2023 •

edited

cexbrayat left a comment

cexbrayat Sep 11, 2023

alecgibson Sep 11, 2023 •

edited

alecgibson commented Sep 11, 2023

cexbrayat commented Sep 11, 2023

cexbrayat left a comment

alecgibson commented Sep 19, 2023

feat: allow custom <transition> stubs #2185

feat: allow custom <transition> stubs #2185

Conversation

alecgibson commented Sep 11, 2023 • edited

Depends on:

netlify bot commented Sep 11, 2023 • edited

✅ Deploy Preview for vue-test-utils-docs ready!

cexbrayat left a comment

Choose a reason for hiding this comment

cexbrayat Sep 11, 2023

Choose a reason for hiding this comment

alecgibson Sep 11, 2023 • edited

Choose a reason for hiding this comment

alecgibson commented Sep 11, 2023

cexbrayat commented Sep 11, 2023

cexbrayat left a comment

Choose a reason for hiding this comment

alecgibson commented Sep 19, 2023

feat: allow custom `<transition>` stubs #2185

feat: allow custom `<transition>` stubs #2185

alecgibson commented Sep 11, 2023 •

edited

netlify bot commented Sep 11, 2023 •

edited

alecgibson Sep 11, 2023 •

edited