Skip to content

Commit

Permalink
fix: allow finding async component stubs by definition
Browse files Browse the repository at this point in the history
  • Loading branch information
xanf committed Apr 30, 2023
1 parent 5bcf304 commit ba8bbb3
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 17 deletions.
24 changes: 19 additions & 5 deletions src/vnodeTransformers/stubComponentsTransformer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import {
ConcreteComponent,
ComponentPropsOptions,
ComponentObjectPropsOptions,
DefineComponent,
Component
Component,
ComponentOptions
} from 'vue'
import { hyphenate } from '../utils/vueShared'
import { matchName } from '../utils/matchName'
Expand All @@ -28,6 +28,7 @@ import { registerStub } from '../stubs'
export type CustomCreateStub = (params: {
name: string
component: ConcreteComponent
registerStub: (config: { source: Component; stub: Component }) => void
}) => ConcreteComponent

interface StubOptions {
Expand All @@ -54,15 +55,15 @@ export const createStub = ({
name,
type,
renderStubDefaultSlot
}: StubOptions): DefineComponent => {
}: StubOptions) => {
const anonName = 'anonymous-stub'
const tag = name ? `${hyphenate(name)}-stub` : anonName

const componentOptions = type
? unwrapLegacyVueExtendComponent(type) || {}
: {}

return defineComponent({
const stub = defineComponent({
name: name || anonName,
props: (componentOptions as ConcreteComponent).props || {},
// fix #1550 - respect old-style v-model for shallow mounted components with @vue/compat
Expand All @@ -84,6 +85,18 @@ export const createStub = ({
}
}
})

const { __asyncLoader: asyncLoader } = type as ComponentOptions
if (asyncLoader) {
asyncLoader().then(() => {
registerStub({
source: (type as ComponentOptions).__asyncResolved,
stub
})
})
}

return stub
}

const resolveComponentStubByName = (
Expand Down Expand Up @@ -230,7 +243,8 @@ export function createStubComponentsTransformer({
return (
config.plugins.createStubs?.({
name: stubName,
component: type
component: type,
registerStub
}) ??
createStub({
name: stubName,
Expand Down
37 changes: 36 additions & 1 deletion tests/features/async-components.spec.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
import { defineAsyncComponent, defineComponent, h, AppConfig } from 'vue'
import { mount, flushPromises } from '../../src'
import { mount, shallowMount, flushPromises } from '../../src'
import Hello from '../components/Hello.vue'

const config: Partial<AppConfig> = {
errorHandler: (error: unknown) => {
Expand Down Expand Up @@ -108,4 +109,38 @@ describe('defineAsyncComponent', () => {
await vi.dynamicImportSettled()
expect(wrapper.html()).toContain('Hello world')
})

it('finds Async Component by async definition when using shallow mount', async () => {
const AsyncHello = defineAsyncComponent(
() => import('../components/Hello.vue')
)

const Comp = defineComponent({
render() {
return h(AsyncHello)
}
})

const wrapper = shallowMount(Comp)
await flushPromises()
await vi.dynamicImportSettled()
expect(wrapper.findComponent(AsyncHello).exists()).toBe(true)
})

it('finds Async Component by definition when using shallow mount', async () => {
const AsyncHello = defineAsyncComponent(
() => import('../components/Hello.vue')
)

const Comp = defineComponent({
render() {
return h(AsyncHello)
}
})

const wrapper = shallowMount(Comp)
await flushPromises()
await vi.dynamicImportSettled()
expect(wrapper.findComponent(Hello).exists()).toBe(true)
})
})
14 changes: 9 additions & 5 deletions tests/features/plugins.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
vi
} from 'vitest'
import { ComponentPublicInstance, h } from 'vue'

import { registerStub } from '../../src/stubs'
import { mount, config, VueWrapper } from '../../src'

declare module '../../src/vueWrapper' {
Expand Down Expand Up @@ -145,11 +145,13 @@ describe('createStubs', () => {
expect(customCreateStub).toHaveBeenCalledTimes(2)
expect(customCreateStub).toHaveBeenCalledWith({
name: 'child1',
component: Child1
component: Child1,
registerStub
})
expect(customCreateStub).toHaveBeenCalledWith({
name: 'child2',
component: Child2
component: Child2,
registerStub
})
})

Expand All @@ -173,7 +175,8 @@ describe('createStubs', () => {
expect(customCreateStub).toHaveBeenCalledTimes(1)
expect(customCreateStub).toHaveBeenCalledWith({
name: 'child2',
component: Child2
component: Child2,
registerStub
})
})

Expand Down Expand Up @@ -212,7 +215,8 @@ describe('createStubs', () => {
expect(customCreateStub).toHaveBeenCalledTimes(1)
expect(customCreateStub).toHaveBeenCalledWith({
name: 'child1',
component: Child1
component: Child1,
registerStub
})
})
})
16 changes: 10 additions & 6 deletions tests/mountingOptions/global.stubs.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -679,16 +679,16 @@ describe('mounting options: stubs', () => {
})

describe('stub async component', () => {
const AsyncComponent = defineAsyncComponent(async () => ({
name: 'AsyncComponent',
template: '<span>AsyncComponent</span>'
}))

const AsyncComponentWithoutName = defineAsyncComponent(async () => ({
template: '<span>AsyncComponent</span>'
}))

it('stubs async component with name', async () => {
const AsyncComponent = defineAsyncComponent(async () => ({
name: 'AsyncComponent',
template: '<span>AsyncComponent</span>'
}))

const TestComponent = defineComponent({
components: {
MyComponent: AsyncComponent
Expand All @@ -704,7 +704,6 @@ describe('mounting options: stubs', () => {
}
})

// flushPromises required to resolve async component
expect(wrapper.html()).not.toBe(
'<async-component-stub></async-component-stub>'
)
Expand All @@ -716,6 +715,11 @@ describe('mounting options: stubs', () => {
})

it('stubs async component with name by alias', () => {
const AsyncComponent = defineAsyncComponent(async () => ({
name: 'AsyncComponent',
template: '<span>AsyncComponent</span>'
}))

const TestComponent = defineComponent({
components: {
MyComponent: AsyncComponent
Expand Down

0 comments on commit ba8bbb3

Please sign in to comment.