Merge pull request #90 from vuejs/feat/document-attrs-fallback

feat: Explain how to replace attrs with props

Author: lmiller1990

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.

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')
 })