docs: Fix vuetify example (#134)

* Fix vuetify example

* Fix attribute test

Co-authored-by: edgar.schnueriger <edgar.schnueriger@geopraevent.ch>

Author: Edgar Schnüriger

src/__tests__/components/Vuetify.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <div>
     <v-btn @click="show = true">open</v-btn>
     <v-dialog v-model="show">
       <v-card>
@@ -8,7 +8,17 @@
       </v-card>
     </v-dialog>
     <span v-if="showHint">This is a hint</span>
-  </v-app>
+    <v-menu bottom offset-y>
+      <template v-slot:activator="{on}">
+        <v-btn icon v-on="on">menu</v-btn>
+      </template>
+      <v-list>
+        <v-list-item @click="() => {}">
+          <v-list-item-title>menu item</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+  </div>
 </template>
 
 <script>

src/__tests__/vuetify.js

@@ -15,10 +15,13 @@ Vue.use(Vuetify)
 // Vuetify requires you to wrap your app with a v-app component that provides
 // a <div data-app="true"> node.
 const renderWithVuetify = (component, options, callback) => {
+  const root = document.createElement('div')
+  root.setAttribute('data-app', 'true')
+
   return render(
     component,
     {
-      container: document.createElement('div').setAttribute('data-app', 'true'),
+      container: document.body.appendChild(root),
       // for Vuetify components that use the $vuetify instance property
       vuetify: new Vuetify(),
       ...options,
@@ -27,6 +30,12 @@ const renderWithVuetify = (component, options, callback) => {
   )
 }
 
+test('should set [data-app] attribute on outer most div', () => {
+  const {container} = renderWithVuetify(VuetifyDemoComponent)
+
+  expect(container.getAttribute('data-app')).toEqual('true')
+})
+
 test('renders a Vuetify-powered component', async () => {
   const {getByText} = renderWithVuetify(VuetifyDemoComponent)
 
@@ -50,3 +59,15 @@ test('allows changing props', async () => {
 
   expect(queryByText('This is a hint')).toBeInTheDocument()
 })
+
+test('opens a menu', async () => {
+  const {getByText, queryByText} = renderWithVuetify(VuetifyDemoComponent)
+
+  await fireEvent.click(getByText('menu'))
+
+  const menuItem = queryByText('menu item')
+  expect(menuItem).toBeInTheDocument()
+
+  await fireEvent.click(menuItem)
+  expect(queryByText('menu item')).not.toBeInTheDocument()
+})