From 52eef36baa51d3b67b867886b5dfd7d6735e3d3f Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 21 Mar 2024 17:39:03 +0100 Subject: [PATCH] chore(Accordion): improve and add tests --- src/runtime/components/Accordion.vue | 7 +- test/components/Accordion.spec.ts | 12 +- .../__snapshots__/Accordion.spec.ts.snap | 575 +++++++++++++++++- 3 files changed, 583 insertions(+), 11 deletions(-) diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue index bcb90b50..65a0c2b6 100644 --- a/src/runtime/components/Accordion.vue +++ b/src/runtime/components/Accordion.vue @@ -18,7 +18,7 @@ export interface AccordionItem { disabled?: boolean } -export interface AccordionProps extends Omit { +export interface AccordionProps extends Omit { items?: T[] class?: any ui?: Partial @@ -46,13 +46,14 @@ import { useAppConfig } from '#app' const props = withDefaults(defineProps>(), { type: 'single', - collapsible: true + collapsible: true, + defaultValue: '0' }) const emits = defineEmits() defineSlots>() const appConfig = useAppConfig() -const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'orientation', 'type'), emits) +const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type'), emits) const ui = computed(() => tv({ extend: accordion, slots: props.ui })()) diff --git a/test/components/Accordion.spec.ts b/test/components/Accordion.spec.ts index da4b124d..acfc0c76 100644 --- a/test/components/Accordion.spec.ts +++ b/test/components/Accordion.spec.ts @@ -33,8 +33,16 @@ const items = [{ describe('Accordion', () => { it.each([ ['basic case', { props: { items } }], - ['with class', { props: { class: 'w-96' } }], - ['with ui', { props: { ui: { item: 'border' } } }] + ['with class', { props: { items, class: 'w-96' } }], + ['with ui', { props: { ui: { items, item: 'border-gray-300 dark:border-gray-700' } } }], + ['with as', { props: { items, as: 'section' } }], + ['with type', { props: { items, type: 'multiple' as const } }], + ['with disabled', { props: { items, disabled: true } }], + ['with collapsible', { props: { items, collapsible: false } }], + ['with modelValue', { props: { items, modelValue: '1' } }], + ['with defaultValue', { props: { items, defaultValue: '1' } }], + ['with default slot', { props: { items }, slots: { default: () => 'Default slot' } }], + ['with content slot', { props: { items }, slots: { content: () => 'Content slot' } }] ])('renders %s correctly', async (nameOrHtml: string, options: { props?: AccordionProps, slots?: any }) => { const html = await ComponentRender(nameOrHtml, options, Accordion) expect(html).toMatchSnapshot() diff --git a/test/components/__snapshots__/Accordion.spec.ts.snap b/test/components/__snapshots__/Accordion.spec.ts.snap index 6a897a00..575ed157 100644 --- a/test/components/__snapshots__/Accordion.spec.ts.snap +++ b/test/components/__snapshots__/Accordion.spec.ts.snap @@ -2,15 +2,13 @@ exports[`Accordion > renders basic case correctly 1`] = ` "
-
-

- +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.

" `; -exports[`Accordion > renders with class correctly 1`] = `"
"`; +exports[`Accordion > renders with as correctly 1`] = ` +"
+
+

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; + +exports[`Accordion > renders with class correctly 1`] = ` +"
+
+

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; + +exports[`Accordion > renders with collapsible correctly 1`] = ` +"
+
+

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; + +exports[`Accordion > renders with content slot correctly 1`] = ` +"
+
+

+
Content slot
+
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; + +exports[`Accordion > renders with default slot correctly 1`] = ` +"
+
+

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; + +exports[`Accordion > renders with defaultValue correctly 1`] = ` +"
+
+

+ +
+
+

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; + +exports[`Accordion > renders with disabled correctly 1`] = ` +"
+
+

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; + +exports[`Accordion > renders with modelValue correctly 1`] = ` +"
+
+

+ +
+
+

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; + +exports[`Accordion > renders with type correctly 1`] = ` +"
+
+

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
+
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
+

+ +
+
" +`; exports[`Accordion > renders with ui correctly 1`] = `"
"`;