From 33651af183a96365c17a12b5d3922996a6cc1a30 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Tue, 5 Dec 2023 15:47:14 +0000
Subject: [PATCH] test: add tests for events emitted from `defineModel` (#629)

Co-authored-by: Vasily Kuzin <exer7um@gmail.com>
---
 .../components/WrapperTests.vue                | 11 ++++++++++-
 examples/app-vitest-full/nuxt.config.ts        |  7 +++++++
 .../app-vitest-full/tests/nuxt/index.spec.ts   | 18 +++++++++++++++++-
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/examples/app-vitest-full/components/WrapperTests.vue b/examples/app-vitest-full/components/WrapperTests.vue
index bcb2a08cb..54f6ea15f 100644
--- a/examples/app-vitest-full/components/WrapperTests.vue
+++ b/examples/app-vitest-full/components/WrapperTests.vue
@@ -8,6 +8,8 @@ function testExpose () {
   return 'expose was successful'
 }
 
+const modelValue = defineModel({ default: false })
+
 defineExpose({
   testExpose
 })
@@ -15,8 +17,15 @@ defineExpose({
 
 <template>
   <div>
-    <button @click="emit('customEvent', 'foo'); $emit('otherEvent')">
+    <button
+      id="emitCustomEvent"
+      @click="emit('customEvent', 'foo'); $emit('otherEvent')"
+    >
       Click me!
     </button>
+    <button
+      id="changeModelValue"
+      @click="modelValue = true"
+    />
   </div>
 </template>
diff --git a/examples/app-vitest-full/nuxt.config.ts b/examples/app-vitest-full/nuxt.config.ts
index d3b9d4ee1..3999404d0 100644
--- a/examples/app-vitest-full/nuxt.config.ts
+++ b/examples/app-vitest-full/nuxt.config.ts
@@ -2,6 +2,13 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ['@nuxt/test-utils/module', '~/modules/custom'],
+  vite: {
+    vue: {
+      script: {
+        defineModel: true,
+      },
+    },
+  },
   vitest: {
     startOnBoot: true,
     logToConsole: true,
diff --git a/examples/app-vitest-full/tests/nuxt/index.spec.ts b/examples/app-vitest-full/tests/nuxt/index.spec.ts
index 46acb463c..88e8ed412 100644
--- a/examples/app-vitest-full/tests/nuxt/index.spec.ts
+++ b/examples/app-vitest-full/tests/nuxt/index.spec.ts
@@ -10,6 +10,8 @@ import FetchComponent from '~/components/FetchComponent.vue'
 import OptionsComponent from '~/components/OptionsComponent.vue'
 import WrapperTests from '~/components/WrapperTests.vue'
 
+import { mount } from '@vue/test-utils'
+
 describe('client-side nuxt features', () => {
   it('can use core nuxt composables within test file', () => {
     expect(useAppConfig().hey).toMatchInlineSnapshot('false')
@@ -100,7 +102,7 @@ describe('test utils', () => {
 
   it('can receive emitted events from components mounted within nuxt suspense', async () => {
     const component = await mountSuspended(WrapperTests)
-    component.find('button').trigger('click')
+    component.find('button#emitCustomEvent').trigger('click')
     expect(component.emitted()).toMatchInlineSnapshot(`
       {
         "customEvent": [
@@ -128,6 +130,20 @@ describe('test utils', () => {
     await server.close()
   })
 
+  // This test works (you can delete it later)
+  it('can receive emitted events from components using defineModel', () => {
+    const component = mount(WrapperTests)
+    component.find('button#changeModelValue').trigger('click')
+    expect(component.emitted()).toHaveProperty('update:modelValue')
+  })
+
+  // TODO: fix this failing test
+  it.todo('can receive emitted events from components mounted within nuxt suspense using defineModel', async () => {
+    const component = await mountSuspended(WrapperTests)
+    component.find('button#changeModelValue').trigger('click')
+    expect(component.emitted()).toHaveProperty('update:modelValue')
+  })
+
   it('can mock fetch requests', async () => {
     registerEndpoint('https://jsonplaceholder.typicode.com/todos/1', () => ({
       title: 'title from mocked api',