Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: rename shallow to shallowMount (#576)
- Loading branch information
1 parent
f3dfb1e
commit f689640
Showing
5 changed files
with
254 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
// @flow | ||
|
||
import './warn-if-no-window' | ||
import Vue from 'vue' | ||
import mount from './mount' | ||
import type VueWrapper from './vue-wrapper' | ||
import { | ||
createComponentStubsForAll, | ||
createStubs | ||
} from 'shared/stub-components' | ||
import { camelize, | ||
capitalize, | ||
hyphenate | ||
} from 'shared/util' | ||
|
||
export default function shallowMount ( | ||
component: Component, | ||
options: Options = {} | ||
): VueWrapper { | ||
const vue = options.localVue || Vue | ||
|
||
// remove any recursive components added to the constructor | ||
// in vm._init from previous tests | ||
if (component.name && component.components) { | ||
delete component.components[capitalize(camelize(component.name))] | ||
delete component.components[hyphenate(component.name)] | ||
} | ||
|
||
return mount(component, { | ||
...options, | ||
components: { | ||
...createStubs(vue.options.components), | ||
...createComponentStubsForAll(component) | ||
} | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,206 @@ | ||
import { compileToFunctions } from 'vue-template-compiler' | ||
import Vue from 'vue' | ||
import { mount, shallowMount } from '~vue/test-utils' | ||
import Component from '~resources/components/component.vue' | ||
import ComponentWithChild from '~resources/components/component-with-child.vue' | ||
import ComponentWithNestedChildren from '~resources/components/component-with-nested-children.vue' | ||
import ComponentWithLifecycleHooks from '~resources/components/component-with-lifecycle-hooks.vue' | ||
import ComponentWithoutName from '~resources/components/component-without-name.vue' | ||
import ComponentAsAClassWithChild from '~resources/components/component-as-a-class-with-child.vue' | ||
import RecursiveComponent from '~resources/components/recursive-component.vue' | ||
import { vueVersion, describeIf } from '~resources/utils' | ||
|
||
describeIf(process.env.TEST_ENV !== 'node', | ||
'shallow', () => { | ||
let info | ||
|
||
beforeEach(() => { | ||
info = sinon.stub(console, 'info') | ||
}) | ||
|
||
afterEach(() => { | ||
info.restore() | ||
}) | ||
|
||
it('returns new VueWrapper of Vue localVue if no options are passed', () => { | ||
const compiled = compileToFunctions('<div><input /></div>') | ||
const wrapper = shallowMount(compiled) | ||
expect(wrapper.isVueComponent).to.equal(true) | ||
expect(wrapper.vm).to.be.an('object') | ||
}) | ||
|
||
it('returns new VueWrapper of Vue localVue with all children stubbed', () => { | ||
const wrapper = shallowMount(ComponentWithNestedChildren) | ||
expect(wrapper.isVueComponent).to.equal(true) | ||
expect(wrapper.findAll(Component).length).to.equal(0) | ||
expect(wrapper.findAll(ComponentWithChild).length).to.equal(1) | ||
}) | ||
|
||
it('returns new VueWrapper of Vue localVue with all children stubbed', () => { | ||
const wrapper = shallowMount(ComponentWithNestedChildren) | ||
expect(wrapper.isVueComponent).to.equal(true) | ||
expect(wrapper.findAll(Component).length).to.equal(0) | ||
expect(wrapper.findAll(ComponentWithChild).length).to.equal(1) | ||
}) | ||
|
||
it('does not modify component directly', () => { | ||
const wrapper = shallowMount(ComponentWithNestedChildren) | ||
expect(wrapper.findAll(Component).length).to.equal(0) | ||
const mountedWrapper = mount(ComponentWithNestedChildren) | ||
expect(mountedWrapper.findAll(Component).length).to.equal(1) | ||
}) | ||
|
||
it('stubs globally registered components when options.localVue is provided', () => { | ||
const localVue = Vue.extend() | ||
localVue.component('registered-component', ComponentWithLifecycleHooks) | ||
const Component = { | ||
render: h => h('registered-component') | ||
} | ||
shallowMount(Component, { localVue }) | ||
mount(Component, { localVue }) | ||
|
||
expect(info.callCount).to.equal(4) | ||
}) | ||
|
||
it('stubs globally registered components', () => { | ||
Vue.component('registered-component', ComponentWithLifecycleHooks) | ||
const Component = { | ||
render: h => h('registered-component') | ||
} | ||
shallowMount(Component) | ||
mount(Component) | ||
|
||
expect(info.callCount).to.equal(4) | ||
}) | ||
|
||
it('does not call stubbed children lifecycle hooks', () => { | ||
shallowMount(ComponentWithNestedChildren) | ||
expect(info.called).to.equal(false) | ||
}) | ||
|
||
it('stubs extended components', () => { | ||
const ComponentWithPTag = { | ||
template: `<p></p>` | ||
} | ||
const BaseComponent = { | ||
template: ` | ||
<div> | ||
<component-with-p-tag /> | ||
</div> | ||
`, | ||
components: { | ||
ComponentWithPTag | ||
} | ||
} | ||
|
||
const TestComponent = { | ||
extends: BaseComponent | ||
} | ||
|
||
const wrapper = shallowMount(TestComponent) | ||
expect(wrapper.find(ComponentWithPTag).exists()).to.equal(true) | ||
expect(wrapper.find('p').exists()).to.equal(false) | ||
}) | ||
|
||
it('stubs nested extended components', () => { | ||
const ComponentWithPTag = { | ||
template: `<p></p>` | ||
} | ||
const BaseComponent = { | ||
template: ` | ||
<div> | ||
<component-with-p-tag /> | ||
</div> | ||
`, | ||
components: { | ||
ComponentWithPTag | ||
} | ||
} | ||
|
||
const ExtendedBaseComponent = { | ||
extends: BaseComponent | ||
} | ||
|
||
const TestComponent = { | ||
extends: ExtendedBaseComponent | ||
} | ||
|
||
const wrapper = shallowMount(TestComponent) | ||
expect(wrapper.find(ComponentWithPTag).exists()).to.equal(true) | ||
expect(wrapper.find('p').exists()).to.equal(false) | ||
}) | ||
|
||
it('stubs Vue class component children', () => { | ||
if (vueVersion < 2.3) { | ||
return | ||
} | ||
const wrapper = shallowMount(ComponentAsAClassWithChild) | ||
expect(wrapper.find(Component).exists()).to.equal(true) | ||
expect(wrapper.findAll('div').length).to.equal(1) | ||
}) | ||
|
||
it('works correctly with find, contains, findAll, and is on unnamed components', () => { | ||
const TestComponent = { | ||
template: ` | ||
<div> | ||
<component-without-name /> | ||
</div> | ||
`, | ||
components: { | ||
ComponentWithoutName | ||
} | ||
} | ||
const wrapper = shallowMount(TestComponent) | ||
expect(wrapper.contains(ComponentWithoutName)).to.equal(true) | ||
expect(wrapper.find(ComponentWithoutName).exists()).to.equal(true) | ||
expect(wrapper.findAll(ComponentWithoutName).length).to.equal(1) | ||
}) | ||
|
||
it('works correctly with find, contains, findAll, and is on named components', () => { | ||
const TestComponent = { | ||
template: ` | ||
<div> | ||
<a-component /> | ||
</div> | ||
`, | ||
components: { | ||
AComponent: Component | ||
} | ||
} | ||
const wrapper = shallowMount(TestComponent) | ||
expect(wrapper.contains(Component)).to.equal(true) | ||
expect(wrapper.find(Component).exists()).to.equal(true) | ||
expect(wrapper.findAll(Component).length).to.equal(1) | ||
}) | ||
|
||
it('works correctly with find on recursive components', () => { | ||
// this is for a bug that I've been unable to replicate. | ||
// Sometimes components mutate their components, in this line— | ||
RecursiveComponent.components = { | ||
RecursiveComponent: { render: h => h('div') } | ||
} | ||
|
||
expect(shallowMount(RecursiveComponent, { | ||
propsData: { | ||
items: ['', ''] | ||
} | ||
}).findAll(RecursiveComponent).length).to.equal(2) | ||
RecursiveComponent.components = { | ||
'recursive-component': { render: h => h('div') } | ||
} | ||
expect(shallowMount(RecursiveComponent, { | ||
propsData: { | ||
items: ['', ''] | ||
} | ||
}).findAll(RecursiveComponent).length).to.equal(2) | ||
}) | ||
|
||
it('throws an error when the component fails to mount', () => { | ||
expect(() => shallowMount({ | ||
template: '<div></div>', | ||
mounted: function () { | ||
throw (new Error('Error')) | ||
} | ||
})).to.throw() | ||
}) | ||
}) |