visua-vue/test/VButton.spec.ts

import { mount } from '@vue/test-utils'
import VButton from '@/components/button/VButton.vue'
import {test, expect, describe} from 'vitest'

describe('VButton', () => {
  test('Displays button label', () => {
    const wrapper = mount(VButton, {
      props: {
        label: 'button label',
        title: 'button'
      }
    })
    // Check that the props label has gone through
    expect(wrapper.props('label')).toBe('button label')
    // Checks that the rendering contains the expected value
    expect(wrapper.text()).toContain('button label')
  });

  test('Displays only icon button when iconOnly props is set', () => {
    const wrapper = mount(VButton, {
      props: {
        icon: 'ri-settings-4-line',
        iconOnly: true,
        label: 'label',
        title: 'button'
      }
    })
    const button = wrapper.find('button')
    // check the rendering doesn't contain any button label
    expect(button.text()).toBe('')
    // Check the icon is present
    const icon = button.find('.p-button-icon')
    expect(icon.exists()).toBe(true)
    expect(icon.classes()).toContain('ri-settings-4-line')
    // check that the aria-label attribute is correctly defined
    expect(button.attributes('aria-label')).toBe('label')
  })

  test('Displays label and button icon when both are set', () => {
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
        icon: 'ri-settings-4-line'
      }
    })
    const button = wrapper.find('button')
    // check the rendering contains button label value
    expect(button.text()).toBe('label')
    // Check the icon is present
    const icon = button.find('.p-button-icon')
    expect(icon.exists()).toBe(true)
    expect(icon.classes()).toContain('ri-settings-4-line')
    // check if the button icon is shown on left by default
    expect(icon.classes()).toContain('p-button-icon-left')
    // check that the aria-label attribute is correctly defined
    expect(button.attributes('aria-label')).toBe('label')
  })

  test('Displays button icon on right when iconRight props is set', () => {
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
        icon: 'ri-settings-4-line',
        iconRight: true
      }
    })
    const button = wrapper.find('button')
    // Check if button icon is on right
    const iconRight = button.find('.p-button-icon-right')
    expect(iconRight.exists()).toBe(true)
    expect(iconRight.classes()).not.toContain('p-button-icon-left')
  })
})