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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.39.4-EPDM-11717.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,13 +1,14 @@
 <template>
   <ComponentWrapper>
-    <IconWrapper :size="size">
+    <IconWrapper :size="type === 'dot' ? 'unset' : size">
       <IconImg
-        data-test-id="infoText_trigger"
         @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"
@@ -95,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;
   `
@@ -106,6 +115,7 @@
   export default {
     name: 'InfoText',
     components: {
+      Dot,
       IconWrapper,
       TextOverlay,
       ComponentWrapper,
@@ -114,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',
       },
@@ -136,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/radioButton/RadioButton.stories.js

@@ -1,77 +1,58 @@
-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,
-  tags: ['autodocs'],
+  // argTypes: {},
 }
 
-// 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"
-      />
-    `,
-  }
-}
+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 = {
-  ...defaultProps,
-}
-
-export const BlueCheckmark = Template.bind({})
-BlueCheckmark.args = {
-  ...defaultProps,
-  checkmarkColor: '#00f',
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  ...defaultProps,
-  size: 'small',
+  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 Vertical = Template.bind({})
-Vertical.args = {
-  ...defaultProps,
+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',
 }

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

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

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

@@ -1,33 +0,0 @@
-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/radioButton.spec.js

@@ -1,269 +0,0 @@
-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,
-      })
-    })
-})