From d0ecb612e1cbc64d757201d0d84e1208a0b03dce Mon Sep 17 00:00:00 2001
From: Tim Maguire <timothy.maguire@spareroom.co.uk>
Date: Wed, 26 Dec 2018 15:14:19 +0000
Subject: [PATCH] - wrapped wrapper with containing div - return container and
 baseElement from render - pass container to getQueriesForElement

---
 src/index.js                          | 14 +++++++++---
 tests/__tests__/components/Button.vue | 31 +++++++++++++++++++++++++++
 tests/__tests__/simple-button.js      | 23 ++++++++++++++++++++
 3 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 tests/__tests__/components/Button.vue
 create mode 100644 tests/__tests__/simple-button.js

diff --git a/src/index.js b/src/index.js
index 95dc9cd3..7782dc2f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -50,7 +50,15 @@ function render (TestComponent, {
 
   mountedWrappers.add(wrapper)
 
+  if (wrapper.element.parentNode === document.body) {
+    const div = document.createElement('div')
+    wrapper.element.parentNode.insertBefore(div, wrapper.element)
+    div.appendChild(wrapper.element)
+  }
+
   return {
+    container: wrapper.element.parentNode,
+    baseElement: document.body,
     debug: () => console.log(prettyDOM(wrapper.element)),
     unmount: () => wrapper.destroy(),
     isUnmounted: () => wrapper.vm._isDestroyed,
@@ -61,7 +69,7 @@ function render (TestComponent, {
       return wait()
     },
     updateState: _ => wrapper.setData(_),
-    ...getQueriesForElement(wrapper.element)
+    ...getQueriesForElement(wrapper.element.parentNode)
   }
 }
 
@@ -70,8 +78,8 @@ function cleanup () {
 }
 
 function cleanupAtWrapper (wrapper) {
-  if (wrapper.parentNode === document.body) {
-    document.body.removeChild(wrapper)
+  if (wrapper.element.parentNode && wrapper.element.parentNode.parentNode === document.body) {
+    document.body.removeChild(wrapper.element.parentNode)
   }
   wrapper.destroy()
   mountedWrappers.delete(wrapper)
diff --git a/tests/__tests__/components/Button.vue b/tests/__tests__/components/Button.vue
new file mode 100644
index 00000000..dbddb62f
--- /dev/null
+++ b/tests/__tests__/components/Button.vue
@@ -0,0 +1,31 @@
+<template>
+  <button :class="typeClass" @click="clicked">{{ text }}</button>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: '',
+    },
+    clicked: {
+      type: Function,
+      default: () => true
+    },
+    type: {
+      validator: (value) => ['primary', 'secondary'].includes(value),
+    },
+
+  },
+  computed: {
+    typeClass: function() {
+      if (this.type) {
+        return `button button--${this.type}`;
+      }
+      return 'button';
+    },
+  },
+  
+};
+</script>
\ No newline at end of file
diff --git a/tests/__tests__/simple-button.js b/tests/__tests__/simple-button.js
new file mode 100644
index 00000000..2bf5ada3
--- /dev/null
+++ b/tests/__tests__/simple-button.js
@@ -0,0 +1,23 @@
+import { render, cleanup, fireEvent } from '../../src';
+import SimpleButton from './components/Button';
+
+afterEach(cleanup)
+
+test('renders button with text', () => {
+  const buttonText = "Click me; I'm sick"
+  const { getByText } = render(SimpleButton, {
+    props: { text: buttonText, clicked: () => true }
+  })
+
+  getByText(buttonText)
+})
+
+test('clicked prop is called when button is clicked', () => {
+  const clicked = jest.fn()
+  const text = 'Click me'
+  const { getByText } = render(SimpleButton, {
+    props: { text, clicked }
+  })
+  fireEvent.click(getByText(text))
+  expect(clicked).toBeCalled()
+})
\ No newline at end of file