From 2f631845c32f3bf2b786c58feec80743eafdcd1c Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 9 Mar 2024 19:58:35 +0100
Subject: [PATCH] chore(Badge): update

---
 src/runtime/components/Badge.vue              |  4 +---
 test/components/Badge.spec.ts                 | 22 ++++++++++++++++++
 .../__snapshots__/Badge.spec.ts.snap          | 23 +++++++++++++++++++
 3 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 test/components/Badge.spec.ts
 create mode 100644 test/components/__snapshots__/Badge.spec.ts.snap

diff --git a/src/runtime/components/Badge.vue b/src/runtime/components/Badge.vue
index e99bad04..416bf4fb 100644
--- a/src/runtime/components/Badge.vue
+++ b/src/runtime/components/Badge.vue
@@ -23,8 +23,6 @@ export interface BadgeSlots {
 </script>
 
 <script setup lang="ts">
-defineOptions({ inheritAttrs: false })
-
 const props = withDefaults(defineProps<BadgeProps>(), {
   as: 'span'
 })
@@ -32,7 +30,7 @@ defineSlots<BadgeSlots>()
 </script>
 
 <template>
-  <component :is="as" v-bind="$attrs" :class="badge({ color, variant, size, class: props.class })">
+  <component :is="as" :class="badge({ color, variant, size, class: props.class })">
     <slot>
       {{ label }}
     </slot>
diff --git a/test/components/Badge.spec.ts b/test/components/Badge.spec.ts
new file mode 100644
index 00000000..5de537ca
--- /dev/null
+++ b/test/components/Badge.spec.ts
@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import Badge, { type BadgeProps } from '../../src/runtime/components/Badge.vue'
+import ComponentRender from '../component-render'
+
+describe('Badge', () => {
+  it.each([
+    ['with label', { props: { label: 'Badge' } }],
+    ['with class', { props: { class: 'rounded-full font-bold' } }],
+    ['with size', { props: { label: 'Badge', size: 'lg' as const } }],
+    ['with color green', { props: { label: 'Badge', color: 'green' as const } }],
+    ['with color white', { props: { label: 'Badge', color: 'white' as const } }],
+    ['with color gray', { props: { label: 'Badge', color: 'gray' as const } }],
+    ['with color black', { props: { label: 'Badge', color: 'black' as const } }],
+    ['with variant outline', { props: { label: 'Badge', variant: 'outline' as const } }],
+    ['with variant soft', { props: { label: 'Badge', variant: 'soft' as const } }],
+    ['with variant link', { props: { label: 'Badge', variant: 'subtle' as const } }],
+    ['with default slot', { slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: BadgeProps, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, Badge)
+    expect(html).toMatchSnapshot()
+  })
+})
diff --git a/test/components/__snapshots__/Badge.spec.ts.snap b/test/components/__snapshots__/Badge.spec.ts.snap
new file mode 100644
index 00000000..9540c5a1
--- /dev/null
+++ b/test/components/__snapshots__/Badge.spec.ts.snap
@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Badge > renders with class correctly 1`] = `"<span class="inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900 rounded-full font-bold"></span>"`;
+
+exports[`Badge > renders with color black correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-white dark:text-gray-900 bg-gray-900 dark:bg-white">Badge</span>"`;
+
+exports[`Badge > renders with color gray correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800">Badge</span>"`;
+
+exports[`Badge > renders with color green correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-green-500 dark:bg-green-400 text-white dark:text-gray-900">Badge</span>"`;
+
+exports[`Badge > renders with color white correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">Badge</span>"`;
+
+exports[`Badge > renders with default slot correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Default slot</span>"`;
+
+exports[`Badge > renders with label correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
+
+exports[`Badge > renders with size correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-sm px-2.5 py-1.5 bg-primary-500 dark:bg-primary-400 text-white dark:text-gray-900">Badge</span>"`;
+
+exports[`Badge > renders with variant link correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400 ring-1 ring-inset ring-primary-500/25 dark:ring-primary-400/25">Badge</span>"`;
+
+exports[`Badge > renders with variant outline correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 text-primary-500 dark:text-primary-400 ring-1 ring-inset ring-primary-500 dark:ring-primary-400">Badge</span>"`;
+
+exports[`Badge > renders with variant soft correctly 1`] = `"<span class="rounded-md font-medium inline-flex items-center text-xs px-2 py-1 bg-primary-50 dark:bg-primary-400/10 text-primary-500 dark:text-primary-400">Badge</span>"`;