diff --git a/packages/coreui-vue/src/components/footer/CFooter.ts b/packages/coreui-vue/src/components/footer/CFooter.ts index 81de0158..3f0d5fd2 100644 --- a/packages/coreui-vue/src/components/footer/CFooter.ts +++ b/packages/coreui-vue/src/components/footer/CFooter.ts @@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue' const CFooter = defineComponent({ name: 'CFooter', props: { + /** + * Component used for the root node. Either a string to use a HTML element or a component. + */ + as: { + type: String, + default: 'div', + }, /** * Place footer in non-static positions. * @@ -18,7 +25,7 @@ const CFooter = defineComponent({ setup(props, { slots }) { return () => h( - 'div', + props.as, { class: ['footer', { [`footer-${props.position}`]: props.position }] }, slots.default && slots.default(), ) diff --git a/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts b/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts index 4a5ba536..35b914ca 100644 --- a/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts +++ b/packages/coreui-vue/src/components/footer/__tests__/CFooter.spec.ts @@ -19,6 +19,15 @@ const customWrapper = mount(Component, { }, }) +const customWrapperTwo = mount(Component, { + propsData: { + as: 'footer', + }, + slots: { + default: 'Default slot', + }, +}) + describe(`Loads and display ${ComponentName} component`, () => { it('has a name', () => { expect(Component.name).toMatch(ComponentName) @@ -42,3 +51,13 @@ describe(`Customize ${ComponentName} component`, () => { expect(customWrapper.classes('footer-fixed')).toBe(true) }) }) + +describe(`Customize (number two) ${ComponentName} component`, () => { + it('renders correctly', () => { + expect(customWrapperTwo.html()).toMatchSnapshot() + }) + + it('tag name is custom', () => { + expect(customWrapperTwo.element.tagName).toBe('FOOTER') + }) +})