From 1dfe898bd1bc919b197e56086261262fa24d4363 Mon Sep 17 00:00:00 2001
From: Wolfgang Ziegler <fago@users.noreply.github.com>
Date: Sun, 29 Dec 2024 22:08:39 -0600
Subject: [PATCH] refactor: #281: convert component default handling test
 coverage to unit tests (#286)

* refactor: #281: convert component default handling test coverage to unit tests

* remove old ones
---
 .../defaultFallbackRenders.test.ts            | 16 -----
 test/customElements/nonDefaultRenders.test.ts | 25 -------
 .../renderCustomElements-defaults.test.ts     | 68 +++++++++++++++++++
 3 files changed, 68 insertions(+), 41 deletions(-)
 delete mode 100644 test/customElements/defaultFallbackRenders.test.ts
 delete mode 100644 test/customElements/nonDefaultRenders.test.ts
 create mode 100644 test/unit/renderCustomElements-defaults.test.ts

diff --git a/test/customElements/defaultFallbackRenders.test.ts b/test/customElements/defaultFallbackRenders.test.ts
deleted file mode 100644
index f2da2d7..0000000
--- a/test/customElements/defaultFallbackRenders.test.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { describe, it, expect } from 'vitest'
-import { setup, $fetch } from '@nuxt/test-utils'
-
-describe('Missing custom element with default fallback', async () => {
-  await setup({
-    rootDir: fileURLToPath(new URL('../../playground', import.meta.url)),
-    configFile: 'nuxt.config4test',
-    port: 3001,
-  })
-  it('fallback is rendered correctly', async () => {
-    const html = await $fetch('/node/4')
-    expect(html).toContain('<div class="node"')
-    expect(html).toContain('This node is testing custom elements fallback. node-article-demo --> node--default')
-  })
-})
diff --git a/test/customElements/nonDefaultRenders.test.ts b/test/customElements/nonDefaultRenders.test.ts
deleted file mode 100644
index 459616c..0000000
--- a/test/customElements/nonDefaultRenders.test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { describe, it, expect } from 'vitest'
-import { setup, $fetch } from '@nuxt/test-utils'
-import DrupalCe from '../..'
-
-describe('Non-default custom element', async () => {
-  await setup({
-    rootDir: fileURLToPath(new URL('../fixtures/debug', import.meta.url)),
-    nuxtConfig: {
-      modules: [
-        DrupalCe,
-      ],
-      drupalCe: {
-        drupalBaseUrl: 'http://127.0.0.1:3103',
-        ceApiEndpoint: '/api',
-      },
-    },
-    port: 3103,
-  })
-  it('non-default custom element is rendered correctly', async () => {
-    const html = await $fetch('/node/4')
-    expect(html).toContain('<div class="node node-article-demo"')
-    expect(html).toContain('Article demo')
-  })
-})
diff --git a/test/unit/renderCustomElements-defaults.test.ts b/test/unit/renderCustomElements-defaults.test.ts
new file mode 100644
index 0000000..376aaf4
--- /dev/null
+++ b/test/unit/renderCustomElements-defaults.test.ts
@@ -0,0 +1,68 @@
+// @vitest-environment nuxt
+import { describe, it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { defineComponent, useNuxtApp } from '#imports'
+import { useDrupalCe } from '../../src/runtime/composables/useDrupalCe'
+
+describe('Custom Element Fallback Tests', () => {
+  const NodeArticleDemo = defineComponent({
+    name: 'NodeArticleDemo',
+    props: { content: String },
+    template: `<div class="node node-article-demo"><h2>Article Demo Component</h2>{{ content }}</div>`
+  })
+
+  const NodeArticleDefault = defineComponent({
+    name: 'NodeArticleDefault',
+    props: { content: String },
+    template: `<div class="node node-article"><h2>Article Default Component</h2>{{ content }}</div>`
+  })
+
+  const NodeDefault = defineComponent({
+    name: 'NodeDefault',
+    props: { content: String },
+    template: `<div class="node"><h2>Node Default Component</h2>{{ content }}</div>`
+  })
+
+  const app = useNuxtApp()
+  app.vueApp.component('NodeArticleDemo', NodeArticleDemo)
+  app.vueApp.component('NodeArticleDefault', NodeArticleDefault)
+  app.vueApp.component('NodeDefault', NodeDefault)
+
+  const createTestComponent = (elementData) => defineComponent({
+    setup() {
+      const { renderCustomElements } = useDrupalCe()
+      return { component: renderCustomElements(elementData) }
+    },
+    template: '<component :is="component" />'
+  })
+
+  it('renders specific component when available', async () => {
+    const elementData = {
+      element: 'node-article-demo',
+      content: 'Article demo'
+    }
+    const wrapper = await mountSuspended(createTestComponent(elementData))
+    expect(wrapper.html()).toContain('Article demo')
+    expect(wrapper.findComponent(NodeArticleDemo).exists()).toBe(true)
+  })
+
+  it('falls back to node-article--default when specific component not found', async () => {
+    const elementData = {
+      element: 'node-article-custom',
+      content: 'Testing intermediate fallback'
+    }
+    const wrapper = await mountSuspended(createTestComponent(elementData))
+    expect(wrapper.html()).toContain('Testing intermediate fallback')
+    expect(wrapper.findComponent(NodeArticleDefault).exists()).toBe(true)
+  })
+
+  it('falls back to node--default when no intermediate default found', async () => {
+    const elementData = {
+      element: 'node-special-custom',
+      content: 'Testing final fallback'
+    }
+    const wrapper = await mountSuspended(createTestComponent(elementData))
+    expect(wrapper.html()).toContain('Testing final fallback')
+    expect(wrapper.findComponent(NodeDefault).exists()).toBe(true)
+  })
+})