arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(Badge): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-09 19:58:35 +01:00
parent 4b75ec265b
commit 2f631845c3
3 changed files with 46 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
test/components/Badge.spec.ts Normal file
View File

@@ -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()
})
})

23
test/components/__snapshots__/Badge.spec.ts.snap Normal file
View File

@@ -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>"`;