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

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

@@ -15,6 +15,7 @@
         <Radio
           :checked="selectedOption === item.value"
           :data-id="`radio_button_${dataId}_option_${item.value}`"
+          :data-qa-id="dataQaId"
           :data-test-id="'radioInput_' + item.value"
           :disabled="item.disabled"
           :name="'radioButtons_' + radioName"
@@ -280,6 +281,10 @@
         required: false,
         type: String,
       },
+      dataQaId: {
+        type: String,
+        default: '',
+      },
     },
     emits: ['on-radio-change'],
     data() {

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

@@ -114,9 +114,7 @@ describe('RadioButton.vue', () => {
     const checkedWrapper = checkedWrapperArray[0]
     const checkedRadioInput = checkedWrapper.find('input[type="radio"]')
     const defaultValueFromProps = radioButtons.props('selectedOption')
-    expect(checkedRadioInput.attributes('value')).toBe(
-      defaultValueFromProps
-    )
+    expect(checkedRadioInput.attributes('value')).toBe(defaultValueFromProps)
 
     // Log attributes to see what is rendered (commented out just for reference)
     // console.log('checkedRadioInput attributes', checkedRadioInput.attributes())
@@ -238,7 +236,9 @@ describe('RadioButton.vue', () => {
       const valueOfTestedRadioWrapper = testedRadioWrapper
         .attributes('data-test-id')
         .replace('radioWrapper_', '')
-      const expectedText = defaultRadioButtonProps.options.find((el) => el.value === valueOfTestedRadioWrapper).infoText
+      const expectedText = defaultRadioButtonProps.options.find(
+        (el) => el.value === valueOfTestedRadioWrapper
+      ).infoText
       const iconForHover = testedRadioWrapper.find(
         '[data-test-id="infoText_trigger"]'
       )

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"
@@ -128,6 +129,11 @@
         default: '',
         type: [String, Number],
       },
+      dataQaId: {
+        required: false,
+        default: '',
+        type: String,
+      },
       iconPosition: {
         type: String,
         default: 'right',

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