visua-vue/test/VLink.spec.ts

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

describe('VLink', () => {
  test('renders the label correctly', () => {
    const wrapper = mount(VLink, {
      props: {
        label: 'Link'
      }
    })
    expect(wrapper.text()).toContain('Link');
  })

  test('renders as an anchor tag when `href` is provided', () => {
    const wrapper = mount(VLink, {
      props: {label: 'External', href: 'https://example.com' }
    });

    const a = wrapper.find('a')
    expect(a.exists()).toBe(true);
    expect(a.attributes('href')).toBe('https://example.com');
  })

  test('disables the link when `disabled` is true', () => {
    const wrapper = mount(VLink, {
      props: {label: 'Disabled', disabled: true }
    })

    const button = wrapper.find('.p-button');
    expect(button.classes()).toContain('disabled');
    expect(button.attributes('aria-disabled')).toBe('true');
  });

  test('prevents click when disabled', async () => {
    const clickHandler = vi.fn();
    const wrapper = mount(VLink, {
      props: {label: 'Disabled', disabled: true, onClick: clickHandler}
    })

    await wrapper.trigger('click')
    expect(clickHandler).not.toHaveBeenCalled();
  });

  test('places icon on the right when `iconRight` is true', () => {
    const wrapper = mount(VLink, {
      props: {
        label: 'link',
        icon: "ri-external-link-line",
        iconRight: true,
      }
    })
    const icon = wrapper.find('.p-button-icon-right');
    expect(icon.exists()).toBe(true);
    expect(icon.classes()).toContain('ri-external-link-line');
  })
})