mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
test(Toast): update
This commit is contained in:
Benjamin Canac
@@ -1,23 +1,34 @@
|
||||
import { defineComponent } from 'vue'
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import App from '../../src/runtime/components/App.vue'
|
||||
import Toaster from '../../src/runtime/components/Toaster.vue'
|
||||
import Toast, { type ToastProps } from '../../src/runtime/components/Toast.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
import { ClientOnly } from '#components'
|
||||
|
||||
const ToastWrapper = defineComponent({
|
||||
components: {
|
||||
UApp: App,
|
||||
UToast: Toast
|
||||
UToaster: Toaster,
|
||||
UToast: Toast,
|
||||
ClientOnly
|
||||
},
|
||||
inheritAttrs: false,
|
||||
template: '<UApp><UToast v-bind="$attrs" /></UApp>'
|
||||
template: '<UToaster><ClientOnly><UToast v-bind="$attrs" /></ClientOnly></UToaster>'
|
||||
})
|
||||
|
||||
describe('Toast', () => {
|
||||
it.each([
|
||||
['basic case', {}],
|
||||
['with class', { props: { class: '' } }],
|
||||
['with ui', { props: { ui: {} } }]
|
||||
['with title', { props: { title: 'Toast' } }],
|
||||
['with description', { props: { description: 'This is a toast' } }],
|
||||
['with title & description', { props: { title: 'Toast', description: 'This is a toast' } }],
|
||||
['with icon', { props: { icon: 'i-heroicons-rocket-launch', title: 'Toast' } }],
|
||||
['with avatar', { props: { avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }, title: 'Toast' } }],
|
||||
['with color', { props: { color: 'green' as const, title: 'Toast' } }],
|
||||
['with actions', { props: { title: 'Toast', actions: [{ label: 'Action' }] } }],
|
||||
['with description actions', { props: { title: 'Toast', description: 'This is a toast', actions: [{ label: 'Action' }] } }],
|
||||
['without close', { props: { title: 'Toast', close: null } }],
|
||||
['with type', { props: { type: 'background' as const } }],
|
||||
['with class', { props: { class: 'bg-gray-50 dark:bg-gray-800/50' } }],
|
||||
['with ui', { props: { title: 'Toast', ui: { title: 'font-bold' } } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: ToastProps, slots?: any }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, ToastWrapper)
|
||||
expect(html).toMatchSnapshot()
|
||||
|
||||
306
test/components/__snapshots__/Toast.spec.ts.snap
Normal file
306
test/components/__snapshots__/Toast.spec.ts.snap
Normal file
@@ -0,0 +1,306 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Toast > renders with actions correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-radix-toast-announce-exclude="" data-radix-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-xs gap-x-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
|
||||
<!--v-if--><span class="">Action</span>
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-primary-500 dark:border-primary-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with avatar correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right"><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="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-primary-500 dark:border-primary-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with class correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center bg-gray-50 dark:bg-gray-800/50" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-primary-500 dark:border-primary-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with color correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-green-500 dark:border-green-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with description actions correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">This is a toast</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-start mt-1"><button type="button" data-radix-toast-announce-exclude="" data-radix-toast-announce-alt="Action" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-xs gap-x-1.5 shadow-sm ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400">
|
||||
<!--v-if--><span class="">Action</span>
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-primary-500 dark:border-primary-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with description correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">This is a toast</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-primary-500 dark:border-primary-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with icon correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!---->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-primary-500 dark:border-primary-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with title & description correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">This is a toast</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-primary-500 dark:border-primary-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with title correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-primary-500 dark:border-primary-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with type correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-primary-500 dark:border-primary-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with ui correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm text-gray-900 dark:text-white font-bold">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-radix-toast-announce-exclude="" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 text-sm gap-x-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 p-1">
|
||||
<!---->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-primary-500 dark:border-primary-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders without close correctly 1`] = `
|
||||
"<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[--height] right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: -16px;">
|
||||
<li role="status" aria-live="off" aria-atomic="" tabindex="0" data-radix-vue-collection-item="" class="relative overflow-hidden bg-white dark:bg-gray-900 shadow-lg rounded-lg ring ring-gray-200 dark:ring-gray-800 p-4 flex gap-2.5 items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-white">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<div class="absolute inset-0 rounded-lg border-b-2 z-[-1] border-primary-500 dark:border-primary-400"></div>
|
||||
<div class="absolute inset-0 bottom-[2px] bg-white dark:bg-gray-900 z-[-1]"></div>
|
||||
</li>
|
||||
</ol><span style="position: fixed; border: 0px; width: 1px; display: inline-block; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;" aria-hidden="" tabindex="0"></span>
|
||||
</div>
|
||||
<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
Reference in New Issue
Block a user