Merge pull request #11 from tim-maguire/add_container

Wraps rendered component in a div

Author: dfcook

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)

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>

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()
+})