From ab7984bd01eec85d7c0d1160db9c8aba2a83f46e Mon Sep 17 00:00:00 2001 From: Ger Teck Date: Thu, 13 Jun 2024 13:43:11 +0800 Subject: [PATCH 1/9] Add content to named slot --- packages/vue-components/src/Tabset.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/vue-components/src/Tabset.vue b/packages/vue-components/src/Tabset.vue index 339059173f..ef10b06fe4 100644 --- a/packages/vue-components/src/Tabset.vue +++ b/packages/vue-components/src/Tabset.vue @@ -28,6 +28,9 @@ :class="{active:t.active}" :disabled="t.disabled" > +
  • Date: Thu, 13 Jun 2024 16:31:09 +0800 Subject: [PATCH 2/9] Remove header prop --- packages/vue-components/src/Tabset.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vue-components/src/Tabset.vue b/packages/vue-components/src/Tabset.vue index ef10b06fe4..d87e48f187 100644 --- a/packages/vue-components/src/Tabset.vue +++ b/packages/vue-components/src/Tabset.vue @@ -24,7 +24,6 @@ v-else :key="index" class="nav-item" - :header="t.headerRendered" :class="{active:t.active}" :disabled="t.disabled" > From f92b856ee7d4ea77cb02fa49572cd5be027b1612 Mon Sep 17 00:00:00 2001 From: Ger Teck Date: Thu, 20 Jun 2024 13:26:06 +0800 Subject: [PATCH 3/9] Add props for TabGroup header --- packages/vue-components/src/Dropdown.vue | 6 +++++- packages/vue-components/src/Tabset.vue | 4 +--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue index 05a9f2a9c2..2f2576ecb4 100644 --- a/packages/vue-components/src/Dropdown.vue +++ b/packages/vue-components/src/Dropdown.vue @@ -11,7 +11,7 @@ :class="{'disabled': disabledBool}" data-bs-toggle="dropdown" > - + @@ -70,6 +70,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 d87e48f187..885e1e2bb3 100644 --- a/packages/vue-components/src/Tabset.vue +++ b/packages/vue-components/src/Tabset.vue @@ -25,11 +25,9 @@ :key="index" class="nav-item" :class="{active:t.active}" + :tabgroup-header="t.headerRendered" :disabled="t.disabled" > -
  • Date: Mon, 1 Jul 2024 10:40:04 +0800 Subject: [PATCH 4/9] Update tabgroup header prop name --- packages/vue-components/src/Dropdown.vue | 4 ++-- packages/vue-components/src/Tabset.vue | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue index 2f2576ecb4..c7987ab432 100644 --- a/packages/vue-components/src/Dropdown.vue +++ b/packages/vue-components/src/Dropdown.vue @@ -11,7 +11,7 @@ :class="{'disabled': disabledBool}" data-bs-toggle="dropdown" > - + @@ -70,7 +70,7 @@ export default { type: String, default: 'light', }, - tabgroupHeader: { + header: { type: String, default: '', }, diff --git a/packages/vue-components/src/Tabset.vue b/packages/vue-components/src/Tabset.vue index 885e1e2bb3..27fb1fad01 100644 --- a/packages/vue-components/src/Tabset.vue +++ b/packages/vue-components/src/Tabset.vue @@ -25,7 +25,7 @@ :key="index" class="nav-item" :class="{active:t.active}" - :tabgroup-header="t.headerRendered" + :header="t.headerRendered" :disabled="t.disabled" >
  • From b1a0055c4c3b340ee49821d24086b340dd5f0859 Mon Sep 17 00:00:00 2001 From: Ger Teck Date: Mon, 1 Jul 2024 10:40:49 +0800 Subject: [PATCH 5/9] Update tab group header prop --- packages/vue-components/src/Tabset.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue-components/src/Tabset.vue b/packages/vue-components/src/Tabset.vue index 27fb1fad01..339059173f 100644 --- a/packages/vue-components/src/Tabset.vue +++ b/packages/vue-components/src/Tabset.vue @@ -24,8 +24,8 @@ v-else :key="index" class="nav-item" - :class="{active:t.active}" :header="t.headerRendered" + :class="{active:t.active}" :disabled="t.disabled" >
  • From a5c693467cc4bd5c7f84c4d2e70b3964c46bd23d Mon Sep 17 00:00:00 2001 From: Ger Teck Date: Thu, 4 Jul 2024 10:14:40 +0800 Subject: [PATCH 6/9] Add slot for header back The header named slot is still being used for navbar, hence removing it causes regression for dropdowns under navbars. --- packages/vue-components/src/Dropdown.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue index c7987ab432..74d8596551 100644 --- a/packages/vue-components/src/Dropdown.vue +++ b/packages/vue-components/src/Dropdown.vue @@ -11,6 +11,7 @@ :class="{'disabled': disabledBool}" data-bs-toggle="dropdown" > + From 1dd2449f590419405f3b35b1a0468d440724d292 Mon Sep 17 00:00:00 2001 From: Ger Teck Date: Thu, 4 Jul 2024 10:43:20 +0800 Subject: [PATCH 7/9] Rename prop name To pass tests --- packages/vue-components/src/Dropdown.vue | 4 ++-- packages/vue-components/src/Tabset.vue | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue index 74d8596551..b4a7283992 100644 --- a/packages/vue-components/src/Dropdown.vue +++ b/packages/vue-components/src/Dropdown.vue @@ -12,7 +12,7 @@ data-bs-toggle="dropdown" > - + {{ tabGroupHeader }} @@ -71,7 +71,7 @@ export default { type: String, default: 'light', }, - header: { + tabGroupHeader: { type: String, default: '', }, 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" > From 2168083a6eb8e1c9b2730836d789064d38ab99ca Mon Sep 17 00:00:00 2001 From: Ger Teck Date: Thu, 4 Jul 2024 14:02:04 +0800 Subject: [PATCH 8/9] Add Tabset, Tab, Tabgroup snapshot test --- packages/vue-components/src/Dropdown.vue | 2 +- .../src/__tests__/Tabset.spec.js | 78 ++++++ .../__snapshots__/Tabset.spec.js.snap | 244 ++++++++++++++++++ 3 files changed, 323 insertions(+), 1 deletion(-) 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 b4a7283992..e0a73bea37 100644 --- a/packages/vue-components/src/Dropdown.vue +++ b/packages/vue-components/src/Dropdown.vue @@ -12,7 +12,7 @@ data-bs-toggle="dropdown" > - {{ tabGroupHeader }} + {{ tabGroupHeader }} 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 + +
          +
          +
          +
          +`; From a5da4c44153763e3bd1be29d672ffe38f1bcfd13 Mon Sep 17 00:00:00 2001 From: Ger Teck Date: Thu, 4 Jul 2024 15:33:01 +0800 Subject: [PATCH 9/9] Refactor import Remove unnecessary import --- packages/vue-components/src/__tests__/Dropdown.spec.js | 2 -- 1 file changed, 2 deletions(-) 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 = `