@eturnity/eturnity_reusable_components 8.22.4 → 8.22.6

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/buttons/mainButton/index.vue

@@ -240,6 +240,8 @@
         return this.isDisabled
           ? this.theme.mainButton[this.appTheme][this.type][this.variant]
               .disabled.textColor
+          : this.iconColor
+          ? this.iconColor
           : this.theme.mainButton[this.appTheme][this.type][this.variant]
               .default.textColor
       },

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: {

package/src/components/draggableCard/draggableCard.spec.js

@@ -1,18 +1,50 @@
 import { mount } from '@vue/test-utils'
 import DraggableCard from '@/components/draggableCard'
 import defaultProps from './defaultProps'
+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('mocked-icon-url.svg')),
+// Mock Icon component
+jest.mock('@/components/icon', () => ({
+  name: 'Icon',
+  template: '<div class="mock-icon"></div>',
+}))
+
+// Mock InfoText component
+jest.mock('@/components/infoText', () => ({
+  name: 'InfoText',
+  template: '<div data-test-id="info_text_wrapper"><slot></slot></div>',
+  props: ['text', 'size', 'infoPosition'],
 }))
 
 describe('DraggableCard.vue', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(DraggableCard, {
+      props: {
+        title: 'Test Title',
+        isCollapsed: false,
+        width: '300px',
+        initialPosition: { top: '0px', left: '0px' },
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+  })
+
+  it('renders card with title', () => {
+    const header = wrapper.find('[data-test-id="draggable_card_header"]')
+    expect(header.exists()).toBe(true)
+    expect(header.text()).toContain('Test Title')
+  })
+
   it('renders properly with required props', () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
     expect(
-      wrapper.find('[data-test-id="draggable_card_header"]').text()
-    ).toContain(defaultProps.title)
+      wrapper.find('[data-test-id="draggable_card_header"]').exists()
+    ).toBe(true)
 
     // Expect no footer rendered if not provided
     const footerElement = wrapper.find('[data-test-id="draggable_card_footer"]')
@@ -21,13 +53,22 @@ describe('DraggableCard.vue', () => {
 
   it('renders body slot content correctly', () => {
     const wrapper = mount(DraggableCard, {
-      props: defaultProps,
+      props: {
+        ...defaultProps,
+        width: '300px',
+        initialPosition: { top: '0px', left: '0px' },
+      },
       slots: {
         body: `
           <div class="custom_body1">${defaultProps.sampleBody1}</div>
           <div class="custom_body2">${defaultProps.sampleBody2}</div>
         `,
       },
+      global: {
+        provide: {
+          theme,
+        },
+      },
     })
     expect(wrapper.find('.custom_body1').exists()).toBe(true)
     expect(wrapper.text()).toContain(defaultProps.sampleBody1)
@@ -37,10 +78,19 @@ describe('DraggableCard.vue', () => {
 
   it('renders footer slot content correctly', () => {
     const wrapper = mount(DraggableCard, {
-      props: defaultProps,
+      props: {
+        ...defaultProps,
+        width: '300px',
+        initialPosition: { top: '0px', left: '0px' },
+      },
       slots: {
         footer: `<div class="custom_footer">${defaultProps.sampleFooter}</div>`,
       },
+      global: {
+        provide: {
+          theme,
+        },
+      },
     })
     expect(
       wrapper.find('[data-test-id="draggable_card_footer"]').exists()
@@ -50,50 +100,54 @@ describe('DraggableCard.vue', () => {
   })
 
   it('emits "on-close" when close button is clicked', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
     await wrapper
       .find('[data-test-id="draggable_card_close_button"]')
       .trigger('click')
     expect(wrapper.emitted('on-close')).toBeTruthy()
   })
 
-  it('toggles collapse state when arrow icon is clicked', async () => {
-    const wrapper = mount(DraggableCard, {
-      props: { ...defaultProps, isCollapsible: true },
-    })
-    expect(wrapper.vm.isCollapsed).toBe(false)
-    await wrapper
-      .find('[data-test-id="draggable_card_collapse_button"]')
-      .trigger('click')
+  it('toggles collapse state when clicked', async () => {
+    const collapseButton = wrapper.find(
+      '[data-test-id="draggable_card_collapse_button"]'
+    )
+    expect(collapseButton.exists()).toBe(true)
+
+    await collapseButton.trigger('click')
     expect(wrapper.vm.isCollapsed).toBe(true)
   })
 
-  it('handles drag start event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    await wrapper
-      .find('[data-test-id="draggable_card_drag_icon"]')
-      .trigger('mousedown', { clientX: 100, clientY: 100 })
+  it('handles drag events', async () => {
+    const dragIcon = wrapper.find('[data-test-id="draggable_card_drag_icon"]')
+    expect(dragIcon.exists()).toBe(true)
+
+    await dragIcon.trigger('mousedown', { clientX: 100, clientY: 100 })
     expect(wrapper.vm.isDragging).toBe(true)
-  })
 
-  it('handles drag move event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    wrapper.vm.onDragStart(
-      { preventDefault: () => {}, clientX: 100, clientY: 100 },
-      false
-    )
-    wrapper.vm.onDrag({ preventDefault: () => {}, clientX: 120, clientY: 120 })
-    expect(wrapper.vm.eventCoordinates.x).toBe(120)
-    expect(wrapper.vm.eventCoordinates.y).toBe(120)
-  })
+    await wrapper.trigger('mousemove', { clientX: 200, clientY: 200 })
+    expect(wrapper.vm.eventCoordinates).toEqual({ x: 100, y: 100 })
 
-  it('handles drag end event', async () => {
-    const wrapper = mount(DraggableCard, { props: defaultProps })
-    wrapper.vm.onDragStart(
-      { preventDefault: () => {}, clientX: 100, clientY: 100 },
-      false
-    )
-    wrapper.vm.onDragEnd()
+    // Reset drag state
+    wrapper.vm.isDragging = false
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.isDragging).toBe(false)
   })
+
+  it('should apply custom class when provided', () => {
+    const customClass = 'test-class'
+    const wrapper = mount(DraggableCard, {
+      props: {
+        ...defaultProps,
+        customClass,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const container = wrapper.find('[data-test-id="draggable_card_container"]')
+    expect(container.exists()).toBe(true)
+    expect(container.classes()).toContain(customClass)
+  })
 })

package/src/components/draggableCard/index.vue

@@ -1,5 +1,6 @@
 <template>
   <CardContainer
+    :class="customClass"
     data-test-id="draggable_card_container"
     :initial-position="initialPosition"
     :width="width"
@@ -62,6 +63,7 @@
   const CardContainerAttr = {
     initialPosition: Object,
     width: String,
+    customClass: String,
   }
   const CardContainer = styled('div', CardContainerAttr)`
     position: absolute;
@@ -228,6 +230,11 @@
         type: Object,
         default: () => {},
       },
+      customClass: {
+        required: false,
+        type: String,
+        default: '',
+      },
     },
     emits: ['on-close'],
     data() {

package/src/components/errorMessage/index.vue

@@ -19,7 +19,7 @@
     background: ${(props) => props.theme.colors.red};
     padding: 10px;
     width: max-content;
-    max-width: 100%;
+    /* max-width: 100%; */
     min-width: min-content;
     font-size: 11px;
     font-weight: 400;

package/src/components/icon/index.vue

@@ -208,9 +208,11 @@
       !props.disableHover &&
       `
      &:hover svg path:not(.fix, .isStrokePath) {
-      ${`${props.fillType}: ${props.hoveredColor || props.color};`}
+      ${`${props.fillType}: ${
+        props.theme.colors[props.hoveredColor] || props.color
+      };`}
      &:hover svg isStrokePath:not(.fix) {
-      ${`stroke: ${props.hoveredColor || props.color};`}
+      ${`stroke: ${props.theme.colors[props.hoveredColor] || props.color};`}
     }
     &:hover + div {
       background-color: ${props.hoveredColor};