Skip to content

Commit 5dbb8cb

Browse files
authored
feat: add RouterLinkStub (#366)
* docs: add getting started with karma * docs: add karma guide to menu * feat(RouterLinkStub): add RouterLinkStub component
1 parent ead0efe commit 5dbb8cb

File tree

5 files changed

+105
-2
lines changed

5 files changed

+105
-2
lines changed

docs/en/SUMMARY.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@
4242
* [isVueInstance](api/wrapper/isVueInstance.md)
4343
* [name](api/wrapper/name.md)
4444
* [props](api/wrapper/props.md)
45-
* [setComputed](api/wrapper/setComputed.md)
4645
* [setData](api/wrapper/setData.md)
4746
* [setMethods](api/wrapper/setMethods.md)
4847
* [setProps](api/wrapper/setProps.md)
@@ -69,6 +68,7 @@
6968
* [components](api/components/README.md)
7069
* [TransitionStub](api/components/TransitionStub.md)
7170
* [TransitionGroupStub](api/components/TransitionGroupStub.md)
71+
* [RouterLinkStub](api/components/RouterLinkStub.md)
7272
* [Selectors](api/selectors.md)
7373
* [createLocalVue](api/createLocalVue.md)
7474
* [config](api/config.md)
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# RouterLinkStub
2+
3+
A component to stub the Vue Router `router-link` component.
4+
5+
You can use this component to find a router-link component in the render tree.
6+
7+
- **Usage:**
8+
9+
To set it as a stub in mounting options:
10+
11+
```js
12+
import { mount, RouterLinkStub } from '@vue/test-utils'
13+
14+
const wrapper = mount(Component, {
15+
stubs: {
16+
RouterLink: RouterLinkStub
17+
}
18+
})
19+
expect(wrapper.find(RouterLinkStub).props().to).toBe('/some/path')
20+
```

src/components/RouterLinkStub.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// @flow
2+
const toTypes: Array<Function> = [String, Object]
3+
const eventTypes: Array<Function> = [String, Array]
4+
5+
export default {
6+
name: 'RouterLinkStub',
7+
props: {
8+
to: {
9+
type: toTypes,
10+
required: true
11+
},
12+
tag: {
13+
type: String,
14+
default: 'a'
15+
},
16+
exact: Boolean,
17+
append: Boolean,
18+
replace: Boolean,
19+
activeClass: String,
20+
exactActiveClass: String,
21+
event: {
22+
type: eventTypes,
23+
default: 'click'
24+
}
25+
},
26+
render (h: Function) {
27+
return h(this.tag, undefined, this.$slots.default)
28+
}
29+
}

src/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import mount from './mount'
33
import createLocalVue from './create-local-vue'
44
import TransitionStub from './components/TransitionStub'
55
import TransitionGroupStub from './components/TransitionGroupStub'
6+
import RouterLinkStub from './components/RouterLinkStub'
67
import config from './config'
78

89
export default {
@@ -11,5 +12,6 @@ export default {
1112
mount,
1213
shallow,
1314
TransitionStub,
14-
TransitionGroupStub
15+
TransitionGroupStub,
16+
RouterLinkStub
1517
}
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { mount, RouterLinkStub } from '~vue-test-utils'
2+
3+
describe('RouterLinkStub', () => {
4+
it('takes correct props', () => {
5+
const TestComponent = {
6+
template: `
7+
<div>
8+
<router-link
9+
to="to1"
10+
tag="tag1"
11+
exact="exact1"
12+
append="append1"
13+
replace="replace1"
14+
activeClass="activeClass1"
15+
exactActiveClass="exactActiveClass1"
16+
event="event1"
17+
/>
18+
</div>
19+
`
20+
}
21+
const wrapper = mount(TestComponent, {
22+
stubs: {
23+
RouterLink: RouterLinkStub
24+
}
25+
})
26+
const routerLink = wrapper.find(RouterLinkStub)
27+
expect(routerLink.props().to).to.equal('to1')
28+
expect(routerLink.props().tag).to.equal('tag1')
29+
expect(routerLink.props().exact).to.equal('exact1')
30+
expect(routerLink.props().append).to.equal('append1')
31+
expect(routerLink.props().replace).to.equal('replace1')
32+
expect(routerLink.props().activeClass).to.equal('activeClass1')
33+
expect(routerLink.props().exactActiveClass).to.equal('exactActiveClass1')
34+
expect(routerLink.props().event).to.equal('event1')
35+
})
36+
37+
it('renders slot content', () => {
38+
const TestComponent = {
39+
template: `
40+
<div>
41+
<router-link>some text</router-link>
42+
</div>
43+
`
44+
}
45+
const wrapper = mount(TestComponent, {
46+
stubs: {
47+
RouterLink: RouterLinkStub
48+
}
49+
})
50+
expect(wrapper.find(RouterLinkStub).text()).to.equal('some text')
51+
})
52+
})

0 commit comments

Comments
 (0)