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