Add Tabset, Tab, Tabgroup snapshot test

MarkBind · Jul 4, 2024 · 2168083 · 2168083
1 parent 1dd2449
commit 2168083
Show file tree

Hide file tree

Showing 3 changed files with 323 additions and 1 deletion.
diff --git a/packages/vue-components/src/Dropdown.vue b/packages/vue-components/src/Dropdown.vue
@@ -12,7 +12,7 @@
         data-bs-toggle="dropdown"
       >
         <slot name="header"></slot>
-        <span> {{ tabGroupHeader }}</span>
+        <span>{{ tabGroupHeader }}</span>
       </a>
     </slot>
     <slot name="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-end': menuAlignRight }]">

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>
+`;