mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 07:50:36 +01:00
Benjamin Canac
29
test/components/Alert.spec.ts
Normal file
29
test/components/Alert.spec.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import Alert, { type AlertProps } from '../../src/runtime/components/Alert.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
|
||||
describe('Alert', () => {
|
||||
it.each([
|
||||
['with title', { props: { title: 'Title' } }],
|
||||
['with description', { props: { title: 'Title', description: 'Description' } }],
|
||||
['with icon', { props: { title: 'Title', icon: 'i-heroicons-light-bulb' } }],
|
||||
['with avatar', { props: { title: 'Title', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } } }],
|
||||
['with as', { props: { title: 'Title', as: 'article' } }],
|
||||
['with color green', { props: { title: 'Title', color: 'green' as const } }],
|
||||
['with color white', { props: { title: 'Title', color: 'white' as const } }],
|
||||
['with color gray', { props: { title: 'Title', color: 'gray' as const } }],
|
||||
['with color black', { props: { title: 'Title', color: 'black' as const } }],
|
||||
['with variant outline', { props: { title: 'Title', variant: 'outline' as const } }],
|
||||
['with variant soft', { props: { title: 'Title', variant: 'soft' as const } }],
|
||||
['with variant link', { props: { title: 'Title', variant: 'subtle' as const } }],
|
||||
['with class', { props: { class: 'w-48' } }],
|
||||
['with ui', { props: { ui: { title: 'font-bold' } } }],
|
||||
['with leading slot', { slots: { title: () => 'Leading slot' } }],
|
||||
['with title slot', { slots: { title: () => 'Title slot' } }],
|
||||
['with description slot', { slots: { description: () => 'Description slot' } }],
|
||||
['with close slot', { slots: { close: () => 'Close slot' } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: AlertProps, slots?: any }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, Alert)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
217
test/components/__snapshots__/Alert.spec.ts.snap
Normal file
217
test/components/__snapshots__/Alert.spec.ts.snap
Normal file
@@ -0,0 +1,217 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Alert > renders with as correctly 1`] = `
|
||||
"<article class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</article>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with avatar correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with class correctly 1`] = `
|
||||
"<div class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900 w-48">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with close slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with color black correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center text-white dark:text-gray-900 bg-gray-900 dark:bg-white">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with color gray correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with color green correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-green-500 dark:bg-green-400 text-white dark:text-gray-900">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with color white correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with description correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<div class="text-sm">Description</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with description slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm">Description slot</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with icon correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"></path>
|
||||
</svg>
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with leading slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Leading slot</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with title correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with title slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title slot</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with ui correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with variant link correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with variant outline correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with variant soft correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium">Title</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
Reference in New Issue
Block a user