test(accordion): tests unitaires AccordionItem [#MUI-37]
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
import {describe, expect, it, vi} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import Accordion from './Accordion.vue'
|
||||
import AccordionItem from './AccordionItem.vue'
|
||||
|
||||
function mountInAccordion(slot: string, accordionProps: Record<string, unknown> = {}) {
|
||||
return mount(Accordion, {
|
||||
props: accordionProps,
|
||||
slots: {default: slot},
|
||||
global: {components: {MalioAccordionItem: AccordionItem}},
|
||||
})
|
||||
}
|
||||
|
||||
describe('MalioAccordionItem', () => {
|
||||
it('throws when used outside MalioAccordion', () => {
|
||||
const spy = vi.spyOn(console, 'warn').mockImplementation(() => {})
|
||||
expect(() => mount(AccordionItem, {props: {title: 'Solo'}})).toThrow(
|
||||
/à l'intérieur de MalioAccordion/,
|
||||
)
|
||||
spy.mockRestore()
|
||||
})
|
||||
|
||||
it('generates an auto id-based value and still toggles when value prop is omitted', async () => {
|
||||
const wrapper = mountInAccordion(
|
||||
`<MalioAccordionItem title="Sans value"><p>X</p></MalioAccordionItem>`,
|
||||
)
|
||||
const header = wrapper.find('button[aria-expanded]')
|
||||
expect(header.attributes('aria-controls')).toMatch(/-panel-malio-accordion-item-/)
|
||||
await header.trigger('click')
|
||||
expect(header.attributes('aria-expanded')).toBe('true')
|
||||
})
|
||||
|
||||
it('applies headerClass and panelClass overrides via twMerge', () => {
|
||||
const wrapper = mountInAccordion(
|
||||
`<MalioAccordionItem title="T" value="t" header-class="bg-red-500" panel-class="text-lg"><p>X</p></MalioAccordionItem>`,
|
||||
)
|
||||
const header = wrapper.find('button[aria-expanded]')
|
||||
expect(header.classes()).toContain('bg-red-500')
|
||||
expect(wrapper.find('[role="region"]').html()).toContain('text-lg')
|
||||
})
|
||||
|
||||
it('renders a rotating chevron icon', () => {
|
||||
const wrapper = mountInAccordion(
|
||||
`<MalioAccordionItem title="T" value="t"><p>X</p></MalioAccordionItem>`,
|
||||
)
|
||||
expect(wrapper.find('button[aria-expanded] svg').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user