Merge pull request #25 from afontcu/master

Make button test use event emitters

Author: dfcook

tests/__tests__/components/Button.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     :class="typeClass"
-    @click="clicked"
+    @click="handleClick"
   >{{ text }}</button>
 </template>
 
@@ -12,10 +12,6 @@ export default {
       type: String,
       default: ''
     },
-    clicked: {
-      type: Function,
-      default: () => true
-    },
     type: {
       validator: (value) => ['primary', 'secondary'].includes(value),
       default: 'primary'
@@ -28,6 +24,11 @@ export default {
       }
       return 'button'
     }
+  },
+  methods: {
+    handleClick (e) {
+      this.$emit('click')
+    }
   }
 }
 </script>

tests/__tests__/router/programmatic-routing/components/Home.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div>You are home</div>
-    <button data-testid="go-to-about" @click="goToAbout">About</button>
+    <button
+      data-testid="go-to-about"
+      @click="goToAbout">About</button>
   </div>
 </template>
 
@@ -14,4 +16,3 @@ export default {
   }
 }
 </script>
-

tests/__tests__/simple-button.js

@@ -6,18 +6,17 @@ afterEach(cleanup)
 test('renders button with text', () => {
   const buttonText = "Click me; I'm sick"
   const { getByText } = render(SimpleButton, {
-    props: { text: buttonText, clicked: () => true }
+    props: { text: buttonText }
   })
 
   getByText(buttonText)
 })
 
-test('clicked prop is called when button is clicked', () => {
-  const clicked = jest.fn()
+test('click event is emitted when button is clicked', () => {
   const text = 'Click me'
-  const { getByText } = render(SimpleButton, {
-    props: { text, clicked }
+  const { getByText, emitted } = render(SimpleButton, {
+    props: { text }
   })
   fireEvent.click(getByText(text))
-  expect(clicked).toBeCalled()
+  expect(emitted().click).toHaveLength(1)
 })