@eturnity/eturnity_reusable_components 8.19.8-EPIC-8593.1 → 8.19.8-EPIC-8593.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "8.19.8-EPIC-8593.1",
+  "version": "8.19.8-EPIC-8593.2",
   "files": [
     "dist",
     "src"

package/src/components/tabsHeader/TabsHeader.spec.js

@@ -0,0 +1,101 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import TabsHeader from './index.vue'
+import theme from '@/assets/theme'
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  // need to mock this due to how jest handles import.meta
+  fetchIcon: jest.fn(() => Promise.resolve('')),
+}))
+
+describe('TabsHeader', () => {
+  const mockTabsData = [
+    {
+      text: 'Tab 1',
+      id: 0,
+      hasError: true,
+      icon: 'home',
+      subText: 'Subtext 1',
+    },
+    {
+      text: 'Tab 2',
+      id: 1,
+      hasError: false,
+      icon: 'settings',
+      subText: 'Subtext 2',
+    },
+  ]
+
+  const createWrapper = (props = {}) => {
+    return mount(TabsHeader, {
+      props: {
+        tabsData: mockTabsData,
+        activeTab: 0,
+        fullSize: true,
+        ...props,
+      },
+      global: {
+        mocks: {
+          theme,
+        },
+      },
+    })
+  }
+
+  it('renders all tabs correctly', () => {
+    const wrapper = createWrapper()
+    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
+    expect(tabs).toHaveLength(mockTabsData.length)
+  })
+
+  it('displays correct tab text', () => {
+    const wrapper = createWrapper()
+    const firstTab = wrapper.find('[data-test-id="tab-text"]')
+    expect(firstTab.text()).toBe('Tab 1')
+  })
+
+  it('emits on-tab-change event when clicking a tab', async () => {
+    const wrapper = createWrapper()
+    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
+    await tabs[1].trigger('click')
+    expect(wrapper.emitted('on-tab-change')).toBeTruthy()
+    expect(wrapper.emitted('on-tab-change')[0]).toEqual([1])
+  })
+
+  it('does not emit on-tab-change when clicking active tab', async () => {
+    const wrapper = createWrapper()
+    const activeTab = wrapper.find('[data-test-id="tab-item"]')
+    await activeTab.trigger('click')
+    expect(wrapper.emitted('on-tab-change')).toBeFalsy()
+  })
+
+  it('applies correct styles for active tab', () => {
+    const wrapper = createWrapper()
+    const activeTab = wrapper.find('[data-test-active="true"]')
+    expect(activeTab.exists()).toBe(true)
+  })
+
+  it('renders error icon when tab has error', () => {
+    const wrapper = createWrapper()
+    const warningIcon = wrapper.find('[data-test-id="warning-icon"]')
+    expect(warningIcon.exists()).toBe(true)
+  })
+
+  it('renders subtext when provided', () => {
+    const wrapper = createWrapper()
+    const subtext = wrapper.find('[data-test-id="tab-subtext"]')
+    expect(subtext.text()).toBe('Subtext 1')
+  })
+
+  it('renders icon when provided', () => {
+    const wrapper = createWrapper()
+    const icon = wrapper.find('[data-test-id="tab-icon"]')
+    expect(icon.exists()).toBe(true)
+  })
+
+  it('applies fullSize prop correctly', () => {
+    const wrapper = createWrapper({ fullSize: true })
+    const tabs = wrapper.findAll('[data-test-id="tab-item"]')
+    expect(tabs.length).toBeGreaterThan(0)
+  })
+})

package/src/components/tabsHeader/index.vue

@@ -1,10 +1,12 @@
 <template>
-  <PageContainer>
-    <TabsContainer>
+  <PageContainer data-test-id="tabs-header-container">
+    <TabsContainer data-test-id="tabs-container">
       <TabItem
         v-for="item in tabsData"
         :key="item.id"
         :data-id="item.dataId"
+        :data-test-active="activeTab === item.id"
+        data-test-id="tab-item"
         :full-size="fullSize"
         :is-active="activeTab === item.id"
         @click="onTabClick({ id: item.id })"
@@ -16,6 +18,7 @@
               ? theme.semanticColors.purple[500]
               : theme.semanticColors.teal[800]
           "
+          data-test-id="tab-icon"
           :hovered-color="
             activeTab === item.id
               ? theme.semanticColors.purple[500]
@@ -24,10 +27,21 @@
           :name="item.icon"
           size="14px"
         />
-        <div>{{ item.text }}</div>
-        <DotIcon v-if="item.subText" :is-active="activeTab === item.id" />
-        <SubText v-if="item.subText">{{ item.subText }}</SubText>
-        <RCIcon v-if="item.hasError" name="warning" size="14px" />
+        <div data-test-id="tab-text">{{ item.text }}</div>
+        <DotIcon
+          v-if="item.subText"
+          data-test-id="dot-icon"
+          :is-active="activeTab === item.id"
+        />
+        <SubText v-if="item.subText" data-test-id="tab-subtext">{{
+          item.subText
+        }}</SubText>
+        <RCIcon
+          v-if="item.hasError"
+          data-test-id="warning-icon"
+          name="warning"
+          size="14px"
+        />
       </TabItem>
     </TabsContainer>
   </PageContainer>
@@ -112,7 +126,6 @@
     components: {
       PageContainer,
       TabsContainer,
-      NameContainer,
       TabItem,
       SubText,
       DotIcon,