@eturnity/eturnity_reusable_components 7.45.5 → 7.48.1--EPDM-12129.7

package/src/components/inputs/searchInput/SearchInput.stories.js

@@ -1,40 +1,67 @@
+import { useArgs } from '@storybook/preview-api'
+import { action } from '@storybook/addon-actions'
+import defaultSearchInputProps from './defaultProps'
 import SearchInput from './index.vue'
 
 export default {
   title: 'SearchInput',
   component: SearchInput,
-  // argTypes: {},
+  tags: ['autodocs'],
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { SearchInput },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<search-input v-bind="$props" />',
-
-  // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
-  // To use:
-  // <search-input
-  //   placeholder="Company name"
-  //   :value="companyName"
-  //   :disabled="true"
-  //   inputWidth="250px"
-  // />
-})
+// To use:
+
+const defaultProps = defaultSearchInputProps
+
+const Template = (args) => {
+  const [currentArgs, updateArgs] = useArgs()
+
+  const handleInputChange = ($event) => {
+    action('on-change')($event)
+    updateArgs({ value: $event })
+  }
+
+  return {
+    components: { SearchInput },
+    setup() {
+      return { args: currentArgs, handleInputChange }
+    },
+    template: `
+      <SearchInput
+        v-bind="args"
+        @on-change="handleInputChange"
+      />
+    `,
+  }
+}
 
 export const Default = Template.bind({})
 Default.args = {
-  placeholder: 'Search...',
-  disabled: false,
-  value: '',
-  inputWidth: '250px',
+  ...defaultProps,
+}
+
+export const Placeholder = Template.bind({})
+Placeholder.args = {
+  ...defaultProps,
+  placeholder: 'Search... ',
 }
 
 export const Disabled = Template.bind({})
 Disabled.args = {
-  placeholder: 'Search...',
+  ...defaultProps,
   disabled: true,
-  value: '',
-  inputWidth: '250px',
 }
+
+export const StyledIcon = Template.bind({})
+StyledIcon.args = {
+  ...defaultProps,
+  'icon-color': 'red',
+  'icon-position': 'left',
+}
+
+export const Sizes = Template.bind({})
+Sizes.args = {
+  ...defaultProps,
+  'input-width': '250px',
+  'is-filter': true,
+}

package/src/components/inputs/searchInput/defaultProps.js

@@ -0,0 +1,12 @@
+const defaultSearchInputProps = {
+  dataId: 'search_input_id',
+  disabled: false, //
+  hasFocus: false, //
+  iconColor: 'black',
+  iconPosition: 'right',
+  inputWidth: null, //
+  isFilter: false,
+  placeholder: '',
+  value: '',
+}
+export default defaultSearchInputProps

package/src/components/inputs/searchInput/index.vue

@@ -5,6 +5,7 @@
       <InputContainer
         ref="inputElement"
         :data-id="dataId"
+        :data-qa-id="dataQaId"
         :disabled="disabled"
         :has-focus="hasFocus"
         :input-width="inputWidth"
@@ -22,15 +23,16 @@
   // import SearchInput from "@eturnity/eturnity_reusable_components/src/components/inputs/searchInput"
   // To use:
   // <search-input
-  //   placeholder="Company name"
-  //   :value="companyName"
+  //   data-id='search_input_id'
   //   :disabled="true"
-  //   inputWidth="250px"
+  //   :has-focus="true"
+  //   icon-color="grey2" // colors only from theme
+  //   icon-position="left"
+  //   input-width="250px"
+  //   :is-filter="true" // to set the height at 30px
+  //   placeholder="Search by company name"
+  //   :value="companyName"
   //   @on-change="function($event)"
-  //   :isFilter="true" // to set the height at 30px
-  //   data-id="test-data-id"
-  //   iconPosition="left"
-  //   iconColor="grey2"
   // />
   import styled from 'vue3-styled-components'
   import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
@@ -94,31 +96,43 @@
     },
     props: {
       value: {
+        type: [String, Number],
         required: true,
       },
       disabled: {
         required: false,
         default: false,
+        type: Boolean,
       },
       placeholder: {
         required: false,
         default: '',
+        type: String,
       },
       inputWidth: {
         required: false,
         default: null,
+        type: String,
       },
       isFilter: {
         required: false,
         default: false,
+        type: Boolean,
       },
       hasFocus: {
         required: false,
         default: false,
+        type: Boolean,
       },
       dataId: {
         required: false,
         default: '',
+        type: [String, Number],
+      },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
       },
       iconPosition: {
         type: String,

package/src/components/inputs/searchInput/searchInput.spec.js

@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils'
+import SearchInput from '@/components/inputs/searchInput'
+import defaultSearchInputProps from './defaultProps'
+import theme from '@/assets/theme'
+
+describe('SearchInput.vue', () => {
+  let searchInput
+  let searchInputWrapper
+
+  beforeEach(() => {
+    searchInput = mount(SearchInput, {
+      props: defaultSearchInputProps,
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+
+    const defaultDataId = searchInput.props('dataId')
+    searchInputWrapper = searchInput.find(`[data-id="${defaultDataId}"]`)
+  })
+
+  it('Search input is rendered and displays the correct placeholder', async () => {
+    // Check that Search input has been rendered
+    expect(searchInputWrapper.exists()).toBe(true)
+
+    // Set the placeholder
+    const placeholderText = 'Search by company name'
+    await searchInput.setProps({ placeholder: placeholderText })
+    await searchInput.vm.$nextTick()
+
+    // Check that the input displays the correct placeholder
+    expect(searchInputWrapper.attributes('placeholder')).toBe(placeholderText)
+  })
+
+  it('Search input emits correct payload on change', async () => {
+    // Simulate user input
+    const inputValue = 'test input'
+    await searchInputWrapper.setValue(inputValue)
+
+    // Check that the component emitted the 'on-change' event with correct payload
+    expect(searchInput.emitted('on-change')).toBeTruthy()
+    expect(searchInput.emitted('on-change')[0]).toEqual([inputValue])
+  })
+
+  it('test disabled prop', async () => {
+    await searchInput.setProps({ disabled: true })
+    await searchInput.vm.$nextTick()
+
+    expect(searchInputWrapper.attributes()).toHaveProperty('disabled')
+    expect(searchInputWrapper.element.disabled).toBe(true)
+  })
+
+  it('test hasFocus prop', async () => {
+    // Spy on the focus method
+    const focusSpy = jest.spyOn(searchInputWrapper.element, 'focus')
+
+    await searchInput.setProps({ hasFocus: true })
+    await searchInput.vm.$nextTick()
+
+    // Check that the focus method was called
+    expect(focusSpy).toHaveBeenCalled()
+  })
+})

package/src/components/inputs/select/index.vue

@@ -13,6 +13,7 @@
       <LabelWrapper
         v-if="label"
         :data-id="labelDataId"
+        :data-qa-id="dataQaId + '_label'"
         :info-text-message="!!infoTextMessage || !!$slots.infoText"
       >
         <InputLabel
@@ -44,6 +45,7 @@
           "
           class="select-button"
           :data-id="dataId"
+          :data-qa-id="dataQaId"
           :disabled="disabled"
           :font-color="
             buttonFontColor || colorMode == 'dark' ? 'white' : 'black'
@@ -553,6 +555,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       hasSelectButtonPadding: {
         required: false,
         type: Boolean,
@@ -613,7 +619,7 @@
         if (this.isDropdownOpen) {
           return this.$refs.dropdown.$el.childElementCount > 1
             ? this.$refs.dropdown.$el.childElementCount
-            : !!this.$refs.dropdown.$el.children[0]
+            : this.$refs.dropdown.$el.children[0]
             ? this.$refs.dropdown.$el.children[0].childElementCount
             : 0
         }

package/src/components/inputs/textAreaInput/index.vue

@@ -18,6 +18,7 @@
       >
         <textarea
           :data-id="inputDataId"
+          :data-qa-id="dataQaId"
           :disabled="isDisabled"
           :placeholder="placeholder"
           :resize="resize"
@@ -185,6 +186,11 @@
         required: false,
         default: '',
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
     },
     methods: {
       onChangeHandler($event) {

package/src/components/inputs/toggle/index.vue

@@ -2,6 +2,7 @@
   <Container>
     <FlexWrapper
       :data-id="dataId"
+      :data-qa-id="dataQaId"
       data-test-id="page_wrapper"
       :disabled="disabled"
       :size="size"
@@ -304,6 +305,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
     methods: {
       onToggleChange() {

package/src/components/rangeSlider/Slider.vue

@@ -2,6 +2,7 @@
   <div
     :class="className"
     :data-id="dataId"
+    :data-qa-id="dataQaId"
     :style="style"
     @mousedown="elementMouseDown"
     @touchstart="elementTouchDown"
@@ -64,6 +65,10 @@
         type: String,
         default: '',
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
       className: {
         type: String,
         default: 'vdr',