fix: allow to use Teleport, Transition and TransitionGroup in PascalCase in stubs (#2073)

lbineau · web-flow · commit 5e34d413198f · 2023-05-24T13:59:43.000+02:00
Fixes #2072
diff --git a/src/vnodeTransformers/stubComponentsTransformer.ts b/src/vnodeTransformers/stubComponentsTransformer.ts
@@ -135,8 +135,9 @@ export function createStubComponentsTransformer({
 }: CreateStubComponentsTransformerConfig): VTUVNodeTypeTransformer {
   return function componentsTransformer(type, instance) {
     // stub teleport by default via config.global.stubs
-    if (isTeleport(type) && 'teleport' in stubs) {
-      if (stubs.teleport === false) return type
+    if (isTeleport(type) && ('teleport' in stubs || 'Teleport' in stubs)) {
+      if ('teleport' in stubs && stubs['teleport'] === false) return type
+      if ('Teleport' in stubs && stubs['Teleport'] === false) return type
 
       return createStub({
         name: 'teleport',
@@ -160,9 +161,10 @@ export function createStubComponentsTransformer({
     // stub transition by default via config.global.stubs
     if (
       (type === Transition || (type as any) === BaseTransition) &&
-      'transition' in stubs
+      ('transition' in stubs || 'Transition' in stubs)
     ) {
-      if (stubs.transition === false) return type
+      if ('transition' in stubs && stubs['transition'] === false) return type
+      if ('Transition' in stubs && stubs['Transition'] === false) return type
 
       return createStub({
         name: 'transition',
@@ -172,8 +174,14 @@ export function createStubComponentsTransformer({
     }
 
     // stub transition-group by default via config.global.stubs
-    if ((type as any) === TransitionGroup && 'transition-group' in stubs) {
-      if (stubs['transition-group'] === false) return type
+    if (
+      (type as any) === TransitionGroup &&
+      ('transition-group' in stubs || 'TransitionGroup' in stubs)
+    ) {
+      if ('transition-group' in stubs && stubs['transition-group'] === false)
+        return type
+      if ('TransitionGroup' in stubs && stubs['TransitionGroup'] === false)
+        return type
 
       return createStub({
         name: 'transition-group',
diff --git a/tests/mountingOptions/global.stubs.spec.ts b/tests/mountingOptions/global.stubs.spec.ts
@@ -452,6 +452,36 @@ describe('mounting options: stubs', () => {
       // appear in the html when it isn't stubbed.
       expect(wrapper.html()).toBe('<div id="content"></div>')
     })
+
+    it('does not stub transition after overriding config.global.stubs', () => {
+      const Comp = {
+        template: `<transition><div id="content-global-stubs-no-transition" /></transition>`
+      }
+      config.global.stubs = {}
+      const wrapper = mount(Comp)
+
+      // Vue removes <transition> at run-time and does it's magic, so <transition> should not
+      // appear in the html when it isn't stubbed.
+      expect(wrapper.html()).toBe(
+        '<div id="content-global-stubs-no-transition"></div>'
+      )
+    })
+
+    it('stub transition after overriding config.global.stubs with Transition: true PascalCase', () => {
+      const Comp = {
+        template: `<transition><div id="content-global-stubs-transition" /></transition>`
+      }
+      config.global.stubs = {
+        Transition: true
+      }
+      const wrapper = mount(Comp)
+
+      expect(wrapper.html()).toBe(
+        '<transition-stub appear="false" persisted="false" css="true">\n' +
+          '  <div id="content-global-stubs-transition"></div>\n' +
+          '</transition-stub>'
+      )
+    })
   })
 
   describe('transition-group', () => {
@@ -497,6 +527,36 @@ describe('mounting options: stubs', () => {
       // appear in the html when it isn't stubbed.
       expect(wrapper.html()).toBe('<div id="content"></div>')
     })
+
+    it('does not stub transition-group after overriding config.global.stubs', () => {
+      const Comp = {
+        template: `<transition-group><div key="content" id="content-global-stubs-no-transition-group" /></transition-group>`
+      }
+      config.global.stubs = {}
+      const wrapper = mount(Comp)
+
+      // Vue removes <transition-group> at run-time and does it's magic, so <transition-group> should not
+      // appear in the html when it isn't stubbed.
+      expect(wrapper.html()).toBe(
+        '<div id="content-global-stubs-no-transition-group"></div>'
+      )
+    })
+
+    it('stub transition-group after overriding config.global.stubs with TransitionGroup: true in PascalCase', () => {
+      const Comp = {
+        template: `<transition-group><div key="content" id="content-global-stubs-transition-group" /></transition-group>`
+      }
+      config.global.stubs = {
+        TransitionGroup: true
+      }
+      const wrapper = mount(Comp)
+
+      expect(wrapper.html()).toBe(
+        '<transition-group-stub appear="false" persisted="false" css="true">\n' +
+          '  <div id="content-global-stubs-transition-group"></div>\n' +
+          '</transition-group-stub>'
+      )
+    })
   })
 
   describe('teleport', () => {
@@ -551,6 +611,25 @@ describe('mounting options: stubs', () => {
         '<!--teleport start-->\n' + '<!--teleport end-->'
       )
     })
+
+    it('opts in to stubbing teleport with Teleport: true', () => {
+      const Comp = {
+        template: `<teleport to="body"><div id="content-global-stubs-teleport" /></teleport>`
+      }
+      const wrapper = mount(Comp, {
+        global: {
+          stubs: {
+            Teleport: true
+          }
+        }
+      })
+
+      expect(wrapper.html()).toBe(
+        '<teleport-stub to="body">\n' +
+          '  <div id="content-global-stubs-teleport"></div>\n' +
+          '</teleport-stub>'
+      )
+    })
   })
 
   describe('keep-alive', () => {
