@eturnity/eturnity_reusable_components 7.39.4-EPDM-11313-EPDM-11314.0 → 7.39.4-EPDM-11716.0

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/RadioButton.stories.js

@@ -1,58 +1,58 @@
-import RadioButton from './index.vue'
-
-export default {
-  title: 'RadioButton',
-  component: RadioButton,
-  // argTypes: {},
-}
-
-const Template = (args, { argTypes }) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { RadioButton },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  props: Object.keys(argTypes),
-  template: '<radio-button v-bind="$props" />',
-
-  // import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
-  // To use:
-  // <radio-button
-  //     :options="radioOptions"
-  //     :selectedOption="checkedOption"
-  //     @on-radio-change="onInputChange($event)"
-  //     layout="vertical"
-  //     size="large"
-  //   />
-  // Data being passed should look like:
-  // radioOptions: [
-  // { label: 'Button 1', value: 'button_1', img: 'www.imagesrc.com', infoText: 'my info text' },
-  // { label: 'Button 2', value: 'button_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
-  // { label: 'Button 3', value: 'button_3', img: 'www.imagesrc.com', disabled: true },
-  // { label: 'Button 4', value: 'button_4', disabled: true }
-  // ]
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  options: [
-    { label: 'Button 1', value: 'button_1', infoText: 'my info text' },
-    { label: 'Button 2', value: 'button_2', infoText: 'my info text 2' },
-    { label: 'Button 3', value: 'button_3', disabled: true },
-    { label: 'Button 4', value: 'button_4', disabled: true },
-  ],
-  selectedOption: 'button_2',
-  layout: 'horizontal',
-  size: 'medium',
-}
-
-export const VerticalLayout = Template.bind({})
-VerticalLayout.args = {
-  options: [
-    { label: 'Button 1', value: 'button_1' },
-    { label: 'Button 2', value: 'button_2' },
-    { label: 'Button 3', value: 'button_3' },
-    { label: 'Button 4', value: 'button_4', disabled: true },
-  ],
-  selectedOption: 'button_2',
-  layout: 'vertical',
-  size: 'medium',
-}
+import RadioButton from './index.vue'
+
+export default {
+  title: 'RadioButton',
+  component: RadioButton,
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { RadioButton },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: '<radio-button v-bind="$props" />',
+
+  // import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
+  // To use:
+  // <radio-button
+  //     :options="radioOptions"
+  //     :selectedOption="checkedOption"
+  //     @on-radio-change="onInputChange($event)"
+  //     layout="vertical"
+  //     size="large"
+  //   />
+  // Data being passed should look like:
+  // radioOptions: [
+  // { label: 'Button 1', value: 'button_1', img: 'www.imagesrc.com', infoText: 'my info text' },
+  // { label: 'Button 2', value: 'button_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
+  // { label: 'Button 3', value: 'button_3', img: 'www.imagesrc.com', disabled: true },
+  // { label: 'Button 4', value: 'button_4', disabled: true }
+  // ]
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  options: [
+    { label: 'Button 1', value: 'button_1', infoText: 'my info text' },
+    { label: 'Button 2', value: 'button_2', infoText: 'my info text 2' },
+    { label: 'Button 3', value: 'button_3', disabled: true },
+    { label: 'Button 4', value: 'button_4', disabled: true },
+  ],
+  selectedOption: 'button_2',
+  layout: 'horizontal',
+  size: 'medium',
+}
+
+export const VerticalLayout = Template.bind({})
+VerticalLayout.args = {
+  options: [
+    { label: 'Button 1', value: 'button_1' },
+    { label: 'Button 2', value: 'button_2' },
+    { label: 'Button 3', value: 'button_3' },
+    { label: 'Button 4', value: 'button_4', disabled: true },
+  ],
+  selectedOption: 'button_2',
+  layout: 'vertical',
+  size: 'medium',
+}