@eturnity/eturnity_reusable_components 7.39.4-EPDM-11716.0 → 7.39.4-EPDM-10609.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.39.4-EPDM-11716.0",
+  "version": "7.39.4-EPDM-10609.1",
   "files": [
     "dist",
     "src"
@@ -63,6 +63,7 @@
     "jest-styled-components": "7.2.0",
     "jsdom": "24.1.1",
     "prettier": "2.8.4",
+    "styled-components": "^6.1.13",
     "vite": "4.0.0",
     "vite-svg-loader": "5.1.0",
     "vue-jest": "5.0.0-alpha.10",

package/src/assets/theme.js

@@ -11,6 +11,7 @@ const theme = {
     lightGray: '#f2f2f2',
     white: '#ffffff',
     blue: '#48a2d0',
+    blue2: '#6CD4D4',
     red: '#ff5656',
     blue1: '#e4efff',
     brightBlue: '#0068DE',

package/src/components/infoText/index.vue

@@ -1,12 +1,14 @@
 <template>
   <ComponentWrapper>
-    <IconWrapper :size="size">
+    <IconWrapper :size="type === 'dot' ? 'unset' : size">
       <IconImg
         @click.prevent="toggleShowInfo()"
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
+        <Dot v-if="type === 'dot'" :color="dotColor" />
         <IconComponent
+          v-else
           :color="iconColor"
           cursor="pointer"
           name="info"
@@ -94,6 +96,14 @@
     height: ${(props) => props.size};
   `
 
+  const Dot = styled('div')`
+    width: 5px;
+    height: 5px;
+    background-color: ${(props) => props.color};
+    border-radius: 50%;
+    display: inline-block;
+  `
+
   const IconImg = styled.div`
     line-height: 0;
   `
@@ -105,6 +115,7 @@
   export default {
     name: 'InfoText',
     components: {
+      Dot,
       IconWrapper,
       TextOverlay,
       ComponentWrapper,
@@ -113,21 +124,27 @@
     },
     props: {
       text: {
+        type: String,
         required: false,
+        default: '',
       },
       size: {
+        type: String,
         required: false,
         default: '14px',
       },
       alignArrow: {
+        type: String,
         required: false,
         default: 'center',
       },
       openTrigger: {
+        type: String,
         required: false,
         default: 'onHover', // onHover, onClick
       },
       width: {
+        type: String,
         required: false,
         default: '200px',
       },
@@ -135,6 +152,16 @@
         type: String,
         default: '400px',
       },
+      dotColor: {
+        type: String,
+        required: false,
+        default: theme.colors.blue2,
+      },
+      type: {
+        type: String,
+        required: false,
+        default: 'info', // info, dot
+      },
     },
     data() {
       return {

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

@@ -3,68 +3,73 @@ import InputText from './index.vue'
 export default {
   title: 'InputText',
   component: InputText,
-  tags: ['autodocs'],
+  // argTypes: {},
 }
 
-// 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"
-// />
+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" />',
 
-export const Default = {
-  args: {
-    placeholder: 'Company name',
-    disabled: false,
-    value: '',
-    inputWidth: '200px',
-    minWidth: '10ch',
-    isError: false,
-    label: 'label test',
-    labelOptional: true,
-  },
+  // 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 HasError = {
-  args: {
-    placeholder: 'Enter Value',
-    errorMessage: 'This field is required',
-    isError: true,
-    disabled: false,
-    inputWidth: '200px',
-  },
+export const hasError = Template.bind({})
+hasError.args = {
+  placeholder: 'Enter Value',
+  errorMessage: 'This field is required',
+  isError: true,
+  disabled: false,
+  inputWidth: '200px',
 }
 
-export const Disabled = {
-  args: {
-    placeholder: 'Enter Value',
-    disabled: true,
-    value: '',
-    inputWidth: '200px',
-    isError: false,
-  },
+export const Disabled = Template.bind({})
+Disabled.args = {
+  placeholder: 'Enter Value',
+  disabled: true,
+  value: '',
+  inputWidth: '200px',
+  isError: false,
 }
 
-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',
-  },
+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',
 }

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

@@ -2,26 +2,22 @@
   <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" data-test-id="label_optional">
+          <OptionalLabel v-if="labelOptional">
             ({{ $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"
         />
@@ -32,7 +28,6 @@
             ref="inputElement"
             :background-color="backgroundColor"
             :data-id="inputDataId"
-            data-test-id="input"
             :disabled="disabled"
             :disabled-background-color="disabledBackgroundColor"
             :font-color="fontColor"
@@ -54,20 +49,16 @@
           />
           <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" data-test-id="error_wrapper" size="16px">
+          <IconWrapper v-if="hasError" size="16px">
             <Icon cursor="default" name="warning" size="16px" />
           </IconWrapper>
         </IconContainer>
-        <ErrorMessage
-          v-if="hasError && hasErrorMessage"
-          data-test-id="error_message_wrapper"
-        >
+        <ErrorMessage v-if="hasError && hasErrorMessage">
           {{ dynamicErrorMessage }}
         </ErrorMessage>
       </InputErrorWrapper>
@@ -245,123 +236,93 @@
       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() {
@@ -374,10 +335,12 @@
         return this.isError || this.error
       },
       hasErrorMessage() {
-        return this.errorMessage && this.errorMessage.length > 0
+        return (
+          (this.errorMessage && this.errorMessage.length > 0) || this.errMessage
+        )
       },
       dynamicErrorMessage() {
-        return this.errorMessage
+        return this.errMessage || this.errorMessage
       },
     },
     watch: {

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

@@ -1,588 +0,0 @@
-/* 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)
-  })
-})