visua-vue/test/VButton.spec.ts

import { mount } from '@vue/test-utils'
import VButton from '@/components/button/VButton.vue'
import {test, expect, describe, vi} 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')
  })

  test('Disabled button', async () => {
    const onClick = vi.fn()
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
        disabled: true,
        onClick,
      }
    })
    const button = wrapper.find('button')
    await button.trigger('click')
    // check disabled props is set
    expect(button.attributes('disabled')).toBeDefined()
    // check aria-disabled atribute is set
    expect(button.attributes('aria-disabled')).toBe('true')
    // check that the onClck function hasn't been called
    expect(onClick).not.toHaveBeenCalled()
  })

  test('Clicked button', async () => {
    const onClick = vi.fn()
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
        onClick,
      }
    })
    const button = wrapper.find('button')
    await button.trigger('click')
    // check that the onClck function has been called
    expect(onClick).toHaveBeenCalled()
  })

  test('small button', () => {
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
        size: 'sm'
      }
    })
    const button = wrapper.find('button')
    expect(button.classes()).toContain('p-button-sm')
    expect(button.classes()).not.toContain('p-button-lg')
    expect(button.classes().some(c => c.includes('text-body-SM'))).toBe(true)
  })

  test('large button', () => {
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
        size: 'lg'
      }
    })
    const button = wrapper.find('button')
    expect(button.classes()).toContain('p-button-lg')
    expect(button.classes()).not.toContain('p-button-sm')
    expect(button.classes().some(c => c.includes('text-body-LG'))).toBe(true)
  })

  test('medium button', () => {
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
      }
    })
    const button = wrapper.find('button')
    expect(button.classes()).not.toContain('p-button-lg')
    expect(button.classes()).not.toContain('p-button-sm')
    expect(button.classes().some(c => c.includes('text-body-MD'))).toBe(true)
  })

  test('primary button', () => {
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
      }
    })
    const button = wrapper.find('button')
    expect(button.classes()).not.toContain('p-button-secondary')
    expect(button.classes()).not.toContain('p-button-outlined')
    expect(button.classes()).not.toContain('p-button-text')
    expect(button.classes()).not.toContain('p-button-danger')
  })

  test('secondary button', () => {
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
        secondary: true,
      }
    })
    const button = wrapper.find('button')
    expect(button.classes()).toContain('p-button-secondary')
    expect(button.classes()).toContain('p-button-outlined')
    expect(button.classes()).not.toContain('p-button-text')
    expect(button.classes()).not.toContain('p-button-danger')
    expect(button.attributes('data-p-severity')).toBe('secondary')
  })

  test('tertiary button', () => {
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
        tertiary: true
      }
    })
    const button = wrapper.find('button')
    expect(button.classes()).not.toContain('p-button-secondary')
    expect(button.classes()).toContain('p-button-outlined')
    expect(button.classes()).not.toContain('p-button-text')
    expect(button.classes()).not.toContain('p-button-danger')
  })

  test('no outlined button', () => {
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
        noOutline: true,
      }
    })
    const button = wrapper.find('button')
    expect(button.classes()).not.toContain('p-button-secondary')
    expect(button.classes()).not.toContain('p-button-outlined')
    expect(button.classes()).toContain('p-button-text')
    expect(button.classes()).not.toContain('p-button-danger')
  })

  test('danger variant button', () => {
    const wrapper = mount(VButton, {
      props: {
        title: 'button',
        label: 'label',
        danger: true,
      }
    })
    const button = wrapper.find('button')
    expect(button.classes()).not.toContain('p-button-secondary')
    expect(button.classes()).not.toContain('p-button-outlined')
    expect(button.classes()).not.toContain('p-button-text')
    expect(button.classes()).toContain('p-button-danger')
    expect(button.attributes('data-p-severity')).toBe('danger')
  })
})