@eturnity/eturnity_reusable_components 8.19.7 → 8.19.8--EPDM-11697.0

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

@@ -1,4 +1,4 @@
-import { mount, DOMWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import RadioButton from '@/components/inputs/radioButton'
 import defaultRadioButtonProps from './defaultProps'
 import theme from '@/assets/theme'
@@ -9,298 +9,76 @@ jest.mock('@/components/icon/iconCache.mjs', () => ({
 }))
 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 = {}
+// Mock Icon component
+jest.mock('@/components/icon', () => ({
+  name: 'Icon',
+  template: '<div class="mock-icon"></div>',
+}))
 
-    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))
-        })
-      }
-    })
+// Mock InfoText component
+jest.mock('@/components/infoText', () => ({
+  name: 'InfoText',
+  template:
+    '<div :data-test-id="\'radioInfo_\' + optionValue">{{ text }}</div>',
+  props: ['text', 'size', 'optionValue'],
+}))
 
-    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'))
-        )
-      }
+describe('RadioButton.vue', () => {
+  let wrapper
+  const options = [
+    { value: 'option_1', label: 'Option 1' },
+    { value: 'option_2', label: 'Option 2' },
+    { value: 'option_3', label: 'Option 3', disabled: true },
+  ]
+
+  beforeEach(() => {
+    wrapper = mount(RadioButton, {
+      props: {
+        options,
+        modelValue: 'option_1',
+        selectedOption: 'option_1',
+      },
+      global: {
+        provide: {
+          theme,
+        },
+      },
     })
+  })
 
-    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 || 0
-
-      // Test RadioWrapper with disabled element
-      const disabledWrapperArray = findRadioWrappersByCriteria(['disabled'])
-      if (disabledWrapperArray.length > 0) {
-        const disabledLabelWrapper = disabledWrapperArray[0].find('label')
-        if (disabledLabelWrapper.exists()) {
-          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')?.length || 0).toBe(
-            initialNumberOfEvents
-          )
-        }
-      }
-
-      // Get RadioWrapper with selected element
-      const checkedWrapperArray = findRadioWrappersByCriteria(['checked'])
-      if (checkedWrapperArray.length > 0) {
-        const checkedLabelWrapper = checkedWrapperArray[0].find('label')
-        if (checkedLabelWrapper.exists()) {
-          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')?.length || 0).toBe(
-            initialNumberOfEvents
-          )
-        }
-      }
-
-      // Get RadioWrapper with info icon
-      const arrayOfWrappersWithInfoIcons = findRadioWrappersByCriteria([
-        'active',
-        'unchecked',
-        'hasInfoIcon',
-      ])
-      if (arrayOfWrappersWithInfoIcons.length > 0) {
-        const infoIconForClick = arrayOfWrappersWithInfoIcons[0].find(
-          '[data-test-id="infoText_trigger"]'
-        )
-        if (infoIconForClick.exists()) {
-          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')?.length || 0).toBe(
-            initialNumberOfEvents
-          )
-        }
-      }
-
-      // Get RadioWrapper with image
-      const arrayOfWrappersWithImage = findRadioWrappersByCriteria([
-        'active',
-        'unchecked',
-        'hasImage',
-      ])
-      if (arrayOfWrappersWithImage.length > 0) {
-        const testedRadioWrapperWithImage = arrayOfWrappersWithImage[0]
-        const openImageWrapperTestId = testedRadioWrapperWithImage
-          .attributes('data-test-id')
-          .replace('radioWrapper_', 'radioOpenImage_')
-        const openImageWrapper = testedRadioWrapperWithImage.find(
-          `[data-test-id="${openImageWrapperTestId}"]`
-        )
-        if (openImageWrapper.exists()) {
-          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')?.length || 0).toBe(
-            initialNumberOfEvents
-          )
+  it('renders all radio button options', () => {
+    const radioButtons = wrapper.findAll('[data-test-id^="radioInput_"]')
+    expect(radioButtons).toHaveLength(options.length)
+  })
 
-          // 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}"]`
-          )
-          if (imageModalWrapper.exists()) {
-            expect(imageModalWrapper.attributes('class')).toContain('visible')
-            const imageWrapperTestId = testedRadioWrapperWithImage
-              .attributes('data-test-id')
-              .replace('radioWrapper_', 'radioImage_')
-            const imageWrapper = testedRadioWrapperWithImage.find(
-              `[data-test-id="${imageWrapperTestId}"]`
-            )
-            if (imageWrapper.exists()) {
-              const expectedImageSrc = imageWrapper.attributes('src')
-              const modalImage = imageModalWrapper.find('img')
-              if (modalImage.exists()) {
-                const modalImageSrc = modalImage.attributes('src')
-                expect(modalImageSrc).toBe(expectedImageSrc)
-              }
-            }
-            //Close the modal
-            const closeButton = radioButtons.find('.visible .close')
-            if (closeButton.exists()) {
-              await closeButton.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',
-      ])
+  it('emits on-radio-change when an option is selected', async () => {
+    const option2 = wrapper.find('[data-test-id="radioInput_option_2"]')
+    expect(option2.exists()).toBe(true)
 
-      // Ensure we have at least one wrapper with Info Icon
-      expect(arrayOfWrappersWithInfoIcon.length).toBeGreaterThan(0)
+    await option2.trigger('click')
+    expect(wrapper.emitted('on-radio-change')).toBeTruthy()
+    expect(wrapper.emitted('on-radio-change')[0]).toEqual(['option_2'])
+  })
 
-      //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"]'
-      )
+  it('does not emit when clicking disabled option', async () => {
+    const disabledOption = wrapper.find('[data-test-id="radioInput_option_3"]')
+    expect(disabledOption.exists()).toBe(true)
 
-      // Check if the icon exists before triggering the event
-      // expect(iconForHover.exists()).toBe(true)
+    await disabledOption.trigger('click')
+    expect(wrapper.emitted('on-radio-change')?.length || 0).toBe(0)
+  })
 
-      if (iconForHover.exists()) {
-        await iconForHover.trigger('mouseenter')
-        await radioButtons.vm.$nextTick() // Wait for the next tick to ensure reactivity
-        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,
-      })
-    })
+  it('shows info text when provided', async () => {
+    const optionsWithInfo = [
+      { value: 'option_1', label: 'Option 1', infoText: 'Test info text' },
+      { value: 'option_2', label: 'Option 2' },
+      { value: 'option_3', label: 'Option 3', disabled: true },
+    ]
+    await wrapper.setProps({ options: optionsWithInfo })
+    await wrapper.vm.$nextTick()
+
+    const infoText = wrapper.find('[data-test-id="radioInfo_option_1"]')
+    expect(infoText.exists()).toBe(true)
+    expect(infoText.text()).toBe('Test info text')
+  })
 })

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

@@ -124,7 +124,6 @@
         : props.size === 'small'
         ? '13px'
         : '16px'};
-    font-weight: 700;
   `
 
   const ToggleWrapper = styled('span', toggleAttrs)`

package/src/components/spinner/spinner.spec.js

@@ -20,10 +20,10 @@ describe('Spinner.vue', () => {
   it('it is rendered with initial props', async () => {
     await wrapper.vm.$nextTick()
     const componentWrapper = wrapper.find('[data-test-id="spinner_container"]')
-    const componentSvg = wrapper.find('[data-test-id="spinner_icon"]')
+    const spinnerWrapper = wrapper.find('[data-test-id="spinner_wrapper"]')
     // check that the element exists
     expect(componentWrapper.exists()).toBe(true)
-    expect(componentSvg.exists()).toBe(true)
+    expect(spinnerWrapper.exists()).toBe(true)
     expect(wrapper.vm.size).toBe('30px')
     expect(wrapper.vm.limitedToModal).toBe(false)
     expect(wrapper.vm.fullWidth).toBe(false)
@@ -35,11 +35,11 @@ describe('Spinner.vue', () => {
     const componentFullWrapper = wrapper.find(
       '[data-test-id="spinner_full_container"]'
     )
-    const componentSvg = wrapper.find('[data-test-id="spinner_full_icon"]')
+    const spinnerWrapper = wrapper.find('[data-test-id="spinner_full_wrapper"]')
     // check that the element exists
     expect(componentWrapper.exists()).toBe(false)
     expect(componentFullWrapper.exists()).toBe(true)
-    expect(componentSvg.exists()).toBe(true)
+    expect(spinnerWrapper.exists()).toBe(true)
     expect(wrapper.vm.size).toBe('30px')
     expect(wrapper.vm.limitedToModal).toBe(false)
     expect(wrapper.vm.fullWidth).toBe(true)
@@ -50,12 +50,12 @@ describe('Spinner.vue', () => {
     const componentFullWrapper = wrapper.find(
       '[data-test-id="spinner_full_container"]'
     )
-    const componentWrapper = wrapper.find('[data-test-id="spinner_wrapper"]')
-    const componentSvg = wrapper.find('[data-test-id="spinner_icon"]')
+    const componentWrapper = wrapper.find('[data-test-id="spinner_container"]')
+    const spinnerWrapper = wrapper.find('[data-test-id="spinner_wrapper"]')
     // check that the element exists
     expect(componentWrapper.exists()).toBe(true)
     expect(componentFullWrapper.exists()).toBe(false)
-    expect(componentSvg.exists()).toBe(true)
+    expect(spinnerWrapper.exists()).toBe(true)
     expect(wrapper.vm.size).toBe('30px')
     expect(wrapper.vm.limitedToModal).toBe(true)
     expect(wrapper.vm.fullWidth).toBe(false)

package/src/stories/Button.stories.js

@@ -1,48 +0,0 @@
-import MyButton from './Button.vue'
-
-// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
-export default {
-  title: 'Example/Button',
-  component: MyButton,
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: {
-      control: 'color',
-    },
-    onClick: {},
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['small', 'medium', 'large'],
-    },
-  },
-}
-
-// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-}
-
-export const Secondary = {
-  args: {
-    label: 'Button',
-  },
-}
-
-export const Large = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-}
-
-export const Small = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-}

package/src/stories/Button.vue

@@ -1,52 +0,0 @@
-<template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
-</template>
-
-<script>
-import './button.css';
-import { reactive, computed } from 'vue';
-
-export default {
-  name: 'my-button',
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    primary: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      validator: function (value) {
-        return ['small', 'medium', 'large'].indexOf(value) !== -1;
-      },
-    },
-    backgroundColor: {
-      type: String,
-    },
-  },
-
-  emits: ['click'],
-
-  setup(props, { emit }) {
-    props = reactive(props);
-    return {
-      classes: computed(() => ({
-        'storybook-button': true,
-        'storybook-button--primary': props.primary,
-        'storybook-button--secondary': !props.primary,
-        [`storybook-button--${props.size || 'medium'}`]: true,
-      })),
-      style: computed(() => ({
-        backgroundColor: props.backgroundColor,
-      })),
-      onClick() {
-        emit('click');
-      },
-    };
-  },
-};
-</script>