From 9b7df4f557ee5e7c290d1c398a6c7961935c359a Mon Sep 17 00:00:00 2001
From: Wolfgang Ziegler // fago <fago@wolfgangziegler.net>
Date: Sun, 29 Dec 2024 22:05:42 -0600
Subject: [PATCH] refactor: #281: convert component default handling test
 coverage to unit tests

---
 .../renderCustomElements-defaults.test.ts     | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 test/unit/renderCustomElements-defaults.test.ts

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