Skip to content

fix: disable stubs for built-in components on shallow #1409

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 19, 2022
Merged

fix: disable stubs for built-in components on shallow #1409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f114381
fix: disable stubs for built-in components on shallow
freakzlike Apr 8, 2022
6a37360
fix: wrong import of BaseTransition
freakzlike Apr 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions src/stubs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
transformVNodeArgs,
Transition,
TransitionGroup,
BaseTransition,
Teleport,
h,
defineComponent,
Expand Down Expand Up @@ -157,7 +158,12 @@ export function stubComponents(
const type = nodeType as VNodeTypes | typeof Teleport

// stub transition by default via config.global.stubs
if (type === Transition && 'transition' in stubs && stubs['transition']) {
if (
(type === Transition || type === BaseTransition) &&
'transition' in stubs
) {
if (stubs.transition === false) return args

return [
createStub({
name: 'transition',
Expand All @@ -169,11 +175,9 @@ export function stubComponents(
}

// stub transition-group by default via config.global.stubs
if (
type === TransitionGroup &&
'transition-group' in stubs &&
stubs['transition-group']
) {
if (type === TransitionGroup && 'transition-group' in stubs) {
if (stubs['transition-group'] === false) return args

return [
createStub({
name: 'transition-group',
Expand All @@ -185,7 +189,9 @@ export function stubComponents(
}

// stub teleport by default via config.global.stubs
if (type === Teleport && 'teleport' in stubs && stubs['teleport']) {
if (type === Teleport && 'teleport' in stubs) {
if (stubs.teleport === false) return args

return [
createStub({
name: 'teleport',
Expand Down
188 changes: 125 additions & 63 deletions tests/mountingOptions/global.stubs.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,87 +392,149 @@ describe('mounting options: stubs', () => {
)
})

it('stubs transition by default', () => {
const Comp = {
template: `<transition><div id="content" /></transition>`
}
const wrapper = mount(Comp)
describe('transition', () => {
it('stubs transition by default', () => {
const Comp = {
template: `<transition><div id="content" /></transition>`
}
const wrapper = mount(Comp)

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

it('opts out of stubbing transition by default', () => {
const Comp = {
template: `<transition><div id="content" /></transition>`
}
const wrapper = mount(Comp, {
global: {
stubs: {
transition: false
}
it('opts out of stubbing transition by default', () => {
const Comp = {
template: `<transition><div id="content" /></transition>`
}
const wrapper = mount(Comp, {
global: {
stubs: {
transition: false
}
}
})

// 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"></div>')
})

// 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"></div>')
it('does not stub transition on shallow with false', () => {
const Comp = {
template: `<transition><div id="content" /></transition>`
}
const wrapper = mount(Comp, {
shallow: true,
global: {
stubs: {
transition: false
}
}
})

// 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"></div>')
})
})

it('opts out of stubbing transition-group by default', () => {
const Comp = {
template: `<transition-group><div key="content" id="content" /></transition-group>`
}
const wrapper = mount(Comp, {
global: {
stubs: {
'transition-group': false
}
describe('transition-group', () => {
it('stubs transition-group by default', () => {
const Comp = {
template: `<transition-group><div key="a" id="content" /></transition-group>`
}
const wrapper = mount(Comp)
expect(wrapper.find('#content').exists()).toBe(true)
})

// 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"></div>')
})
it('opts out of stubbing transition-group by default', () => {
const Comp = {
template: `<transition-group><div key="content" id="content" /></transition-group>`
}
const wrapper = mount(Comp, {
global: {
stubs: {
'transition-group': false
}
}
})

it('stubs transition-group by default', () => {
const Comp = {
template: `<transition-group><div key="a" id="content" /></transition-group>`
}
const wrapper = mount(Comp)
expect(wrapper.find('#content').exists()).toBe(true)
})
// 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"></div>')
})

it('does not stub teleport by default', () => {
const Comp = {
template: `<teleport to="body"><div id="content" /></teleport>`
}
const wrapper = mount(Comp)
it('does not stub transition-group on shallow with false', () => {
const Comp = {
template: `<transition-group><div key="content" id="content" /></transition-group>`
}
const wrapper = mount(Comp, {
shallow: true,
global: {
stubs: {
'transition-group': false
}
}
})

expect(wrapper.html()).toBe(
'<!--teleport start-->\n' + '<!--teleport end-->'
)
// 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"></div>')
})
})

it('opts in to stubbing teleport ', () => {
const Comp = {
template: `<teleport to="body"><div id="content" /></teleport>`
}
const wrapper = mount(Comp, {
global: {
stubs: {
teleport: true
}
describe('teleport', () => {
it('does not stub teleport by default', () => {
const Comp = {
template: `<teleport to="body"><div id="content" /></teleport>`
}
const wrapper = mount(Comp)

expect(wrapper.html()).toBe(
'<!--teleport start-->\n' + '<!--teleport end-->'
)
})

expect(wrapper.html()).toBe(
'<teleport-stub>\n' + ' <div id="content"></div>\n' + '</teleport-stub>'
)
it('opts in to stubbing teleport ', () => {
const Comp = {
template: `<teleport to="body"><div id="content" /></teleport>`
}
const wrapper = mount(Comp, {
global: {
stubs: {
teleport: true
}
}
})

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

it('does not stub teleport with shallow', () => {
const Comp = {
template: `<teleport to="body"><div id="content" /></teleport>`
}
const wrapper = mount(Comp, {
shallow: true,
global: {
stubs: {
teleport: false
}
}
})

expect(wrapper.html()).toBe(
'<!--teleport start-->\n' + '<!--teleport end-->'
)
})
})

it('stubs component by key prior before name', () => {
Expand Down