feat : slot #footer dans la zone scrollable du MalioDrawer
This commit is contained in:
@@ -145,4 +145,32 @@ describe('MalioDrawer', () => {
|
|||||||
const wrapper = mountComponent({ modelValue: true, headerClass: 'bg-m-primary' })
|
const wrapper = mountComponent({ modelValue: true, headerClass: 'bg-m-primary' })
|
||||||
expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
|
expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('renders the #footer slot inside the body (scrollable zone)', () => {
|
||||||
|
const wrapper = mountComponent(
|
||||||
|
{ modelValue: true },
|
||||||
|
{ footer: '<button data-test="save">Enregistrer</button>' },
|
||||||
|
)
|
||||||
|
expect(wrapper.find('[data-test="body"] [data-test="footer"] [data-test="save"]').exists()).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('does not render the footer wrapper when no #footer slot', () => {
|
||||||
|
const wrapper = mountComponent({ modelValue: true })
|
||||||
|
expect(wrapper.find('[data-test="footer"]').exists()).toBe(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('applies bodyClass to the body', () => {
|
||||||
|
const wrapper = mountComponent({ modelValue: true, bodyClass: 'px-10' })
|
||||||
|
expect(wrapper.find('[data-test="body"]').classes()).toContain('px-10')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('applies footerClass to the footer wrapper', () => {
|
||||||
|
const wrapper = mountComponent(
|
||||||
|
{ modelValue: true, footerClass: 'sticky bottom-0' },
|
||||||
|
{ footer: '<span>pied</span>' },
|
||||||
|
)
|
||||||
|
const footer = wrapper.find('[data-test="footer"]')
|
||||||
|
expect(footer.classes()).toContain('sticky')
|
||||||
|
expect(footer.classes()).toContain('bottom-0')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -62,6 +62,13 @@
|
|||||||
data-test="body"
|
data-test="body"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
|
<div
|
||||||
|
v-if="$slots.footer"
|
||||||
|
:class="footerClass"
|
||||||
|
data-test="footer"
|
||||||
|
>
|
||||||
|
<slot name="footer" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user