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 3f5b5f5

Browse files
Edgar Schnürigeredgar.schnueriger
Edgar Schnüriger
and
edgar.schnueriger
authored
docs: Fix vuetify example (testing-library#134)
* Fix vuetify example * Fix attribute test Co-authored-by: edgar.schnueriger <edgar.schnueriger@geopraevent.ch>
1 parent d628f36 commit 3f5b5f5

File tree

2 files changed

+34
-3
lines changed

2 files changed

+34
-3
lines changed

‎src/__tests__/components/Vuetify.vue‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<v-app>
2+
<div>
33
<v-btn @click="show = true">open</v-btn>
44
<v-dialog v-model="show">
55
<v-card>
@@ -8,7 +8,17 @@
88
</v-card>
99
</v-dialog>
1010
<span v-if="showHint">This is a hint</span>
11-
</v-app>
11+
<v-menu bottom offset-y>
12+
<template v-slot:activator="{on}">
13+
<v-btn icon v-on="on">menu</v-btn>
14+
</template>
15+
<v-list>
16+
<v-list-item @click="() => {}">
17+
<v-list-item-title>menu item</v-list-item-title>
18+
</v-list-item>
19+
</v-list>
20+
</v-menu>
21+
</div>
1222
</template>
1323

1424
<script>

‎src/__tests__/vuetify.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,13 @@ Vue.use(Vuetify)
1515
// Vuetify requires you to wrap your app with a v-app component that provides
1616
// a <div data-app="true"> node.
1717
const renderWithVuetify = (component, options, callback) => {
18+
const root = document.createElement('div')
19+
root.setAttribute('data-app', 'true')
20+
1821
return render(
1922
component,
2023
{
21-
container: document.createElement('div').setAttribute('data-app','true'),
24+
container: document.body.appendChild(root),
2225
// for Vuetify components that use the $vuetify instance property
2326
vuetify: new Vuetify(),
2427
...options,
@@ -27,6 +30,12 @@ const renderWithVuetify = (component, options, callback) => {
2730
)
2831
}
2932

33+
test('should set [data-app] attribute on outer most div', () => {
34+
const {container} = renderWithVuetify(VuetifyDemoComponent)
35+
36+
expect(container.getAttribute('data-app')).toEqual('true')
37+
})
38+
3039
test('renders a Vuetify-powered component', async () => {
3140
const {getByText} = renderWithVuetify(VuetifyDemoComponent)
3241

@@ -50,3 +59,15 @@ test('allows changing props', async () => {
5059

5160
expect(queryByText('This is a hint')).toBeInTheDocument()
5261
})
62+
63+
test('opens a menu', async () => {
64+
const {getByText, queryByText} = renderWithVuetify(VuetifyDemoComponent)
65+
66+
await fireEvent.click(getByText('menu'))
67+
68+
const menuItem = queryByText('menu item')
69+
expect(menuItem).toBeInTheDocument()
70+
71+
await fireEvent.click(menuItem)
72+
expect(queryByText('menu item')).not.toBeInTheDocument()
73+
})

0 commit comments

Comments
(0)

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