improve: LDP-2575: Improve default fallback code and tests

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="node">
+  <div class="node node--default">
     <h2>Node: {{ title }}</h2>
     <div
       v-if="image"

src/runtime/composables/useDrupalCe/index.ts

@@ -239,20 +239,15 @@ export const useDrupalCe = () => {
     }
 
     // Progressively remove segments from the custom element name to find a matching default component.
-    const regex = /-[a-z]+$/
+    const regex = /-?[a-z]+$/
     let componentName = element
-    while (regex.test(componentName)) {
-      componentName = componentName.replace(regex, '')
+    while (componentName) {
+      // Try resolving by adding 'Default' suffix.
       const fallbackComponent = nuxtApp.vueApp.component(formatName(componentName) + 'Default')
       if (typeof fallbackComponent === 'object' && fallbackComponent.name) {
         return fallbackComponent
       }
-    }
-
-    // Try resolving by adding 'Default' suffix.
-    const defaultComponent = nuxtApp.vueApp.component(formatName(element) + 'Default')
-    if (typeof defaultComponent === 'object' && defaultComponent.name) {
-      return defaultComponent
+      componentName = componentName.replace(regex, '')
     }
 
     // If not found, try with resolveComponent. This provides a warning if the component is not found.

test/customElements.test.ts → test/customElements/defaultFallbackRenders.test.ts

@@ -2,14 +2,15 @@ import { fileURLToPath } from 'node:url'
 import { describe, it, expect } from 'vitest'
 import { setup, $fetch } from '@nuxt/test-utils'
 
-describe('Custom elements fallback works', async () => {
+describe('Missing custom element with default fallback', async () => {
   await setup({
-    rootDir: fileURLToPath(new URL('../playground', import.meta.url)),
+    rootDir: fileURLToPath(new URL('../../playground', import.meta.url)),
     configFile: 'nuxt.config4test',
     port: 3001,
   })
-  it('missing node element is rendered as node--default', async () => {
+  it('fallback is rendered correctly', async () => {
     const html = await $fetch('/node/4')
+    expect(html).toContain('<div class="node node--default"')
     expect(html).toContain('This node is testing custom elements fallback. node-article-demo --> node--default')
   })
 })

test/customElements/nonDefaultRenders.test.ts

@@ -0,0 +1,25 @@
+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')
+  })
+})

test/fixtures/debug/components/global/node-article-demo.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="node node-article-demo">
+    <h2>Article demo</h2>
+  </div>
+</template>

test/fixtures/debug/pages/node/4.vue

@@ -0,0 +1,8 @@
+<template>
+  <component :is="renderCustomElements(page.content)" />
+</template>
+
+<script lang="ts" setup>
+const { fetchPage, renderCustomElements } = useDrupalCe()
+const page = await fetchPage(useRoute().path, { query: useRoute().query })
+</script>

test/fixtures/debug/server/api/node/4.ts

@@ -0,0 +1,2 @@
+export default defineEventHandler(() => ({ title: 'Node 4', messages: [], breadcrumbs: [], metatags: { meta: [{ name: 'title', content: 'Node 4 | lupus decoupled' }, { name: 'description', content: 'This node is testing custom elements fallback. node-article-demo --> node--default.' }], link: [{ rel: 'canonical', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu84.gitpod.io\/node\/4' }, { rel: 'alternate', hreflang: 'de', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu84.gitpod.io\/de\/node\/4' }, { rel: 'alternate', hreflang: 'en', href: 'https:\/\/8080-drunomics-lupusdecouple-fd0ilwlpax7.ws-eu84.gitpod.io\/node\/4' }] }, content_format: 'json', content: { element: 'node-article-demo', type: 'page', uid: '1', title: 'Node 4', created: '1674823558', body: ['\u003Cp\u003EThis node is testing custom elements fallback. node-article-demo --> node--default.\u003C\/p\u003E'] }, page_layout: 'default', local_tasks: [],
+}))