@eturnity/eturnity_reusable_components 7.45.5 → 7.48.1

package/package.json

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

package/src/components/inputs/inputText/InputText.stories.js

@@ -3,73 +3,68 @@ import InputText from './index.vue'
 export default {
   title: 'InputText',
   component: InputText,
-  // argTypes: {},
+  tags: ['autodocs'],
 }
 
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { InputText },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<input-text v-bind="$props" />',
+// import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
+// To use:
+// <input-text
+//   placeholder="Company name"
+//   :value="companyName"
+//   @input-change="onInputChange({ value: $event, type: 'companyName' })"
+//   :isError="checkErrors()"
+//   :errorMessage="This is my error message"
+//   infoTextAlign="right" // left by default
+//   infoTextMessage="My info message"
+//   label="Question 5"
+//   alignItems="horizontal" // horizontal, vertical
+//   inputWidth="250px"
+//   minWidth="100px"
+// />
 
-  // import InputText from "@eturnity/eturnity_reusable_components/src/components/inputs/inputText"
-  // To use:
-  // <input-text
-  //   placeholder="Company name"
-  //   :value="companyName"
-  //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
-  //   :isError="checkErrors()"
-  //   :errorMessage="This is my error message"
-  //   infoTextAlign="right" // left by default
-  //   infoTextMessage="My info message"
-  //   label="Question 5"
-  //   alignItems="horizontal" // horizontal, vertical
-  //   inputWidth="250px"
-  //   minWidth="100px"
-  // />
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  placeholder: 'Company name',
-  disabled: false,
-  value: '',
-  inputWidth: '200px',
-  minWidth: '10ch',
-  unitName: 'pc',
-  isError: false,
-  textAlign: 'left',
+export const Default = {
+  args: {
+    placeholder: 'Company name',
+    disabled: false,
+    value: '',
+    inputWidth: '200px',
+    minWidth: '10ch',
+    isError: false,
+    label: 'label test',
+    labelOptional: true,
+  },
 }
 
-export const hasError = Template.bind({})
-hasError.args = {
-  placeholder: 'Enter Value',
-  errorMessage: 'This field is required',
-  isError: true,
-  disabled: false,
-  inputWidth: '200px',
+export const HasError = {
+  args: {
+    placeholder: 'Enter Value',
+    errorMessage: 'This field is required',
+    isError: true,
+    disabled: false,
+    inputWidth: '200px',
+  },
 }
 
-export const Disabled = Template.bind({})
-Disabled.args = {
-  placeholder: 'Enter Value',
-  disabled: true,
-  value: '',
-  inputWidth: '200px',
-  isError: false,
+export const Disabled = {
+  args: {
+    placeholder: 'Enter Value',
+    disabled: true,
+    value: '',
+    inputWidth: '200px',
+    isError: false,
+  },
 }
 
-export const WithLabel = Template.bind({})
-WithLabel.args = {
-  placeholder: 'Company name',
-  disabled: false,
-  label: 'What is the best company in Switzerland?',
-  value: 'Eturnity',
-  inputWidth: '200px',
-  unitName: 'pc',
-  isError: false,
-  errorMessage: 'Maximum 5 characters',
-  textAlign: 'left',
-  alignItems: 'vertical',
+export const WithLabel = {
+  args: {
+    placeholder: 'Company name',
+    disabled: false,
+    label: 'What is the best company in Switzerland?',
+    value: 'Eturnity',
+    inputWidth: '200px',
+    unitName: 'pc',
+    isError: false,
+    errorMessage: 'Maximum 5 characters',
+    alignItems: 'vertical',
+  },
 }

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

@@ -2,22 +2,26 @@
   <Container>
     <InputWrapper
       :align-items="alignItems"
+      data-test-id="input_wrapper"
       :has-label="!!label && label.length > 0"
     >
       <LabelWrapper v-if="label">
         <InputLabel
+          ref="label"
           :data-id="labelDataId"
+          data-test-id="label_wrapper"
           :font-size="fontSize"
           :label-font-color="labelFontColor"
         >
           {{ label }}
-          <OptionalLabel v-if="labelOptional">
+          <OptionalLabel v-if="labelOptional" data-test-id="label_optional">
             ({{ $gettext('Optional') }})
           </OptionalLabel>
         </InputLabel>
         <InfoText
-          v-if="infoTextMessage"
+          v-if="infoTextMessage != ''"
           :align-arrow="infoTextAlign"
+          data-test-id="info_text_message"
           :size="fontSize ? fontSize : '16px'"
           :text="infoTextMessage"
         />
@@ -28,6 +32,7 @@
             ref="inputElement"
             :background-color="backgroundColor"
             :data-id="inputDataId"
+            data-test-id="input"
             :disabled="disabled"
             :disabled-background-color="disabledBackgroundColor"
             :font-color="fontColor"
@@ -50,16 +55,20 @@
           />
           <IconWrapper
             v-if="inputType === 'password' && !isError"
+            data-test-id="password_visiblity_change_icon"
             size="20px"
             @click="toggleShowPassword()"
           >
             <Icon name="current_variant" size="20px" />
           </IconWrapper>
-          <IconWrapper v-if="hasError" size="16px">
+          <IconWrapper v-if="hasError" data-test-id="error_wrapper" size="16px">
             <Icon cursor="default" name="warning" size="16px" />
           </IconWrapper>
         </IconContainer>
-        <ErrorMessage v-if="hasError && hasErrorMessage">
+        <ErrorMessage
+          v-if="hasError && hasErrorMessage"
+          data-test-id="error_message_wrapper"
+        >
           {{ dynamicErrorMessage }}
         </ErrorMessage>
       </InputErrorWrapper>
@@ -237,93 +246,123 @@
       placeholder: {
         required: false,
         default: '',
+        type: String,
       },
       alignItems: {
         required: false,
         default: 'horizontal',
+        type: String,
+        validator(value) {
+          return ['horizontal', 'vertical'].includes(value)
+        },
       },
       isError: {
         required: false,
         default: false,
+        type: Boolean,
       },
       inputWidth: {
         required: false,
         default: null,
+        type: String,
       },
       inputHeight: {
         required: false,
         default: null,
+        type: String,
       },
       minWidth: {
         required: false,
         default: null,
+        type: String,
       },
       value: {
         required: true,
         default: null,
+        type: String,
       },
       errorMessage: {
         required: false,
         default: '',
+        type: String,
       },
       infoTextMessage: {
         required: false,
+        default: '',
+        type: String,
       },
       infoTextAlign: {
         required: false,
+        default: 'left',
+        type: String,
       },
       label: {
         required: false,
+        default: '',
+        type: String,
       },
       labelOptional: {
         required: false,
         default: false,
+        type: Boolean,
       },
       noBorder: {
         required: false,
         default: false,
+        type: Boolean,
       },
       disabled: {
         required: false,
         default: false,
+        type: Boolean,
       },
       fontSize: {
         required: false,
         default: null,
+        type: String,
       },
       inputType: {
         required: false,
         default: 'text',
+        type: String,
       },
       labelFontColor: {
         required: false,
         default: 'black',
+        type: String,
       },
       backgroundColor: {
         required: false,
+        type: String,
       },
       disabledBackgroundColor: {
         required: false,
         default: null,
+        type: String,
       },
       fontColor: {
         required: false,
         default: 'black',
+        type: String,
       },
       hasFocus: {
         required: false,
         default: false,
+        type: Boolean,
       },
       borderColor: {
         required: false,
+        type: String,
       },
       labelDataId: {
         required: false,
         default: '',
+        type: String,
       },
       inputDataId: {
         required: false,
         default: '',
+        type: String,
       },
     },
     data() {
@@ -336,12 +375,10 @@
         return this.isError || this.error
       },
       hasErrorMessage() {
-        return (
-          (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
-        )
+        return this.errorMessage && this.errorMessage.length > 0
       },
       dynamicErrorMessage() {
-        return this.errMessage || this.errorMessage
+        return this.errorMessage
       },
     },
     watch: {

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

@@ -0,0 +1,588 @@
+/* eslint-disable */
+import { mount, Wrapper } from '@vue/test-utils'
+import RCInputText from '@/components/inputs/inputText/index'
+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')),
+}))
+
+const wrapper1 = mount(RCInputText, {
+  props: {
+    placeholder: 'placeholderText',
+    value: 'Test value',
+    label: 'Test label',
+  },
+  global: {
+    provide: {
+      theme,
+    },
+  },
+})
+const wrapperPassword = mount(RCInputText, {
+  props: {
+    placeholder: 'placeholderText',
+    value: 'Test value',
+    label: 'Test label',
+    inputType: 'password',
+  },
+  global: {
+    provide: {
+      theme,
+    },
+  },
+})
+describe('RCInputText.vue', () => {
+  let consoleWarnSpy
+  beforeEach(() => {
+    consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+  })
+  afterEach(() => {
+    consoleWarnSpy.mockRestore()
+  })
+  // initial rendering
+  it('input is rendered', async () => {
+    const inputTextWrapper = wrapper1.find('[data-test-id="input_wrapper"]')
+    expect(inputTextWrapper.exists()).toBe(true)
+  })
+  // event management
+  it('input is rendered and emits inputChange when input event is triggered.', async () => {
+    const inputElement = wrapper1.find('input')
+    await inputElement.setValue('Test Input Value')
+    const emittedInputChangeEvent = wrapper1.emitted('input-change')
+    expect(emittedInputChangeEvent).toBeTruthy()
+    expect(emittedInputChangeEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    expect(emittedInputChangeEvent[0]).toEqual(['Test Input Value'])
+  })
+  it('input emits on-enter-click', async () => {
+    const inputElement = wrapper1.find('input')
+    await inputElement.trigger('keyup.enter')
+    const emittedOnEnterClickEvent = wrapper1.emitted('on-enter-click')
+    expect(emittedOnEnterClickEvent).toBeTruthy()
+    expect(emittedOnEnterClickEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    expect(emittedOnEnterClickEvent[0]).toEqual([]) // Check if the event was emitted exactly once
+  })
+  it('input emits on-blur', async () => {
+    const inputElement = wrapper1.find('input')
+    await inputElement.setValue('Test Input Value')
+    await inputElement.trigger('blur')
+    const emittedOnBlurEvent = wrapper1.emitted('input-blur')
+    expect(emittedOnBlurEvent).toBeTruthy()
+    expect(emittedOnBlurEvent).toHaveLength(1) // Check if the event was emitted exactly once
+    expect(emittedOnBlurEvent[0]).toEqual(['Test Input Value']) // Check if the event was emitted exactly once
+  })
+  it('input password visibility click trigger input type change', async () => {
+    const inputElement = wrapperPassword.find('input')
+    const passwordVisibilityIconElement = wrapperPassword.find(
+      '[data-test-id="password_visiblity_change_icon"]'
+    )
+    expect(passwordVisibilityIconElement.exists()).toBe(true)
+    await passwordVisibilityIconElement.trigger('click')
+    let inputType = inputElement.attributes().type
+    expect(inputType).toBe('text')
+    await passwordVisibilityIconElement.trigger('click')
+    inputType = inputElement.attributes().type
+    expect(inputType).toBe('password')
+    await passwordVisibilityIconElement.trigger('click')
+    inputType = inputElement.attributes().type
+    expect(inputType).toBe('text')
+  })
+  //Test conditional visibility
+  it('label visibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        label: 'Test label',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const label = wrapper.find('[data-test-id="label_wrapper"]')
+    expect(label.exists()).toBe(true)
+    expect(label.text()).toContain('Test label')
+  })
+  it('label invisibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const label = wrapper.find('[data-test-id="label_wrapper"]')
+    expect(label.exists()).toBe(false)
+  })
+  it('label optional visibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        label: 'Test label',
+        labelOptional: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const labelOptional = wrapper.find('[data-test-id="label_optional"]')
+    expect(labelOptional.exists()).toBe(true)
+  })
+  it('label optional invisibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const labelOptional = wrapper.find('[data-test-id="label_optional"]')
+    expect(labelOptional.exists()).toBe(false)
+  })
+  it('infoTextMessage visibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        infoTextMessage: 'infoTextMessage test',
+        label: 'Test label',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const InfoTextMessage = wrapper.find('[data-test-id="info_text_message"]')
+    expect(InfoTextMessage.exists()).toBe(true)
+  })
+  it('infoTextMessage invibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        label: 'Test label',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const InfoTextMessage = wrapper.find('[data-test-id="info_text_message"]')
+    expect(InfoTextMessage.exists()).toBe(false)
+  })
+  it('error visibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        isError: true,
+        errorMessage: 'Error message test',
+        label: 'Test label',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const errorWrapper = wrapper.find('[data-test-id="error_wrapper"]')
+    const errorMessageWrapper = wrapper.find(
+      '[data-test-id="error_message_wrapper"]'
+    )
+    expect(errorWrapper.exists()).toBe(true)
+    expect(errorMessageWrapper.exists()).toBe(true)
+    expect(errorMessageWrapper.text()).toContain('Error message test')
+  })
+  it('error invibility check', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'Test value',
+        label: 'Test label',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const errorWrapper = wrapper.find('[data-test-id="error_wrapper"]')
+    const errorMessageWrapper = wrapper.find(
+      '[data-test-id="error_message_wrapper"]'
+    )
+    expect(errorWrapper.exists()).toBe(false)
+    expect(errorMessageWrapper.exists()).toBe(false)
+  })
+  //Test that the component handles different prop types correctly and throws appropriate warnings for invalid props.
+  it('validation of prop type - placeholder - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        placeholder: 42,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - alignItems - not horizontal or vertical', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'value test',
+        alignItems: 'top',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - isError - not Boolean', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'value test',
+        isError: 'true',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - inputWidth - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'value test',
+        inputWidth: 200,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - inputHeight - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'value test',
+        inputHeight: 200,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - minWidth - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'value test',
+        minWidth: 200,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - value - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 42,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - errorMessage - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'test value',
+        errorMessage: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - infoTextMessage - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'test value',
+        infoTextMessage: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - infoTextAlign - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'test value',
+        infoTextAlign: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - label - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'test value',
+        label: true,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - labelOptional - not Boolean', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'test value',
+        labelOptional: 12,
+        label: 'label test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    wrapper.vm.$gettext.mockReturnValue('Translated Message')
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - noBorder - not Boolean', async () => {
+    mount(RCInputText, {
+      props: {
+        value: 'test value',
+        noBorder: 1,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - disabled - not Boolean', async () => {
+    mount(RCInputText, {
+      props: {
+        disabled: 'false',
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - fontSize - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        fontSize: true,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - inputType - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        inputType: true,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - labelFontColor - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        labelFontColor: true,
+        value: 'value test',
+        label: 'label text',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - backgroundColor - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        backgroundColor: true,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - disabledBackgroundColor - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        disabledBackgroundColor: true,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - fontColor - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        fontColor: true,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - hasFocus - not Boolean', async () => {
+    mount(RCInputText, {
+      props: {
+        hasFocus: 'true',
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - borderColor - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        borderColor: 42,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - labelDataId - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        labelDataId: 42,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  it('validation of prop type - inputDataId - not String', async () => {
+    mount(RCInputText, {
+      props: {
+        inputDataId: 42,
+        value: 'value test',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    expect(consoleWarnSpy).toHaveBeenCalled()
+  })
+  //Prop Updates: Verify that the component updates correctly when props change, reflecting new values in the rendered output.
+  it('update of prop hasFocus', async () => {
+    const wrapper = mount(RCInputText, {
+      props: {
+        value: 'value test',
+        hasFocus: false,
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
+    })
+    const inputElement = wrapper.find('input').element
+    jest.spyOn(inputElement, 'focus').mockImplementation(() => {
+      // Simulate that the input element is now the focused element
+      Object.defineProperty(document, 'activeElement', {
+        value: inputElement,
+        configurable: true,
+      })
+    })
+    await wrapper.setProps({ hasFocus: true })
+    await wrapper.vm.$nextTick()
+    expect(document.activeElement).toBe(wrapper.find('input').element)
+  })
+})

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

@@ -22,15 +22,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 +95,38 @@
     },
     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],
       },
       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()
+  })
+})