From 5b4e67cecffdd818f16c7e344e30fbaf181afcb6 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Tue, 26 May 2026 16:55:35 +0200
Subject: [PATCH] test(accordion): tests unitaires AccordionItem [#MUI-37]

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../malio/accordion/AccordionItem.test.ts     | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 app/components/malio/accordion/AccordionItem.test.ts

diff --git a/app/components/malio/accordion/AccordionItem.test.ts b/app/components/malio/accordion/AccordionItem.test.ts
new file mode 100644
index 0000000..00c742f
--- /dev/null
+++ b/app/components/malio/accordion/AccordionItem.test.ts
@@ -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)
+  })
+})