fix: correct slot usage of drupal-markup and drupal-form components (#…

…285)

* fix: drupal-markup component

* fix drupal-form component

playground/components/global/drupal-form--default.vue

@@ -6,7 +6,9 @@
     :action="useRoute().fullPath"
     class="drupal-form"
   >
-    <slot><div v-html="content" /></slot>
+    <slot>
+      <component :is="useDrupalCe().renderCustomElements($attrs.content)" />
+    </slot>
   </form>
 </template>
 
@@ -15,6 +17,8 @@ defineProps<{
   formId: string
   attributes: object
   method: string
-  content?: string
+}>()
+defineSlots<{
+  default();
 }>()
 </script>

playground/components/global/drupal-markup.vue

@@ -1,9 +1,13 @@
 <template>
-  <div v-html="content" />
+  <div>
+    <slot>
+      <component :is="useDrupalCe().renderCustomElements($attrs.content)" />
+    </slot>
+  </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  content: string
+defineSlots<{
+  default();
 }>()
 </script>

test/unit/components/drupal-form--default.test.ts

@@ -0,0 +1,37 @@
+// @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 DrupalFormDefault from '../../../playground/components/global/drupal-form--default.vue'
+
+describe('drupal-form--default custom element', () => {
+  const formData = {
+    element: 'drupal-form',
+    formId: 'user_login_form',
+    attributes: {
+      class: ['user-login-form'],
+      dataDrupalSelector: 'user-login-form'
+    },
+    method: 'post',
+    content: '<div>Some form content html.</div>'
+  }
+
+  const createFormComponent = (data = formData) => defineComponent({
+    components: { 'drupal-form': DrupalFormDefault },
+    setup() {
+      const { renderCustomElements } = useDrupalCe()
+      return { component: renderCustomElements(data) }
+    },
+    template: '<component :is="component" />'
+  })
+
+  it('renders form correctly', async () => {
+    const wrapper = await mountSuspended(createFormComponent())
+    expect(wrapper.find('form').attributes('formid')).toBe('user_login_form')
+    expect(wrapper.find('form').attributes('method')).toBe('post')
+    expect(wrapper.find('form').classes()).toContain('user-login-form')
+    expect(wrapper.find('form').attributes('datadrupalselector')).toBe('user-login-form')
+    expect(wrapper.html()).toContain('<div>Some form content html.</div>')
+  })
+})

test/unit/components/drupal-markup.test.ts

@@ -0,0 +1,37 @@
+// test/unit/components/drupal-markup.test.ts
+// @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 DrupalMarkup from '../../../playground/components/global/drupal-markup.vue'
+
+describe('drupal-markup custom element', () => {
+  const markupData = {
+    element: 'drupal-markup',
+    content: '<p>Some <b>formatted</b> content.</p>'
+  }
+
+  const createMarkupComponent = (data = markupData) => defineComponent({
+    components: { 'drupal-markup': DrupalMarkup },
+    setup() {
+      const { renderCustomElements } = useDrupalCe()
+      return { component: renderCustomElements(data) }
+    },
+    template: '<component :is="component" />'
+  })
+
+  it('renders markup content via custom element json', async () => {
+    const wrapper = await mountSuspended(createMarkupComponent())
+    expect(wrapper.html()).toContain('<p>Some <b>formatted</b> content.</p>')
+  })
+
+  it('renders markup content via custom element markup ', async () => {
+    const TestComponent = defineComponent({
+      components: { 'drupal-markup': DrupalMarkup },
+      template: '<drupal-markup><p>Slotted <b>content</b></p></drupal-markup>'
+    })
+    const wrapper = await mountSuspended(TestComponent)
+    expect(wrapper.html()).toContain('<p>Slotted <b>content</b></p>')
+  })
+})