From b6ed1c59ffe8c8aaac78a34d8559ca793bb92eaa Mon Sep 17 00:00:00 2001
From: Nestor Vera <nestorvera@me.com>
Date: Wed, 30 Oct 2024 12:42:56 +0100
Subject: [PATCH] fix(RadioGroup): rendering empty slots (#2456)

---
 src/runtime/components/forms/RadioGroup.vue   |  4 +--
 test/components/elements/RadioGroup.spec.ts   | 15 +++++++++
 .../__snapshots__/RadioGroup.spec.ts.snap     | 33 +++++++++++++++++++
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 test/components/elements/RadioGroup.spec.ts
 create mode 100644 test/components/elements/__snapshots__/RadioGroup.spec.ts.snap

diff --git a/src/runtime/components/forms/RadioGroup.vue b/src/runtime/components/forms/RadioGroup.vue
index ba8dc626..2689fd57 100644
--- a/src/runtime/components/forms/RadioGroup.vue
+++ b/src/runtime/components/forms/RadioGroup.vue
@@ -17,11 +17,11 @@
         :ui="uiRadio"
         @change="onUpdate(option.value)"
       >
-        <template #label>
+        <template v-if="$slots.label" #label>
           <slot name="label" v-bind="{ option, selected: option.selected }" />
         </template>
 
-        <template #help>
+        <template v-if="$slots.help" #help>
           <slot name="help" v-bind="{ option, selected: option.selected }" />
         </template>
       </URadio>
diff --git a/test/components/elements/RadioGroup.spec.ts b/test/components/elements/RadioGroup.spec.ts
new file mode 100644
index 00000000..31eba239
--- /dev/null
+++ b/test/components/elements/RadioGroup.spec.ts
@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest'
+import type { TypeOf } from 'zod'
+import ComponentRender from '../component-render'
+import { URadioGroup } from '#components'
+
+describe('RadioGroup', () => {
+  it.each([
+    ['basic case', { props: { options: [{ value: 'value', label: 'label' }] } }],
+    ['help text', { props: { options: [{ value: 'value', label: 'label', help: 'i need somebody' }] } }]
+    // @ts-ignore
+  ])('renders %s correctly', async (nameOrHtml: string, options: TypeOf<typeof URadioGroup.props>) => {
+    const html = await ComponentRender(nameOrHtml, options, URadioGroup)
+    expect(html).toMatchSnapshot()
+  })
+})
diff --git a/test/components/elements/__snapshots__/RadioGroup.spec.ts.snap b/test/components/elements/__snapshots__/RadioGroup.spec.ts.snap
new file mode 100644
index 00000000..75c09f25
--- /dev/null
+++ b/test/components/elements/__snapshots__/RadioGroup.spec.ts.snap
@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RadioGroup > renders basic case correctly 1`] = `
+"<div class="">
+  <fieldset>
+    <!--v-if-->
+    <div class="relative flex items-start">
+      <div class="flex items-center h-5"><input id="v-0-0-0" type="radio" class="h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent form-radio bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 text-primary-500 dark:text-primary-400" value="value"></div>
+      <div class="ms-3 flex flex-col"><label for="v-0-0-0" class="text-sm font-medium text-gray-700 dark:text-gray-200">label
+          <!--v-if-->
+        </label>
+        <!--v-if-->
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;
+
+exports[`RadioGroup > renders help text correctly 1`] = `
+"<div class="">
+  <fieldset>
+    <!--v-if-->
+    <div class="relative flex items-start">
+      <div class="flex items-center h-5"><input id="v-0-0-0" type="radio" class="h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent form-radio bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 text-primary-500 dark:text-primary-400" value="value"></div>
+      <div class="ms-3 flex flex-col"><label for="v-0-0-0" class="text-sm font-medium text-gray-700 dark:text-gray-200">label
+          <!--v-if-->
+        </label>
+        <p class="text-sm text-gray-500 dark:text-gray-400">i need somebody</p>
+      </div>
+    </div>
+  </fieldset>
+</div>"
+`;