78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
import { mount } from '@vue/test-utils'
|
|
import type { DefineComponent } from 'vue'
|
|
import { Icon as IconifyIcon } from '@iconify/vue'
|
|
import Drawer from './Drawer.vue'
|
|
|
|
type DrawerProps = {
|
|
id?: string
|
|
modelValue?: boolean
|
|
side?: 'right' | 'left'
|
|
showClose?: boolean
|
|
dismissable?: boolean
|
|
closeOnEscape?: boolean
|
|
ariaLabel?: string
|
|
drawerClass?: string
|
|
overlayClass?: string
|
|
headerClass?: string
|
|
bodyClass?: string
|
|
footerClass?: string
|
|
}
|
|
|
|
const DrawerForTest = Drawer as DefineComponent<DrawerProps>
|
|
|
|
function mountComponent(props: DrawerProps = {}, slots?: Record<string, string>) {
|
|
return mount(DrawerForTest, {
|
|
props,
|
|
slots,
|
|
global: { stubs: { Teleport: true } },
|
|
})
|
|
}
|
|
|
|
describe('MalioDrawer', () => {
|
|
it('does not render when modelValue is false', () => {
|
|
const wrapper = mountComponent({ modelValue: false })
|
|
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
|
})
|
|
|
|
it('renders the panel when modelValue is true', () => {
|
|
const wrapper = mountComponent({ modelValue: true })
|
|
expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
|
|
})
|
|
|
|
it('renders default slot in the body', () => {
|
|
const wrapper = mountComponent(
|
|
{ modelValue: true },
|
|
{ default: '<p data-test="content">Contenu</p>' },
|
|
)
|
|
expect(wrapper.find('[data-test="body"] [data-test="content"]').text()).toBe('Contenu')
|
|
})
|
|
|
|
it('works in uncontrolled mode (defaults closed)', () => {
|
|
const wrapper = mountComponent()
|
|
expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
|
|
})
|
|
|
|
it('uses custom id when provided', () => {
|
|
const wrapper = mountComponent({ modelValue: true, id: 'my-drawer' })
|
|
expect(wrapper.find('.fixed').attributes('id')).toBe('my-drawer')
|
|
})
|
|
|
|
it('generates an id when not provided', () => {
|
|
const wrapper = mountComponent({ modelValue: true })
|
|
expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-drawer-/)
|
|
})
|
|
|
|
it('has role="dialog" and aria-modal on the panel', () => {
|
|
const wrapper = mountComponent({ modelValue: true })
|
|
const panel = wrapper.find('[data-test="panel"]')
|
|
expect(panel.attributes('role')).toBe('dialog')
|
|
expect(panel.attributes('aria-modal')).toBe('true')
|
|
})
|
|
|
|
it('applies drawerClass to the panel', () => {
|
|
const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-2xl' })
|
|
expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
|
|
})
|
|
})
|