Skip to content
On this page

Testeando Radio

appRadio.spec.ts

ts
import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import AppRadio from '@/components/AppRadio.vue'

describe('AppRadio', () => {
  const factory = (props = {}, attrs = {} ) => {
    return mount(AppRadio, {
      props: {
        value: '0',
        ...props
      },
      attrs: { ...attrs } 
    })
  }
  
  it('should be initialized blank and no title', () => {
    const wrapper = factory()

    expect(wrapper.html()).not.toContain('Title')
    expect(wrapper.find('label').exists()).toBe(false)
    expect(wrapper.props()).toEqual(
      { label: '', modelValue: '', value: '0' }
    )
  })

  it('should render label by passing property to', () => {
    const wrapper = factory({ label: 'Title' })
    const label = wrapper.find('label')

    expect(label.exists()).toBe(true)
    expect(label.html()).toContain('Title')
    expect(wrapper.props().label).toEqual('Title')
  })

  it('should emit 0 value by default when fire', async () => {
    const wrapper = factory()
    //const radio = wrapper.find('input[type="radio"]')
    const radio = wrapper.find('input')

    await radio.trigger('change')

    expect(
      wrapper.emitted()['update:modelValue'][0][0]
    ).toEqual('0')
  })

  it('should be truthy when set checked', async () => {
    const wrapper = factory()
    const radio = wrapper.find('input')

    await radio.setChecked()

    expect(radio.element.checked).toBeTruthy()
  })

  it('should be truthy when value is equal to modelValue', async () => {
    const wrapper = factory({ modelValue: '0' }) 
    const radio = wrapper.find('input')

    expect(radio.element.checked).toBeTruthy()
  })

  it('should be falsy when value is not equal to modelValue', async () => {
    const wrapper = factory({ modelValue: '1' })
    const radio = wrapper.find('input')

    expect(radio.element.checked).toBeFalsy()
  })

  it('should be truthy when value is checked', async () => {
    const wrapper = factory({}, { checked: true })
    const radio = wrapper.find('input')

    expect(radio.element.checked).toBeTruthy()
  })

  it('should be falsy when value is unchecked', async () => {
    const wrapper = factory({}, { checked: false })
    const radio = wrapper.find('input')

    expect(radio.element.checked).toBeFalsy()
  })

  it('should set the attributes to the input-radio element', () => {
    const wrapper = factory({ label: 'label' }, { name: 'name' })    
    const label = wrapper.find('label')
    const radio = wrapper.find('input')

    expect(radio.attributes().name).toEqual('name')
    expect(label.attributes()).toEqual({})
  })
})