tristan
6efb830ffe
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Reviewed-on: #54 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
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)
|
|
})
|
|
})
|