improve: proper use of slots for the node default template (#283)

* fix: renderCustomElements is not bullet-proof

* add test case

* test: add unit test. wip

* test: complete unit test case

* improve: simplify function

* refactor: add new unit tests group

* playground/

* fix hydration errors

* fix: module does not work without nuxt-i18n

* tmp

* fix layout

* make test work

* add example data

* remove unused fixture

* do not default to nuxt environment

* fix test

playground/components/global/node--default.vue

@@ -1,23 +1,25 @@
 <template>
-  <div class="node node--default">
-    <h2>Node: {{ title }}</h2>
-    <div
-      v-if="image"
-      v-html="image.content"
-    />
-    <div
-      v-if="body"
-      v-html="body"
-    />
+  <div class="node">
+    <h2 v-if="title">Node: {{ title }}</h2>
+    <slot name="image">
+      <component :is="useDrupalCe().renderCustomElements($attrs.image)" />
+    </slot>
+    <slot name="body">
+      <component :is="useDrupalCe().renderCustomElements($attrs.body)" />
+    </slot>
   </div>
 </template>
 
 <script setup lang="ts">
+defineSlots<{
+  body();
+  image();
+}>()
 defineProps<{
-  title: string
-  type: string
-  created: number | string
-  body?: string[]
-  image?: object
+  title?: string;
+  type?: string;
+  created?: number | string;
+  // Layout-builder support.
+  sections?: object;
 }>()
 </script>

playground/nuxt.config.ts

@@ -7,7 +7,8 @@ export default defineNuxtConfig({
   ],
   compatibilityDate: '2024-12-16',
   drupalCe: {
-    drupalBaseUrl: 'https://8080-drunomics-lupusdecouple-x5qe3h51r0o.ws-eu110.gitpod.io',
+    drupalBaseUrl: 'http://127.0.0.1:3000',
+    ceApiEndpoint: '/api',
   },
   i18n: {
     locales: ['en', 'de'],

playground/server/api/node/5.ts

@@ -0,0 +1,43 @@
+// This file is only there for manual testing and used in actual test cases.
+export default defineEventHandler(() => {
+  return {
+    breadcrumbs: [
+      {
+        frontpage: true,
+        url: '/',
+        label: 'Home'
+      }
+    ],
+    content: {
+      element: 'node-article',
+      created: '1734839102',
+      title: 'Test article',
+      body: '<p>Some <b>example</b> body.</p>',
+      comment: {},
+      image: '  <img loading="lazy" src="https://placehold.co/600x400" width="600" height="400" alt="test" />\n\n\n'
+    },
+    content_format: 'json',
+    local_tasks: {},
+    messages: [],
+    metatags: {
+      meta: [
+        {
+          name: 'title',
+          content: 'tes adfa fdfdsf | Drush Site-Install'
+        },
+        {
+          name: 'description',
+          content: 'asdf asdfasdf'
+        }
+      ],
+      link: [
+        {
+          rel: 'canonical',
+          href: 'https://lupus-nuxt.ddev.site/custom-error'
+        }
+      ]
+    },
+    page_layout: 'default',
+    title: 'tes adfa fdfdsf'
+  }
+})

test/customElements/defaultFallbackRenders.test.ts

@@ -10,7 +10,7 @@ describe('Missing custom element with default fallback', async () => {
   })
   it('fallback is rendered correctly', async () => {
     const html = await $fetch('/node/4')
-    expect(html).toContain('<div class="node node--default"')
+    expect(html).toContain('<div class="node"')
     expect(html).toContain('This node is testing custom elements fallback. node-article-demo --> node--default')
   })
 })

test/unit/components/node--default.test.ts

@@ -0,0 +1,52 @@
+// @vitest-environment nuxt
+import { describe, it, expect } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { defineComponent } from 'vue'
+import { useDrupalCe } from '../../../src/runtime/composables/useDrupalCe'
+import NodeDefault from '../../../playground/components/global/node--default.vue'
+
+describe('node--default custom element', () => {
+  const nodeData = {
+    element: 'node',
+    title: 'Test article',
+    body: '<p>Some <b>example</b> body.</p>',
+    image: '<img loading="lazy" src="https://placehold.co/600x400" width="600" height="400" alt="test" />'
+  }
+
+  const createNodeComponent = (data = nodeData) => defineComponent({
+    components: { 'node': NodeDefault },
+    setup() {
+      const { renderCustomElements } = useDrupalCe()
+      return { component: renderCustomElements(data) }
+    },
+    template: '<component :is="component" />'
+  })
+
+  it('renders node with all attributes', async () => {
+    const wrapper = await mountSuspended(createNodeComponent())
+    expect(wrapper.find('h2').text()).toBe('Node: Test article')
+    expect(wrapper.html()).toContain('Some <b>example</b> body')
+    expect(wrapper.html()).toContain('<img loading="lazy" src="https://placehold.co/600x400"')
+  })
+
+  it('renders node without title', async () => {
+    const wrapper = await mountSuspended(createNodeComponent({
+      ...nodeData,
+      title: undefined
+    }))
+    expect(wrapper.find('h2').exists()).toBe(false)
+    expect(wrapper.html()).toContain('Some <b>example</b> body')
+    expect(wrapper.html()).toContain('<img loading="lazy" src="https://placehold.co/600x400"')
+  })
+
+  it('renders node with only title while body and image are undefined', async () => {
+    const wrapper = await mountSuspended(createNodeComponent({
+      element: 'node',
+      title: 'Just a title'
+    }))
+    expect(wrapper.find('h2').text()).toBe('Node: Just a title')
+    expect(wrapper.find('.node').attributes('element')).toBe('node')
+    expect(wrapper.find('img').exists()).toBe(false)
+    expect(wrapper.find('p').exists()).toBe(false)
+  })
+})

test/unit/renderCustomElements.test.ts

@@ -1,4 +1,3 @@
-// test/customElements/renderCustomElements.test.ts
 // @vitest-environment nuxt
 import { describe, it, expect } from 'vitest'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
@@ -13,7 +12,7 @@ describe('renderCustomElements', () => {
     props: {
       foo: String
     },
-    template: '<div>Test Component: {{ foo || "" }}</div>'
+    template: '<div>Test Component: {{ foo }}</div>'
   })
 
   const AnotherComponent = defineComponent({

vitest.config.ts

@@ -1,7 +1,20 @@
-import { defineVitestConfig
-} from '@nuxt/test-utils/config'
+// vitest.config.ts
+import { fileURLToPath } from 'node:url'
+import { defineVitestConfig } from '@nuxt/test-utils/config'
 
-export default defineVitestConfig
-({
-  // any custom Vitest config if needed
+export default defineVitestConfig({
+  test: {
+    environmentOptions: {
+      nuxt: {
+        rootDir: fileURLToPath(new URL('.', import.meta.url)),
+        overrides: {
+          modules: ['./dist/module.mjs'],
+          drupalCe: {
+            drupalBaseUrl: 'http://127.0.0.1:3001',
+            ceApiEndpoint: '/api',
+          }
+        }
+      }
+    }
+  }
 })