From 54a60bff2857a2110722a7894653ed523f35af2d Mon Sep 17 00:00:00 2001 From: Ger Teck Date: Sat, 13 Jul 2024 19:16:00 +0800 Subject: [PATCH] Fix Tab-Group Header not displayed (#2557) * Add content to named slot * Remove header prop * Add props for TabGroup header * Update tabgroup header prop name * Update tab group header prop * Add slot for header back The header named slot is still being used for navbar, hence removing it causes regression for dropdowns under navbars. * Rename prop name To pass tests * Add Tabset, Tab, Tabgroup snapshot test * Refactor import Remove unnecessary import --- packages/vue-components/src/Dropdown.vue | 5 + packages/vue-components/src/Tabset.vue | 2 +- .../src/__tests__/Dropdown.spec.js | 2 - .../src/__tests__/Tabset.spec.js | 78 ++++++ .../__snapshots__/Tabset.spec.js.snap | 244 ++++++++++++++++++ 5 files changed, 328 insertions(+), 3 deletions(-) create mode 100644 packages/vue-components/src/__tests__/Tabset.spec.js create mode 100644 packages/vue-components/src/__tests__/__snapshots__/Tabset.spec.js.snap diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue index 05a9f2a9c2..e0a73bea37 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 339059173f..f450ad9417 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 e01789dcdb..f942e3d3c2 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 0000000000..aab2e5b46a --- /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 0000000000..a3ba44a98a --- /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`] = ` +
+
    + +
    +
    +
    +
    +
    + + Text in the first tab + +
    +
    + +
    +
    +
    +
    + + Text in the second tab + +
    +
    + +
    +
    + +
    +
    +
    +
    + + Some stuff about stars ... + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis. + +
    +
    +
    +
    +
    +`; + +exports[`Tabset (Tabs) with Tab and Tab-Group Components renders tabset with tab-group 1`] = ` +
    +
      + +
      +
      +
      + +
      +
      +
      +
      + + Some stuff about stars ... + +
      +
      + +
      +
      +
      +
      + +
      +
      +
      + +
      +
      + +
      +
      +
      +
      + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis. + +
      +
      +
      +
      +
      +`; + +exports[`Tabset (Tabs) with Tab and Tab-Group Components renders tabset with tabs 1`] = ` +
      +
        + +
        +
        +
        +
        +
        + + Text in the first tab + +
        +
        + +
        +
        +
        +
        + + Text in the second tab + +
        +
        +
        +
        +`;