@eturnity/eturnity_reusable_components 7.39.4 → 7.45.0

package/package.json

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

package/src/components/infoText/index.vue

@@ -2,6 +2,7 @@
   <ComponentWrapper>
     <IconWrapper :size="size">
       <IconImg
+        data-test-id="infoText_trigger"
         @click.prevent="toggleShowInfo()"
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"

package/src/components/inputs/radioButton/RadioButton.stories.js

@@ -1,58 +1,77 @@
+import { useArgs } from '@storybook/preview-api'
+import { action } from '@storybook/addon-actions'
+import defaultRadioButtonProps from './defaultProps'
 import RadioButton from './index.vue'
 
 export default {
   title: 'RadioButton',
   component: RadioButton,
-  // argTypes: {},
+  tags: ['autodocs'],
 }
 
-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 }
-  // ]
-})
+// To use:
+// import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
+// <radio-button
+//     checkmarkColor="red"
+//     dataId="radio_button"
+//     layout="horizontal" //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+//     name="Name for Radio buttons"
+//     :options="radioOptions"
+//     :selectedOption="checkedOption"
+//     size="medium" // small, medium, large
+//     @on-radio-change="onInputChange($event)"
+//   />
+// Data being passed should look like:
+// radioOptions: [
+//  { label: 'Option 1', value: 'option_1', img: 'www.imagesrc.com', infoText: 'my info text' },
+//  { label: 'Option 2', value: 'option_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
+//  { label: 'Option 3', value: 'option_3', img: 'www.imagesrc.com', disabled: true },
+//  { label: 'Option 4', value: 'option_4', disabled: true }
+// ]
+
+const defaultProps = defaultRadioButtonProps
+
+const Template = (args) => {
+  const [currentArgs, updateArgs] = useArgs()
+
+  const handleRadioChange = ($event) => {
+    action('on-radio-change')($event)
+    updateArgs({ selectedOption: $event })
+  }
+
+  return {
+    components: { RadioButton },
+    setup() {
+      return { args: currentArgs, handleRadioChange }
+    },
+    template: `
+      <RadioButton
+        v-bind="args"
+        @on-radio-change="handleRadioChange"
+      />
+    `,
+  }
+}
 
 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',
+  ...defaultProps,
+}
+
+export const BlueCheckmark = Template.bind({})
+BlueCheckmark.args = {
+  ...defaultProps,
+  checkmarkColor: '#00f',
+}
+
+export const Small = Template.bind({})
+Small.args = {
+  ...defaultProps,
+  size: 'small',
 }
 
-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',
+export const Vertical = Template.bind({})
+Vertical.args = {
+  ...defaultProps,
   layout: 'vertical',
-  size: 'medium',
 }

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

@@ -0,0 +1,33 @@
+const defaultRadioButtonProps = {
+  dataId: 'radio_buttons',
+  name: 'options',
+  options: [
+    {
+      label: 'Option 1',
+      value: 'option_1',
+      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/solar_img_i.png',
+    },
+    {
+      label: 'Option 2',
+      value: 'option_2',
+      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/switcher_img_i.png',
+      infoText: 'Option 2 info text',
+    },
+    {
+      label: 'Option 3',
+      value: 'option_3',
+      img: 'https://staging-01-backend.eturnity.dev/static/e_templates/base/styles/varta_img_i.png',
+      infoText: 'Option 3 info text',
+      disabled: true,
+    },
+    {
+      label: 'Option 4',
+      value: 'option_4',
+      disabled: true,
+      infoText: 'Option 4 info text',
+    },
+  ],
+  selectedOption: 'option_2',
+}
+
+export default defaultRadioButtonProps

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

@@ -1,6 +1,10 @@
 <template>
   <ComponentWrapper :layout="layout">
-    <RadioWrapper v-for="(item, index) in options" :key="item.value">
+    <RadioWrapper
+      v-for="(item, index) in options"
+      :key="item.value"
+      :data-test-id="'radioWrapper_' + item.value"
+    >
       <LabelContainer
         :checkmark-color="checkmarkColor"
         :has-label="!!item.label"
@@ -11,6 +15,7 @@
         <Radio
           :checked="selectedOption === item.value"
           :data-id="`radio_button_${dataId}_option_${item.value}`"
+          :data-test-id="'radioInput_' + item.value"
           :disabled="item.disabled"
           :name="'radioButtons_' + radioName"
           type="radio"
@@ -18,15 +23,32 @@
           @click="onInputHandler(item.value)"
         />
         <span class="checkmark"></span>
-        <LabelText v-if="item.label" :is-disabled="item.disabled">
+        <LabelText
+          v-if="item.label"
+          :data-test-id="'radioLabel_' + item.value"
+          :is-disabled="item.disabled"
+        >
           {{ item.label }}
         </LabelText>
-        <InfoText v-if="item.infoText" size="16px" :text="item.infoText" />
+        <InfoText
+          v-if="item.infoText"
+          :data-test-id="'radioInfo_' + item.value"
+          size="16px"
+          :text="item.infoText"
+        />
       </LabelContainer>
       <ImageContainer v-if="item.img">
-        <RadioImage :src="item.img" />
-        <div class="search-icn-container" @click="toggleImageModal(index)">
+        <RadioImage
+          :data-test-id="'radioImage_' + item.value"
+          :src="item.img"
+        />
+        <div
+          class="search-icn-container"
+          :data-test-id="'radioOpenImage_' + item.value"
+          @click="toggleImageModal(index)"
+        >
           <img
+            alt=""
             class="search-icn"
             :src="require('../../../assets/icons/search_icon.png')"
           />
@@ -34,6 +56,7 @@
       </ImageContainer>
       <Modal
         v-if="item.img"
+        :data-test-id="'radioModal_' + item.value"
         :is-open="isImageOpen(index)"
         @on-close="toggleImageModal(null)"
       >
@@ -49,18 +72,21 @@
   // import RadioButton from "@eturnity/eturnity_reusable_components/src/components/inputs/radioButton"
   // To use:
   // <radio-button
+  //     checkmarkColor="red"
+  //     dataId="radio_button"
+  //     layout="horizontal"
+  //     name="Name for Radio buttons"
   //     :options="radioOptions"
   //     :selectedOption="checkedOption"
-  //     @on-radio-change="onInputChange($event)"
-  //     layout="vertical"
   //     size="large"
+  //     @on-radio-change="onInputChange($event)"
   //   />
   // 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 }
+  //  { label: 'Option 1', value: 'option_1', img: 'www.imagesrc.com', infoText: 'my info text' },
+  //  { label: 'Option 2', value: 'option_2', img: 'www.imagesrc.com', infoText: 'my info text 2' },
+  //  { label: 'Option 3', value: 'option_3', img: 'www.imagesrc.com', disabled: true },
+  //  { label: 'Option 4', value: 'option_4', disabled: true }
   // ]
 
   import styled from 'vue3-styled-components'
@@ -82,7 +108,6 @@
     cursor: pointer;
     position: absolute;
     opacity: 0;
-    cursor: pointer;
     height: 0;
     width: 0;
   `
@@ -221,33 +246,42 @@
     props: {
       selectedOption: {
         required: true,
-        default: false,
+        type: [String, Number],
       },
       options: {
+        default() {
+          return []
+        },
         required: true,
-        default: [],
+        type: Array,
       },
       layout: {
-        required: false,
         default: 'horizontal', //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+        required: false,
+        type: String,
       },
       size: {
-        required: false,
         default: 'medium', // small, medium, large
+        required: false,
+        type: String,
       },
       name: {
-        required: false,
         default: '',
+        required: false,
+        type: String,
       },
       checkmarkColor: {
-        required: false,
         default: '',
+        required: false,
+        type: String,
       },
       dataId: {
-        type: String,
         default: 'key',
+        required: false,
+        type: String,
       },
     },
+    emits: ['on-radio-change'],
     data() {
       return {
         selectedImage: null,
@@ -260,7 +294,9 @@
     },
     methods: {
       onInputHandler(value) {
-        this.$emit('on-radio-change', value)
+        if (value !== this.selectedOption) {
+          this.$emit('on-radio-change', value)
+        }
       },
       isImageOpen(index) {
         return this.selectedImage === index

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

@@ -0,0 +1,269 @@
+import { mount, DOMWrapper } from '@vue/test-utils'
+import RadioButton from '@/components/inputs/radioButton'
+import defaultRadioButtonProps from './defaultProps'
+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')),
+}))
+jest.mock('../../../assets/icons/search_icon.png', () => 'search_icon.png')
+
+describe('RadioButton.vue', () => {
+  const radioButtons = mount(RadioButton, {
+    props: defaultRadioButtonProps,
+    global: {
+      provide: {
+        theme,
+      },
+    },
+  })
+  function findRadioWrappersByCriteria(criteria) {
+    // criteria === ['active', ..., 'hasImage'], can include any number of criteria
+    // This function is used for getting a list of
+    // RadioWrapper components which matches
+    // all the requested criteria (conjunctive filtering).
+    // Make sure that criteria don't contradict each other.
+    // List of possible criteria =
+    //  - active || disabled
+    //  - checked || unchecked
+    //  - hasInfoIcon
+    //  - hasImage
+
+    function getParentRadioWrapper(element) {
+      // function is used for getting a parent RadioWrapper component
+      const radioWrapper = element.element.closest(
+        '[data-test-id^="radioWrapper_"]'
+      )
+      return radioWrapper ? new DOMWrapper(radioWrapper) : null
+    }
+
+    const elementsWithTestIds = radioButtons.findAll('[data-test-id]')
+    let resultsObject = {}
+
+    criteria.forEach((criterion) => {
+      resultsObject[criterion] = []
+      if (criterion === 'active' || criterion === 'disabled') {
+        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
+          element.attributes('data-test-id').startsWith('radioInput_')
+        )
+        criteriaRelatedElements.forEach((el) => {
+          const element = el.element
+          if (criterion === 'active' ? !element.disabled : element.disabled) {
+            resultsObject[criterion].push(getParentRadioWrapper(el))
+          }
+        })
+      }
+      if (criterion === 'checked' || criterion === 'unchecked') {
+        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
+          element.attributes('data-test-id').startsWith('radioInput_')
+        )
+        criteriaRelatedElements.forEach((el) => {
+          const element = el.element
+          if (criterion === 'checked' ? element.checked : !element.checked) {
+            resultsObject[criterion].push(getParentRadioWrapper(el))
+          }
+        })
+      }
+      if (criterion === 'hasInfoIcon') {
+        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
+          element.attributes('data-test-id').startsWith('radioInfo_')
+        )
+        criteriaRelatedElements.forEach((element) => {
+          resultsObject[criterion].push(getParentRadioWrapper(element))
+        })
+      }
+      if (criterion === 'hasImage') {
+        const criteriaRelatedElements = elementsWithTestIds.filter((element) =>
+          element.attributes('data-test-id').startsWith('radioOpenImage_')
+        )
+        criteriaRelatedElements.forEach((element) => {
+          resultsObject[criterion].push(getParentRadioWrapper(element))
+        })
+      }
+    })
+
+    let resultArray = []
+    Object.keys(resultsObject).forEach((criterion, index) => {
+      if (index === 0) {
+        resultArray = [...resultsObject[criterion]]
+      } else {
+        resultArray = resultArray.filter((element) =>
+          resultsObject[criterion]
+            .map((item) => item.attributes('data-test-id'))
+            .includes(element.attributes('data-test-id'))
+        )
+      }
+    })
+
+    return resultArray
+  }
+
+  it('Radio buttons are rendered and emit correct payload on change', async () => {
+    //check that all the options have been rendered
+    let radioBtnWrappers = radioButtons.findAll('[data-test-id]')
+    radioBtnWrappers = radioBtnWrappers.filter((wrapper) =>
+      wrapper.attributes('data-test-id').startsWith('radioWrapper_')
+    )
+    const numberOfOptions = radioButtons.props('options').length
+    expect(radioBtnWrappers).toHaveLength(numberOfOptions)
+
+    // check that the selected element exists and there is only a single copy of it and has correct value
+    const checkedWrapperArray = findRadioWrappersByCriteria(['checked'])
+    expect(checkedWrapperArray.length).toBe(1)
+    const checkedWrapper = checkedWrapperArray[0]
+    const checkedRadioInput = checkedWrapper.find('input[type="radio"]')
+    const defaultValueFromProps = radioButtons.props('selectedOption')
+    expect(checkedRadioInput.attributes('value')).toBe(
+      defaultValueFromProps
+    )
+
+    // Log attributes to see what is rendered (commented out just for reference)
+    // console.log('checkedRadioInput attributes', checkedRadioInput.attributes())
+
+    // Test the label
+    const labelOfDefaultValue = radioButtons
+      .props('options')
+      .find((option) => option.value === defaultValueFromProps).label
+    expect(checkedWrapper.text()).toContain(labelOfDefaultValue)
+
+    // Test the click on unselected active element
+    const uncheckedWrapperArray = findRadioWrappersByCriteria([
+      'unchecked',
+      'active',
+    ])
+    const expectedValueOfEmittedEvent = uncheckedWrapperArray[0]
+      .attributes('data-test-id')
+      .replace('radioWrapper_', '')
+    const uncheckedLabelWrapper = uncheckedWrapperArray[0].find('label')
+    await uncheckedLabelWrapper.trigger('click')
+    expect(radioButtons.emitted('on-radio-change')).toBeTruthy()
+    const emittedEvents = radioButtons.emitted('on-radio-change')
+    expect(emittedEvents).toHaveLength(1) // Check if the event was emitted exactly once
+    // Check the payload of the event
+    expect(emittedEvents[emittedEvents.length - 1]).toEqual([
+      expectedValueOfEmittedEvent,
+    ])
+    await radioButtons.setProps({ selectedOption: expectedValueOfEmittedEvent })
+  }),
+    it('click on disabled element (|| selected element || info icon || image) does not emit anything', async () => {
+      // Remember the number of emitted events before triggering clicks
+      const initialNumberOfEvents =
+        radioButtons.emitted('on-radio-change').length
+
+      // Test RadioWrapper with disabled element
+      const disabledWrapperArray = findRadioWrappersByCriteria(['disabled'])
+      const disabledLabelWrapper = disabledWrapperArray[0].find('label')
+      await disabledLabelWrapper.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
+
+      // Get RadioWrapper with selected element
+      const checkedWrapperArray = findRadioWrappersByCriteria(['checked'])
+      const checkedLabelWrapper = checkedWrapperArray[0].find('label')
+      await checkedLabelWrapper.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
+
+      // Get RadioWrapper with info icon
+      const arrayOfWrappersWithInfoIcons = findRadioWrappersByCriteria([
+        'active',
+        'unchecked',
+        'hasInfoIcon',
+      ])
+      const infoIconForClick = arrayOfWrappersWithInfoIcons[0].find(
+        '[data-test-id="infoText_trigger"]'
+      )
+      await infoIconForClick.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
+
+      // Get RadioWrapper with image
+      const arrayOfWrappersWithImage = findRadioWrappersByCriteria([
+        'active',
+        'unchecked',
+        'hasImage',
+      ])
+      const testedRadioWrapperWithImage = arrayOfWrappersWithImage[0]
+      const openImageWrapperTestId = testedRadioWrapperWithImage
+        .attributes('data-test-id')
+        .replace('radioWrapper_', 'radioOpenImage_')
+      const openImageWrapper = testedRadioWrapperWithImage.find(
+        `[data-test-id="${openImageWrapperTestId}"]`
+      )
+      await openImageWrapper.trigger('click')
+      // Check if we still have the same number of emitted events as at the beginning
+      expect(radioButtons.emitted('on-radio-change')).toHaveLength(
+        initialNumberOfEvents
+      )
+
+      // Since we just clicked on image miniature
+      // lets check has the corresponding modal been opened
+      // and is the correct image displayed
+      const imageModalWrapperTestId = testedRadioWrapperWithImage
+        .attributes('data-test-id')
+        .replace('radioWrapper_', 'radioModal_')
+      const imageModalWrapper = testedRadioWrapperWithImage.find(
+        `[data-test-id="${imageModalWrapperTestId}"]`
+      )
+      expect(imageModalWrapper.attributes('class')).toContain('visible')
+      const imageWrapperTestId = testedRadioWrapperWithImage
+        .attributes('data-test-id')
+        .replace('radioWrapper_', 'radioImage_')
+      const imageWrapper = testedRadioWrapperWithImage.find(
+        `[data-test-id="${imageWrapperTestId}"]`
+      )
+      const expectedImageSrc = imageWrapper.attributes('src')
+      const modalImageSrc = imageModalWrapper.find('img').attributes('src')
+      expect(modalImageSrc).toBe(expectedImageSrc)
+      //Close the modal
+      radioButtons.find('.visible .close').trigger('click')
+      await radioButtons.vm.$nextTick()
+      expect(imageModalWrapper.attributes('class')).toContain('hidden')
+    }),
+    it('test hover on Info Icon', async () => {
+      // Get RadioWrapper with Info Icon
+      const arrayOfWrappersWithInfoIcon = findRadioWrappersByCriteria([
+        'hasInfoIcon',
+      ])
+      //Select tested item and get expected text within the info badge
+      const testedRadioWrapper =
+        arrayOfWrappersWithInfoIcon[arrayOfWrappersWithInfoIcon.length - 1]
+      const valueOfTestedRadioWrapper = testedRadioWrapper
+        .attributes('data-test-id')
+        .replace('radioWrapper_', '')
+      const expectedText = defaultRadioButtonProps.options.find((el) => el.value === valueOfTestedRadioWrapper).infoText
+      const iconForHover = testedRadioWrapper.find(
+        '[data-test-id="infoText_trigger"]'
+      )
+      await iconForHover.trigger('mouseenter')
+      expect(testedRadioWrapper.text()).toContain(expectedText)
+    }),
+    it('Test the click again after all the manipulations', async () => {
+      const uncheckedWrapperArray = findRadioWrappersByCriteria([
+        'unchecked',
+        'active',
+      ])
+      const expectedValueOfEmittedEvent = uncheckedWrapperArray[0]
+        .attributes('data-test-id')
+        .replace('radioWrapper_', '')
+      const uncheckedLabelWrapper = uncheckedWrapperArray[0].find('label')
+      await uncheckedLabelWrapper.trigger('click')
+      expect(radioButtons.emitted('on-radio-change')).toBeTruthy()
+      const emittedEvents = radioButtons.emitted('on-radio-change')
+      expect(emittedEvents).toHaveLength(2) // Check that this is just 2nd emitted event
+      // Check the payload of the event
+      expect(emittedEvents[emittedEvents.length - 1]).toEqual([
+        expectedValueOfEmittedEvent,
+      ])
+      await radioButtons.setProps({
+        selectedOption: expectedValueOfEmittedEvent,
+      })
+    })
+})