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
MarkBind · Jul 13, 2024 · 54a60bf · 54a60bf
1 parent 6654e37
commit 54a60bf
Show file tree

Hide file tree

Showing 5 changed files with 328 additions and 3 deletions.
diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue
@@ -12,6 +12,7 @@
         data-bs-toggle="dropdown"
       >
         <slot name="header"></slot>
+        <span>{{ tabGroupHeader }}</span>
       </a>
     </slot>
     <slot name="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-end': menuAlignRight }]">
@@ -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
@@ -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
@@ -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
@@ -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 = `
+  <tab header="Tab 1">
+      Text in the first tab
+  </tab>
+  <tab header="Tab 2">
+      Text in the second tab
+  </tab>
+`;
+
+const TABGROUP_COMPONENT = `
+  <tab-group header="Third tab group :milky_way:">
+    <tab header="Stars :star:">
+      Some stuff about stars ...
+    </tab>
+    <tab header="Disabled Moon :new_moon:" disabled>
+    </tab>
+  </tab-group>
+  <tab-group header="Disabled fourth tab group" disabled>
+    <tab header="Hidden tab">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
+    </tab>
+  </tab-group>
+`;
+
+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
@@ -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`] = `
+<div
+  class="printable-tabs"
+>
+  <ul
+    class="nav nav-tabs d-print-none nav-tabs"
+    role="tablist"
+  />
+   
+  <div
+    class="tab-content"
+  >
+    <div
+      class="tab-pane active printable-tab-pane tab-pane-hide"
+      role="tabpanel"
+    >
+      <div
+        class="nav-tabs printable-tab-header"
+      >
+        <div
+          class="nav-link active"
+        />
+      </div>
+       
+      Text in the first tab
+   
+      <hr />
+    </div>
+     
+    <div
+      class="tab-pane active printable-tab-pane tab-pane-hide"
+      role="tabpanel"
+    >
+      <div
+        class="nav-tabs printable-tab-header"
+      >
+        <div
+          class="nav-link active"
+        />
+      </div>
+       
+      Text in the second tab
+   
+      <hr />
+    </div>
+     
+    <div
+      class="printable-tab-group"
+    >
+      <div
+        class="printable-tab-group-header"
+      />
+       
+      <div
+        class="tab-pane active printable-tab-pane tab-pane-hide"
+        role="tabpanel"
+      >
+        <div
+          class="nav-tabs printable-tab-header"
+        >
+          <div
+            class="nav-link active"
+          />
+        </div>
+         
+      Some stuff about stars ...
+     
+        <hr />
+      </div>
+       
+      <div
+        class="tab-pane active printable-tab-pane tab-pane-hide"
+        role="tabpanel"
+      >
+        <div
+          class="nav-tabs printable-tab-header"
+        >
+          <div
+            class="nav-link active"
+          />
+        </div>
+          
+        <hr />
+      </div>
+    </div>
+     
+    <div
+      class="printable-tab-group"
+    >
+      <div
+        class="printable-tab-group-header"
+      />
+       
+      <div
+        class="tab-pane active printable-tab-pane tab-pane-hide"
+        role="tabpanel"
+      >
+        <div
+          class="nav-tabs printable-tab-header"
+        >
+          <div
+            class="nav-link active"
+          />
+        </div>
+         
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
+     
+        <hr />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tabset (Tabs) with Tab and Tab-Group Components renders tabset with tab-group 1`] = `
+<div
+  class="printable-tabs"
+>
+  <ul
+    class="nav nav-tabs d-print-none nav-tabs"
+    role="tablist"
+  />
+   
+  <div
+    class="tab-content"
+  >
+    <div
+      class="printable-tab-group"
+    >
+      <div
+        class="printable-tab-group-header"
+      />
+       
+      <div
+        class="tab-pane active printable-tab-pane tab-pane-hide"
+        role="tabpanel"
+      >
+        <div
+          class="nav-tabs printable-tab-header"
+        >
+          <div
+            class="nav-link active"
+          />
+        </div>
+         
+      Some stuff about stars ...
+     
+        <hr />
+      </div>
+       
+      <div
+        class="tab-pane active printable-tab-pane tab-pane-hide"
+        role="tabpanel"
+      >
+        <div
+          class="nav-tabs printable-tab-header"
+        >
+          <div
+            class="nav-link active"
+          />
+        </div>
+          
+        <hr />
+      </div>
+    </div>
+     
+    <div
+      class="printable-tab-group"
+    >
+      <div
+        class="printable-tab-group-header"
+      />
+       
+      <div
+        class="tab-pane active printable-tab-pane tab-pane-hide"
+        role="tabpanel"
+      >
+        <div
+          class="nav-tabs printable-tab-header"
+        >
+          <div
+            class="nav-link active"
+          />
+        </div>
+         
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
+     
+        <hr />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Tabset (Tabs) with Tab and Tab-Group Components renders tabset with tabs 1`] = `
+<div
+  class="printable-tabs"
+>
+  <ul
+    class="nav nav-tabs d-print-none nav-tabs"
+    role="tablist"
+  />
+   
+  <div
+    class="tab-content"
+  >
+    <div
+      class="tab-pane active printable-tab-pane tab-pane-hide"
+      role="tabpanel"
+    >
+      <div
+        class="nav-tabs printable-tab-header"
+      >
+        <div
+          class="nav-link active"
+        />
+      </div>
+       
+      Text in the first tab
+   
+      <hr />
+    </div>
+     
+    <div
+      class="tab-pane active printable-tab-pane tab-pane-hide"
+      role="tabpanel"
+    >
+      <div
+        class="nav-tabs printable-tab-header"
+      >
+        <div
+          class="nav-link active"
+        />
+      </div>
+       
+      Text in the second tab
+   
+      <hr />
+    </div>
+  </div>
+</div>
+`;