Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 38ebd3d

Browse files
committed
Bound queries to base element
1 parent 993c87f commit 38ebd3d

File tree

6 files changed

+107
-8
lines changed

6 files changed

+107
-8
lines changed

‎package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
"vue-jest": "^3.0.4",
5757
"vue-router": "^3.1.2",
5858
"vue-template-compiler": "^2.6.10",
59+
"vuetify": "^2.0.19",
5960
"vuex": "^3.1.1"
6061
},
6162
"peerDependencies": {

‎src/__tests__/components/Vuetify.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<v-app>
3+
<v-btn @click="show = true">open</v-btn>
4+
<v-dialog v-model="show">
5+
<v-card>
6+
<v-card-title class="headline green lighten-3">Lorem</v-card-title>
7+
<v-card-text>Lorem ipsum dolor sit amet.</v-card-text>
8+
</v-card>
9+
</v-dialog>
10+
</v-app>
11+
</template>
12+
13+
<script>
14+
export default {
15+
name: 'VuetifyDemoComponent',
16+
data() {
17+
return {
18+
show: false,
19+
}
20+
},
21+
}
22+
</script>

‎src/__tests__/render.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {render} from '@testing-library/vue'
2+
import '@testing-library/jest-dom/extend-expect'
3+
4+
test('returns baseElement which defaults to document.body', () => {
5+
const {baseElement} = render({template: '<div />'})
6+
expect(baseElement).toBe(document.body)
7+
})
8+
9+
test('returns custom baseElement', () => {
10+
const {baseElement} = render(
11+
{
12+
template: '<div />',
13+
},
14+
{
15+
baseElement: document.createElement('blink'),
16+
},
17+
)
18+
19+
expect(baseElement).toMatchInlineSnapshot(`
20+
<blink>
21+
<div>
22+
<div />
23+
</div>
24+
</blink>
25+
`)
26+
})
27+
28+
test('renders container', () => {
29+
const {container, getByTestId} = render({
30+
template: '<div data-testid="myDiv">my content</div>',
31+
})
32+
33+
expect(container.firstChild).toHaveTextContent(
34+
getByTestId('myDiv').textContent,
35+
)
36+
})

‎src/__tests__/vuetify.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Vue from 'vue'
2+
import {render, fireEvent} from '@testing-library/vue'
3+
import Vuetify from 'vuetify'
4+
import VuetifyDemoComponent from './components/Vuetify'
5+
6+
// We need to use a global Vue instance, otherwise Vuetify will complain about
7+
// read-only attributes.
8+
// More info: https://github.com/vuetifyjs/vuetify/issues/4068
9+
// https://vuetifyjs.com/en/getting-started/unit-testing
10+
Vue.use(Vuetify)
11+
12+
// Vuetify requires you to wrap you app with a v-app component that provides
13+
// a <div data-app="true"> node. So you can do that, or you can also set the
14+
// attribute to the DOM.
15+
document.body.setAttribute('data-app', true)
16+
// Another solution is to create a custom renderer that provides all the
17+
// environment required by Vuetify.
18+
19+
test('renders a Vuetify-powered component', async () => {
20+
const {getByText} = render(VuetifyDemoComponent, {
21+
vuetify: new Vuetify(),
22+
})
23+
24+
await fireEvent.click(getByText('open'))
25+
26+
expect(getByText('Lorem ipsum dolor sit amet.')).toMatchInlineSnapshot(`
27+
<div
28+
class="v-card__text"
29+
>
30+
Lorem ipsum dolor sit amet.
31+
</div>
32+
`)
33+
})

‎src/vue-testing-library.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ function render(
1414
{store = null, routes = null, ...mountOptions} = {},
1515
configurationCb,
1616
) {
17+
const div = document.createElement('div')
18+
const baseElement = mountOptions.baseElement || document.body
19+
const container = baseElement.appendChild(div)
20+
1721
const localVue = createLocalVue()
1822
let vuexStore = null
1923
let router = null
@@ -53,15 +57,12 @@ function render(
5357
})
5458

5559
mountedWrappers.add(wrapper)
56-
57-
const div = document.createElement('div')
58-
wrapper.element.parentNode.insertBefore(div, wrapper.element)
59-
div.appendChild(wrapper.element)
60+
container.appendChild(wrapper.element)
6061

6162
return {
62-
container: wrapper.element.parentNode,
63-
baseElement: document.body,
64-
debug: (el = wrapper.element) => logDOM(el),
63+
container,
64+
baseElement,
65+
debug: (el = baseElement) => logDOM(el),
6566
unmount: () => wrapper.destroy(),
6667
isUnmounted: () => wrapper.vm._isDestroyed,
6768
html: () => wrapper.html(),
@@ -70,7 +71,7 @@ function render(
7071
wrapper.setProps(_)
7172
return wait()
7273
},
73-
...getQueriesForElement(wrapper.element.parentNode),
74+
...getQueriesForElement(baseElement),
7475
}
7576
}
7677

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /