diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue index 05a9f2a9c..e0a73bea3 100644 --- a/packages/vue-components/src/Dropdown.vue +++ b/packages/vue-components/src/Dropdown.vue @@ -12,6 +12,7 @@ data-bs-toggle="dropdown" > + {{ tabGroupHeader }} @@ -70,6 +71,10 @@ export default { type: String, default: 'light', }, + tabGroupHeader: { + type: String, + default: '', + }, menuAlignRight: { type: Boolean, default: false, diff --git a/packages/vue-components/src/Tabset.vue b/packages/vue-components/src/Tabset.vue index 339059173..f450ad941 100644 --- a/packages/vue-components/src/Tabset.vue +++ b/packages/vue-components/src/Tabset.vue @@ -24,7 +24,7 @@ v-else :key="index" class="nav-item" - :header="t.headerRendered" + :tab-group-header="t.headerRendered" :class="{active:t.active}" :disabled="t.disabled" > diff --git a/packages/vue-components/src/__tests__/Dropdown.spec.js b/packages/vue-components/src/__tests__/Dropdown.spec.js index e01789dcd..f942e3d3c 100644 --- a/packages/vue-components/src/__tests__/Dropdown.spec.js +++ b/packages/vue-components/src/__tests__/Dropdown.spec.js @@ -1,10 +1,8 @@ import { mount } from '@vue/test-utils'; import Dropdown from '../Dropdown.vue'; -import Submenu from '../Submenu.vue'; const DEFAULT_STUBS = { 'dropdown': Dropdown, - 'submenu': Submenu, }; const DROPDOWN = ` diff --git a/packages/vue-components/src/__tests__/Tabset.spec.js b/packages/vue-components/src/__tests__/Tabset.spec.js new file mode 100644 index 000000000..aab2e5b46 --- /dev/null +++ b/packages/vue-components/src/__tests__/Tabset.spec.js @@ -0,0 +1,78 @@ +import { mount } from '@vue/test-utils'; +import Tab from '../Tab.vue'; +import TabGroup from '../TabGroup.vue'; +import Tabset from '../Tabset.vue'; + +const DEFAULT_STUBS = { + 'tab': Tab, + 'tab-group': TabGroup, +}; + +const TABSET_HEADER = 'Tabset Header'; + +const TAB_COMPONENT = ` + + Text in the first tab + + + Text in the second tab + +`; + +const TABGROUP_COMPONENT = ` + + + Some stuff about stars ... + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis. + + +`; + +const TAB_AND_TABGROUP_COMPONENT = ` + ${TAB_COMPONENT} + ${TABGROUP_COMPONENT} +`; + +describe('Tabset (Tabs) with Tab and Tab-Group Components', () => { + test('renders tabset with tabs', () => { + const wrapper = mount(Tabset, { + slots: { + header: TABSET_HEADER, + default: TAB_COMPONENT, + }, + stubs: DEFAULT_STUBS, + }); + + expect(wrapper.element).toMatchSnapshot(); + }); + + test('renders tabset with tab-group', () => { + const wrapper = mount(Tabset, { + slots: { + header: TABSET_HEADER, + default: TABGROUP_COMPONENT, + }, + stubs: DEFAULT_STUBS, + }); + + expect(wrapper.element).toMatchSnapshot(); + }); + + test('renders tabset with both tabs and tab-group', () => { + const wrapper = mount(Tabset, { + slots: { + header: TABSET_HEADER, + default: TAB_AND_TABGROUP_COMPONENT, + }, + stubs: DEFAULT_STUBS, + }); + + expect(wrapper.element).toMatchSnapshot(); + }); +}); diff --git a/packages/vue-components/src/__tests__/__snapshots__/Tabset.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Tabset.spec.js.snap new file mode 100644 index 000000000..a3ba44a98 --- /dev/null +++ b/packages/vue-components/src/__tests__/__snapshots__/Tabset.spec.js.snap @@ -0,0 +1,244 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tabset (Tabs) with Tab and Tab-Group Components renders tabset with both tabs and tab-group 1`] = ` +
+