@mozaic-ds/vue/src/components/link/MLink.spec.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import { mount } from '@vue/test-utils';
import MLink from './MLink.vue';
import { describe, it, expect } from 'vitest';

describe('MLink component', () => {
  it('renders a link with default props', () => {
    const wrapper = mount(MLink);

    const link = wrapper.get('a');
    expect(link.classes()).toContain('mc-link');
  });

  it('renders as router-link when the "router" prop is true', () => {
    const wrapper = mount(MLink, {
      props: {
        router: true,
        href: '/internal',
      },
    });

    const link = wrapper.getComponent('router-link');
    expect(link.exists()).toBe(true);
    expect(link.attributes('to')).toBe('/internal');
  });

  it('renders as a regular anchor when the "router" prop is false or undefined', () => {
    const wrapper = mount(MLink, {
      props: {
        href: 'https://example.com',
      },
    });

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

  it('renders without an icon', () => {
    const wrapper = mount(MLink, {
      slots: {
        default: 'Link text',
      },
    });

    const icon = wrapper.find('.mc-link__icon');
    const label = wrapper.find('.mc-link__label');
    expect(icon.exists()).toBe(false);
    expect(label.text()).toBe('Link text');
  });

  it('renders with an icon on the left when "iconPosition" is "left"', () => {
    const wrapper = mount(MLink, {
      props: {
        iconPosition: 'left',
      },
      slots: {
        icon: '<span>Left Icon</span>',
        default: 'Link text',
      },
    });

    const leftIcon = wrapper.find('.mc-link__icon');
    const label = wrapper.find('.mc-link__label');
    expect(leftIcon.exists()).toBe(true);
    expect(leftIcon.text()).toBe('Left Icon');
    expect(label.text()).toBe('Link text');
  });

  it('renders with an icon on the right when "iconPosition" is "right"', () => {
    const wrapper = mount(MLink, {
      props: {
        iconPosition: 'right',
      },
      slots: {
        icon: '<span>Right Icon</span>',
        default: 'Link text',
      },
    });

    const rightIcon = wrapper.find('.mc-link__icon');
    const label = wrapper.find('.mc-link__label');
    expect(rightIcon.exists()).toBe(true);
    expect(rightIcon.text()).toBe('Right Icon');
    expect(label.text()).toBe('Link text');
  });

  it('applies the correct appearance class', () => {
    const wrapper = mount(MLink, {
      props: {
        appearance: 'accent',
      },
    });

    const link = wrapper.get('a');
    expect(link.classes()).toContain('mc-link--accent');
  });

  it('applies the correct size class', () => {
    const wrapper = mount(MLink, {
      props: {
        size: 'm',
      },
    });

    const link = wrapper.get('a');
    expect(link.classes()).toContain('mc-link--m');
  });

  it('adds "mc-link--inline" class when inline', () => {
    const wrapper = mount(MLink, {
      props: {
        inline: true,
      },
    });

    const link = wrapper.get('a');
    expect(link.classes()).toContain('mc-link--inline');
  });

  it('applies the href and target attributes correctly', () => {
    const wrapper = mount(MLink, {
      props: {
        href: 'https://example.com',
        target: '_blank',
      },
    });

    const link = wrapper.get('a');
    expect(link.attributes('href')).toBe('https://example.com');
    expect(link.attributes('target')).toBe('_blank');
  });

  it('renders default slot content', () => {
    const wrapper = mount(MLink, {
      slots: {
        default: 'Custom Link Text',
      },
    });

    const linkText = wrapper.get('.mc-link__label');
    expect(linkText.text()).toBe('Custom Link Text');
  });

  it('binds custom attributes correctly', () => {
    const wrapper = mount(MLink, {
      attrs: {
        'data-test-id': 'custom-id',
      },
    });

    const link = wrapper.get('a');
    expect(link.attributes('data-test-id')).toBe('custom-id');
  });
});