@mozaic-ds/vue/src/components/tileclickable/MTileClickable.spec.ts

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

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

describe('MTileClickable', () => {
  it('renders as a button by default', () => {
    const wrapper = mount(MTileClickable);

    expect(wrapper.element.tagName).toBe('BUTTON');
    expect(wrapper.attributes('type')).toBe('button');
  });

  it('renders as a link when href is provided', () => {
    const wrapper = mount(MTileClickable, {
      props: {
        href: 'https://example.com',
      },
    });

    expect(wrapper.element.tagName).toBe('A');
    expect(wrapper.attributes('href')).toBe('https://example.com');
  });

  it('emits action event when clicked as a button', async () => {
    const wrapper = mount(MTileClickable);

    await wrapper.trigger('click');

    expect(wrapper.emitted('action')).toBeTruthy();
    expect(wrapper.emitted('action')?.length).toBe(1);
  });

  it('does not emit action event when rendered as a link', async () => {
    const wrapper = mount(MTileClickable, {
      props: {
        href: 'https://example.com',
      },
    });

    await wrapper.trigger('click');

    expect(wrapper.emitted('action')).toBeFalsy();
  });

  it('applies appearance modifier when appearance is not primary', () => {
    const wrapper = mount(MTileClickable, {
      props: {
        appearance: 'secondary',
      },
    });

    expect(wrapper.classes()).toContain('mc-tile--secondary');
  });

  it('does not apply appearance modifier when appearance is primary', () => {
    const wrapper = mount(MTileClickable, {
      props: {
        appearance: 'primary',
      },
    });

    expect(wrapper.classes()).not.toContain('mc-tile--primary');
  });

  it('applies bordered class when bordered is true', () => {
    const wrapper = mount(MTileClickable, {
      props: {
        bordered: true,
      },
    });

    expect(wrapper.classes()).toContain('mc-tile--bordered');
  });

  it('does not apply bordered class when bordered is false', () => {
    const wrapper = mount(MTileClickable, {
      props: {
        bordered: false,
      },
    });

    expect(wrapper.classes()).not.toContain('mc-tile--bordered');
  });

  it('applies icon right position class when iconPosition is right', () => {
    const wrapper = mount(MTileClickable, {
      props: {
        iconPosition: 'right',
      },
    });

    expect(wrapper.classes()).toContain('mc-tile--action-right');
  });

  it('does not apply right position class when iconPosition is bottom', () => {
    const wrapper = mount(MTileClickable, {
      props: {
        iconPosition: 'bottom',
      },
    });

    expect(wrapper.classes()).not.toContain('mc-tile--action-right');
  });

  it('applies external link behavior class when href is set', () => {
    const wrapper = mount(MTileClickable, {
      props: {
        href: 'https://example.com',
      },
    });

    expect(wrapper.classes()).toContain('mc-tile--external-link');
  });

  it('applies navigate behavior class when to is set', () => {
    const wrapper = mount(MTileClickable, {
      props: {
        to: '/dashboard',
      },
    });

    expect(wrapper.classes()).toContain('mc-tile--navigate');
  });

  it('applies open behavior class when neither href nor to is set', () => {
    const wrapper = mount(MTileClickable);

    expect(wrapper.classes()).toContain('mc-tile--open');
  });
});