From e02fcea726e73f31708d76d3a347fbf6ee6e3baf Mon Sep 17 00:00:00 2001
From: dobromir-hristov <dobromir92@gmail.com>
Date: Sat, 25 Apr 2020 11:00:24 +0300
Subject: [PATCH] feat: explain how to replace attrs

---
 README.md                           |  2 +-
 tests/mountingOptions/props.spec.ts | 67 ++++++++++++++++++++++-------
 2 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index d8a5aca75..68a52bdbf 100644
--- a/README.md
+++ b/README.md
@@ -62,7 +62,7 @@ component | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-u
 directives | ✅ | (new!) nested in [`global`](https://vuejs.github.io/vue-test-utils-next-docs/api/#global)
 stubs | ✅ 
 attachToDocument |✅| renamed `attachTo`. See [here](https://github.com/vuejs/vue-test-utils/pull/1492)
-attrs | ❌ |
+attrs | ⚰️ | use `props` instead, it assigns both attributes and props. 
 scopedSlots | ⚰️ | scopedSlots are merged with slots in Vue 3
 context | ⚰️ | different from Vue 2, does not make sense anymore.
 localVue | ⚰️ | may not make sense anymore since we do not mutate the global Vue instance in Vue 3.
diff --git a/tests/mountingOptions/props.spec.ts b/tests/mountingOptions/props.spec.ts
index 90dd13277..e743aedd7 100644
--- a/tests/mountingOptions/props.spec.ts
+++ b/tests/mountingOptions/props.spec.ts
@@ -1,25 +1,62 @@
 import { defineComponent, h } from 'vue'
-
+import WithProps from '../components/WithProps.vue'
 import { mount } from '../../src'
 
-test('mounting options - passes props', () => {
-  const Component = defineComponent({
-    props: {
-      message: {
-        type: String,
-        required: true
+describe('mountingOptions.props', () => {
+  test('passes props', () => {
+    const Component = defineComponent({
+      props: {
+        message: {
+          type: String,
+          required: true
+        }
+      },
+
+      render() {
+        return h('div', {}, `Message is ${this.message}`)
       }
-    },
+    })
 
-    render() {
-      return h('div', {}, `Message is ${this.message}`)
-    }
+    const wrapper = mount(Component, {
+      props: {
+        message: 'Hello'
+      }
+    })
+    expect(wrapper.text()).toBe('Message is Hello')
+  })
+
+  test('assigns extra attributes on components', () => {
+    const wrapper = mount(WithProps, {
+      props: {
+        class: 'HelloFromTheOtherSide',
+        id: 'hello',
+        disabled: true,
+        msg: 'Hello World'
+      }
+    })
+
+    expect(wrapper.attributes()).toEqual({
+      class: 'HelloFromTheOtherSide',
+      disabled: 'true',
+      id: 'hello'
+    })
+
+    expect(wrapper.props()).toEqual({
+      msg: 'Hello World'
+    })
   })
 
-  const wrapper = mount(Component, {
-    props: {
-      message: 'Hello'
+  test('assigns event listeners', async () => {
+    const Component = {
+      template: '<button @click="$emit(\'customEvent\', true)">Click</button>'
     }
+    const onCustomEvent = jest.fn()
+    const wrapper = mount(Component, { props: { onCustomEvent } })
+    const button = wrapper.find('button')
+    await button.trigger('click')
+    await button.trigger('click')
+    await button.trigger('click')
+
+    expect(onCustomEvent).toHaveBeenCalledTimes(3)
   })
-  expect(wrapper.text()).toBe('Message is Hello')
 })