test: add tests for events emitted from defineModel (#629)

Co-authored-by: Vasily Kuzin <exer7um@gmail.com>
nuxt · Dec 5, 2023 · 33651af · 33651af
1 parent 1206db7
commit 33651af
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/examples/app-vitest-full/components/WrapperTests.vue b/examples/app-vitest-full/components/WrapperTests.vue
@@ -8,15 +8,24 @@ function testExpose () {
   return 'expose was successful'
 }
 
+const modelValue = defineModel({ default: false })
+
 defineExpose({
   testExpose
 })
 </script>
 
 <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
@@ -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
@@ -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',