@eturnity/eturnity_reusable_components 7.51.4 → 7.51.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.51.4",
+  "version": "7.51.5",
   "files": [
     "dist",
     "src"

package/src/components/icon/Icons.stories.js

@@ -3,24 +3,14 @@ import IconCollection from './iconCollection.vue'
 export default {
   title: 'icon',
   component: IconCollection,
-  // argTypes: {},
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
+const Template = (args) => ({
   components: { IconCollection },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<IconCollection v-bind="$props" />',
-
-  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-  //  How to use:
-  //<icon
-  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-  //   color="red"
-  //   hoveredColor="blue"
-  //   size="60px" by default, this is 30px
-  // />
+  setup() {
+    return { args }
+  },
+  template: '<IconCollection v-bind="args" />',
 })
 
 export const Default = Template.bind({})
@@ -28,14 +18,14 @@ Default.args = {
   size: '30px',
 }
 
-export const withColor = Template.bind({})
-withColor.args = {
+export const WithColor = Template.bind({})
+WithColor.args = {
   size: '30px',
   color: 'red',
   hoveredColor: 'crimson',
 }
 
-export const large = Template.bind({})
-large.args = {
+export const Large = Template.bind({})
+Large.args = {
   size: '60px',
 }

package/src/components/icon/icon.spec.js

@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils'
+import RCIcon from '@/components/icon'
+import theme from '@/assets/theme'
+import 'jest-styled-components'
+jest.mock('@/components/icon/iconCache.mjs', () => ({
+  fetchIcon: jest.fn(() => Promise.resolve('mocked-icon-url.svg')),
+}))
+
+describe('RCIcon.vue', () => {
+  it('renders icon with default props', async () => {
+    const wrapper = mount(RCIcon, {
+      props: { name: 'House' },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const iconWrapper = wrapper.find('[data-test-id="icon_wrapper"]')
+    const iconImage = wrapper.find('[data-test-id="icon_image"]')
+
+    expect(iconWrapper.exists()).toBe(true)
+    expect(iconImage.exists()).toBe(true)
+    expect(wrapper.props('size')).toBe('30px')
+  })
+
+  it('renders striked line when isStriked is true', async () => {
+    const wrapper = mount(RCIcon, {
+      props: {
+        name: 'House',
+        isStriked: true,
+        color: 'red',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const strikedLine = wrapper.find('[data-test-id="icon_striked_line"]')
+    expect(strikedLine.exists()).toBe(true)
+  })
+
+  it('applies correct styling based on props', async () => {
+    const wrapper = mount(RCIcon, {
+      props: {
+        name: 'House',
+        size: '60px',
+        color: 'red',
+        hoveredColor: 'blue',
+        backgroundColor: 'yellow',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const iconImage = wrapper.find('[data-test-id="icon_image"]')
+    expect(iconImage.exists()).toBe(true)
+    // Add assertions for styling if needed
+  })
+})

package/src/components/icon/iconCollection.vue

@@ -2,6 +2,7 @@
   <Wrapper>
     <IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
       <div>
+        color:{{ color }}
         <RCIcon
           :color="color"
           :hovered-color="hoveredColor"
@@ -39,9 +40,9 @@
     name: 'CollectionComponent',
     components: { RCIcon, IconWrapper, Wrapper },
     props: {
-      size: { required: false },
-      color: { required: false },
-      hoveredColor: { required: false },
+      size: { required: false, type: String, default: '30px' },
+      color: { required: false, type: String, default: 'white' },
+      hoveredColor: { required: false, type: String, default: 'grey' },
     },
     data() {
       return {

package/src/components/icon/index.vue

@@ -1,14 +1,24 @@
 <template>
-  <Wrapper :cursor="cursor" :disabled="disabled" :size="size">
+  <Wrapper
+    :cursor="cursor"
+    data-test-id="icon_wrapper"
+    :disabled="disabled"
+    :size="size"
+  >
     <IconImage
       :animation="animation"
       :background-color="backgroundColor"
       :color="color"
+      data-test-id="icon_image"
       :hovered-color="hoveredColor"
     >
-      <i v-html="icon.html"></i>
+      <i data-test-id="icon_svg" v-html="icon.html"></i>
     </IconImage>
-    <StrikedLine v-if="isStriked" :color="color" />
+    <StrikedLine
+      v-if="isStriked"
+      :color="color"
+      data-test-id="icon_striked_line"
+    />
   </Wrapper>
 </template>