@eturnity/eturnity_reusable_components 8.22.3 → 8.22.5

package/src/components/banner/actionBanner/actionBanner.spec.js

@@ -1,58 +1,70 @@
 /* eslint-disable */
-import { h } from 'vue'
 import { mount } from '@vue/test-utils'
 import ActionBanner from '@/components/banner/actionBanner'
 import theme from '@/assets/theme'
 
+// Mock Modal component
+jest.mock('@/components/modals/modal', () => ({
+  name: 'Modal',
+  template: `
+    <div v-if="isOpen" data-test-id="action_banner_wrapper">
+      <slot></slot>
+      <button class="close" @click="$emit('on-close')"></button>
+    </div>
+  `,
+  props: ['isOpen'],
+}))
+
 describe('Action Banner Component', () => {
-  it('action banner is shown when isOpen props is true', async () => {
-    const wrapper = mount(ActionBanner, {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(ActionBanner, {
       props: {
         isOpen: false,
       },
+      slots: {
+        title: 'Test Title',
+        body: 'Test Body',
+        buttons: 'Test Buttons',
+      },
       global: {
         provide: {
           theme,
         },
       },
     })
+  })
 
+  it('action banner is shown when isOpen props is true', async () => {
+    // Initially, the banner should not exist because isOpen is false
     const bannerWrapper = wrapper.find('[data-test-id="action_banner_wrapper"]')
-    expect(bannerWrapper.exists()).toBe(true)
-    expect(bannerWrapper.classes()).not.toContain('visible')
-    expect(bannerWrapper.classes()).toContain('hidden')
+    expect(bannerWrapper.exists()).toBe(false)
+
+    // After setting isOpen to true, the banner should exist
     await wrapper.setProps({ isOpen: true })
-    expect(bannerWrapper.classes()).toContain('visible')
-    expect(bannerWrapper.classes()).not.toContain('hidden')
+    await wrapper.vm.$nextTick()
+
+    const updatedBannerWrapper = wrapper.find(
+      '[data-test-id="action_banner_wrapper"]'
+    )
+    expect(updatedBannerWrapper.exists()).toBe(true)
   })
 
-  it('action banner slots is display when user passed slots content', async () => {
-    const titleText = 'Sample title'
-    const bodyText = 'Sample body text'
-    const buttonText = 'Sample button'
+  it('renders slots correctly when banner is open', async () => {
+    await wrapper.setProps({ isOpen: true })
+    await wrapper.vm.$nextTick()
 
-    const wrapper = mount(ActionBanner, {
-      props: {
-        isOpen: false,
-      },
-      slots: {
-        title: titleText,
-        body: bodyText,
-        buttons: h('button', {}, buttonText),
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
+    const title = wrapper.find('[data-test-id="modal_title"]')
+    const body = wrapper.find('[data-test-id="modal_body"]')
+    const buttons = wrapper.find('[data-test-id="modal_buttons"]')
 
-    const modalTitleEl = wrapper.find('[data-test-id="modal_title"]')
-    expect(modalTitleEl.text()).toBe(titleText)
-    const modalBodyEl = wrapper.find('[data-test-id="modal_body"]')
-    expect(modalBodyEl.text()).toBe(bodyText)
-    const modalButtonsEl = wrapper.find('[data-test-id="modal_buttons"]')
-    expect(modalButtonsEl.text()).toBe(buttonText)
+    expect(title.exists()).toBe(true)
+    expect(title.text()).toBe('Test Title')
+    expect(body.exists()).toBe(true)
+    expect(body.text()).toBe('Test Body')
+    expect(buttons.exists()).toBe(true)
+    expect(buttons.text()).toBe('Test Buttons')
   })
 
   it('action banner on-close event is emitted when modal close button is clicked', async () => {

package/src/components/buttons/buttonIcon/ButtonIcon.stories.js

@@ -112,12 +112,6 @@ Cancel.args = {
   variant: 'cancel',
 }
 
-export const Danger = Template.bind({})
-Danger.args = {
-  ...Default.args,
-  variant: 'danger',
-}
-
 export const Disabled = Template.bind({})
 Disabled.args = {
   ...Default.args,
@@ -151,7 +145,7 @@ CustomColor.args = {
 export const CustomIconColor = Template.bind({})
 CustomIconColor.args = {
   ...Default.args,
-  iconColor: '#FFFFFF',
+  iconColor: '#000',
 }
 
 export const DarkTheme = Template.bind({})

package/src/components/buttons/buttonIcon/buttonIcon.spec.js

@@ -0,0 +1,152 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import ButtonIcon from '@/components/buttons/buttonIcon'
+import theme from '@/assets/theme'
+
+// Mock the Icon component
+const Icon = {
+  name: 'Icon',
+  template: '<div class="mock-icon"></div>',
+  props: {
+    name: String,
+    color: String,
+    size: String,
+    fillType: String,
+    disableHover: Boolean,
+    hoveredColor: String,
+  },
+}
+
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('ButtonIcon.vue', () => {
+  let wrapper
+
+  const defaultProps = {
+    type: 'primary',
+    variant: 'main',
+    appTheme: 'light',
+    buttonSize: 'medium',
+    isDisabled: false,
+    text: 'Click Me',
+    minWidth: '200px',
+    customColor: null,
+    iconName: 'settings',
+    iconColor: null,
+    fontSize: '14px',
+    isActive: false,
+    fillType: 'fill',
+    height: 'auto',
+  }
+
+  beforeEach(() => {
+    wrapper = mount(ButtonIcon, {
+      props: defaultProps,
+      global: {
+        provide: {
+          theme,
+        },
+        components: {
+          Icon,
+        },
+      },
+    })
+  })
+
+  it('renders button with correct text', () => {
+    const textContainer = wrapper.find('[data-test-id="button-icon-text"]')
+    expect(textContainer.exists()).toBe(true)
+    expect(textContainer.text()).toBe('Click Me')
+  })
+
+  it('renders icon with correct name', () => {
+    const icon = wrapper.findComponent({ name: 'Icon' })
+    expect(icon.exists()).toBe(true)
+    expect(icon.props('name')).toBe('settings')
+  })
+
+  it('applies disabled state correctly', async () => {
+    await wrapper.setProps({ isDisabled: true })
+    const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+    expect(buttonWrapper.exists()).toBe(true)
+    expect(wrapper.props('isDisabled')).toBe(true)
+  })
+
+  it('applies custom color when provided', async () => {
+    const customColor = '#FF5733'
+    await wrapper.setProps({ customColor })
+    const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+    expect(buttonWrapper.exists()).toBe(true)
+    expect(wrapper.props('customColor')).toBe(customColor)
+  })
+
+  it('applies custom icon color when provided', async () => {
+    const iconColor = '#000000'
+    await wrapper.setProps({ iconColor })
+    const icon = wrapper.findComponent({ name: 'Icon' })
+    expect(icon.exists()).toBe(true)
+    expect(icon.props('color')).toBe(iconColor)
+  })
+
+  it('applies active state correctly', async () => {
+    await wrapper.setProps({ isActive: true })
+    const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+    expect(buttonWrapper.exists()).toBe(true)
+    expect(wrapper.props('isActive')).toBe(true)
+  })
+
+  it('renders number count when provided', async () => {
+    const numberCount = 5
+    await wrapper.setProps({ numberCount })
+    const numberContainer = wrapper.find(
+      '[data-test-id="button-icon-number-container"]'
+    )
+    const numberText = wrapper.find('[data-test-id="button-icon-number"]')
+    expect(numberContainer.exists()).toBe(true)
+    expect(numberText.exists()).toBe(true)
+    expect(numberText.text()).toBe(numberCount.toString())
+  })
+
+  it('applies different button sizes correctly', async () => {
+    const sizes = ['small', 'medium', 'large']
+    for (const size of sizes) {
+      await wrapper.setProps({ buttonSize: size })
+      const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+      expect(buttonWrapper.exists()).toBe(true)
+      expect(wrapper.props('buttonSize')).toBe(size)
+    }
+  })
+
+  it('applies different button types correctly', async () => {
+    const types = ['primary', 'secondary', 'tertiary']
+    for (const type of types) {
+      await wrapper.setProps({ type })
+      const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+      expect(buttonWrapper.exists()).toBe(true)
+      expect(wrapper.props('type')).toBe(type)
+    }
+  })
+
+  it('applies different variants correctly', async () => {
+    // Only test variants that exist in the theme
+    const variants = ['main']
+    for (const variant of variants) {
+      await wrapper.setProps({ variant })
+      const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+      expect(buttonWrapper.exists()).toBe(true)
+      expect(wrapper.props('variant')).toBe(variant)
+    }
+  })
+
+  it('applies different themes correctly', async () => {
+    const themes = ['light', 'dark']
+    for (const theme of themes) {
+      await wrapper.setProps({ appTheme: theme })
+      const buttonWrapper = wrapper.find('[data-test-id="button-icon-wrapper"]')
+      expect(buttonWrapper.exists()).toBe(true)
+      expect(wrapper.props('appTheme')).toBe(theme)
+    }
+  })
+})

package/src/components/buttons/buttonIcon/index.vue

@@ -1,9 +1,10 @@
 <template>
-  <PageContainer>
+  <PageContainer data-test-id="button-icon-container">
     <ButtonWrapper
       :app-theme="appTheme"
       :button-size="buttonSize"
       :custom-color="customColor"
+      data-test-id="button-icon-wrapper"
       :height="height"
       :is-active="isActive"
       :is-disabled="isDisabled"
@@ -14,6 +15,7 @@
       <IconContainer
         :app-theme="appTheme"
         :button-size="buttonSize"
+        data-test-id="button-icon-icon-container"
         :height="height"
         :type="type"
         :variant="variant"
@@ -33,11 +35,20 @@
           size="14px"
         />
       </IconContainer>
-      <ButtonContainer :button-size="buttonSize" :height="height">
+      <ButtonContainer
+        :button-size="buttonSize"
+        data-test-id="button-icon-text"
+        :height="height"
+      >
         {{ text }}
       </ButtonContainer>
-      <NumberContainer v-if="numberCount">
-        <NumberText>{{ numberCount }}</NumberText>
+      <NumberContainer
+        v-if="numberCount"
+        data-test-id="button-icon-number-container"
+      >
+        <NumberText data-test-id="button-icon-number">{{
+          numberCount
+        }}</NumberText>
       </NumberContainer>
     </ButtonWrapper>
   </PageContainer>

package/src/components/buttons/mainButton/MainButton.stories.js

@@ -2,7 +2,7 @@ import MainButton from './index.vue'
 import theme from '../../../assets/theme'
 
 export default {
-  title: 'Buttons/MainButton',
+  title: 'Components/Buttons/MainButton',
   component: MainButton,
   tags: ['autodocs'],
   argTypes: {
@@ -133,13 +133,3 @@ DarkTheme.args = {
   buttonSize: 'medium',
   appTheme: 'dark',
 }
-
-export const IconAltDesignButton = {
-  args: {
-    text: 'Click me',
-    icon: 'bell',
-    type: 'primary',
-    iconAltStyle: true,
-    iconAltStyleColor: '#f2f2f2',
-  },
-}

package/src/components/card/card.spec.js

@@ -1,135 +1,93 @@
 /* eslint-disable */
-import { mount, config } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Card from '@/components/card'
 import theme from '@/assets/theme'
 
-config.global.components = {
-  EtPopover: {
-    template: '<div>{{ text }}</div>',
-    props: ['text'],
-  },
+// Mock InfoText component
+const InfoText = {
+  name: 'InfoText',
+  template: '<div data-test-id="card_popover">{{ text }}</div>',
+  props: ['text', 'size', 'infoPosition'],
 }
 
-config.global.mocks = {
-  $gettext: (msg) => msg,
-}
+jest.mock('@/components/infoText', () => InfoText)
 
 describe('Card Component', () => {
-  it('card title is shown when a title props is passed', () => {
-    const title = 'Test Card Title'
-    const wrapper = mount(Card, {
-      props: {
-        title,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
-
-    expect(wrapper.text()).toContain(title)
-  })
+  let wrapper
 
-  it('card spinner is shown when user set isLoading props to true', async () => {
-    // Start with isLoading is false
-    const wrapper = mount(Card, {
+  beforeEach(() => {
+    wrapper = mount(Card, {
       props: {
         title: 'Test Card Title',
         isLoading: false,
+        showPopover: false,
+        popoverText: '',
       },
       global: {
         provide: {
           theme,
         },
+        components: {
+          InfoText,
+        },
       },
     })
+  })
+
+  it('renders card title correctly', () => {
+    const titleElement = wrapper.find('[data-test-id="card_title"]')
+    expect(titleElement.exists()).toBe(true)
+    expect(titleElement.text()).toBe('Test Card Title')
+  })
+
+  it('shows loading spinner when isLoading is true', async () => {
+    let spinnerElement = wrapper.find('[data-test-id="card_spinner"]')
+    expect(spinnerElement.exists()).toBe(false)
 
-    let cardSpinner = wrapper.find('[data-test-id="card_spinner"]')
-    expect(cardSpinner.exists()).toBe(false)
     await wrapper.setProps({ isLoading: true })
     await wrapper.vm.$nextTick()
-    cardSpinner = wrapper.find('[data-test-id="card_spinner"]')
-    expect(cardSpinner.exists()).toBe(true)
-  })
 
-  it('card wrapper has custom class when viewCardClass props is passed', async () => {
-    const viewCardClass = 'sampleClass'
-    const wrapper = mount(Card, {
-      props: {
-        title: 'Test Card Title',
-        viewCardClass,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
+    spinnerElement = wrapper.find('[data-test-id="card_spinner"]')
+    expect(spinnerElement.exists()).toBe(true)
+  })
 
-    const cardMainWrapper = wrapper.find('[data-test-id="card_main_wrapper"]')
-    expect(cardMainWrapper.classes()).toContain(viewCardClass)
+  it('applies custom class when provided', async () => {
+    const customClass = 'custom-class'
+    await wrapper.setProps({ viewCardClass: customClass })
+    const mainWrapper = wrapper.find('[data-test-id="card_main_wrapper"]')
+    expect(mainWrapper.attributes('class')).toContain(customClass)
   })
 
-  it('card title has custom class when titleClass props is passed', async () => {
-    const titleClass = 'sampleClass'
-    const wrapper = mount(Card, {
-      props: {
-        title: 'Test Card Title',
-        titleClass,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
+  it('shows popover when showPopover is true', async () => {
+    const popoverText = 'Test Popover Text'
+    await wrapper.setProps({ showPopover: true, popoverText })
+    await wrapper.vm.$nextTick()
 
-    const cardTitle = wrapper.find('[data-test-id="card_title"]')
-    expect(cardTitle.classes()).toContain(titleClass)
+    const popover = wrapper.find('[data-test-id="card_popover"]')
+    expect(popover.exists()).toBe(true)
+    expect(popover.text()).toBe(popoverText)
   })
 
-  it('card popover is shown when user set showPopover props to true', async () => {
-    // Start with showPopover is false
-    const wrapper = mount(Card, {
-      props: {
-        title: 'Test Card Title',
-        showPopover: false,
-        popoverText: 'Sample popover text',
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
+  it('updates popover text when popoverText prop changes', async () => {
+    // First set both props to ensure the InfoText is rendered
+    await wrapper.setProps({
+      showPopover: true,
+      popoverText: 'Initial Text',
     })
-
-    let cardPopover = wrapper.find('[data-test-id="card_popover"]')
-    expect(cardPopover.exists()).toBe(false)
-    await wrapper.setProps({ showPopover: true })
     await wrapper.vm.$nextTick()
-    cardPopover = wrapper.find('[data-test-id="card_popover"]')
-    expect(cardPopover.exists()).toBe(true)
-    expect(cardPopover.text()).toContain('Sample popover text')
-  })
 
-  it('card popover text is set when user passed a popoverText props value', async () => {
-    const popoverText = 'Sample popover text'
-    const wrapper = mount(Card, {
-      props: {
-        title: 'Test Card Title',
-        showPopover: true,
-        popoverText,
-      },
-      global: {
-        provide: {
-          theme,
-        },
-      },
-    })
+    // Find the popover and verify it exists and has the initial text
+    let popover = wrapper.find('[data-test-id="card_popover"]')
+    expect(popover.exists()).toBe(true)
+    expect(popover.text()).toBe('Initial Text')
+
+    // Update the popover text
+    await wrapper.setProps({ popoverText: 'Updated Text' })
+    await wrapper.vm.$nextTick()
 
-    let cardPopover = wrapper.find('[data-test-id="card_popover"]')
-    expect(cardPopover.exists()).toBe(true)
-    expect(cardPopover.text()).toContain('Sample popover text')
+    // Find the popover again and verify it has the updated text
+    popover = wrapper.find('[data-test-id="card_popover"]')
+    expect(popover.exists()).toBe(true)
+    expect(popover.text()).toBe('Updated Text')
   })
 })

package/src/components/card/index.vue

@@ -42,6 +42,7 @@
 
   import styled from 'vue3-styled-components'
   import Spinner from '../spinner'
+  import InfoText from '../infoText'
 
   const WrapperProps = { width: [Number, String], minWidth: [Number, String] }
   const Wrapper = styled('div', WrapperProps)`
@@ -75,6 +76,7 @@
       Wrapper,
       CardTitle,
       CardWrapper,
+      InfoText,
     },
     props: {
       title: {