@mozaic-ds/vue/src/components/sidebarshortcutitem/MSidebarShortcutItem.spec.ts

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

import { mount } from '@vue/test-utils';
import { describe, it, expect } from 'vitest';
import { defineComponent } from 'vue';
import MSidebarShortcutItem from './MSidebarShortcutItem.vue';
import {
  EXPANDED_SIDEBAR_KEY,
  STACKED_SHORTCUTS_KEY,
} from '../sidebar/MSidebar.const';

const TestIcon = defineComponent({
  name: 'TestIcon',
  template: '<svg data-testid="test-icon"></svg>',
});

describe('MSidebarShortcutItem', () => {
  it('renders label and href', () => {
    const wrapper = mount(MSidebarShortcutItem, {
      props: { label: 'Dashboard', href: '/dashboard' },
      global: {
        provide: {
          [EXPANDED_SIDEBAR_KEY]: true,
          [STACKED_SHORTCUTS_KEY]: true,
        },
      },
    });
    const link = wrapper.find('a.mc-sidebar__shortcut-link');
    expect(link.exists()).toBe(true);
    expect(link.attributes('href')).toBe('/dashboard');
    expect(wrapper.text()).toContain('Dashboard');
  });

  it('renders icon when provided', () => {
    const wrapper = mount(MSidebarShortcutItem, {
      props: { label: 'WithIcon', href: '#', icon: TestIcon },
      global: {
        provide: {
          [EXPANDED_SIDEBAR_KEY]: true,
          [STACKED_SHORTCUTS_KEY]: true,
        },
      },
    });
    expect(wrapper.find('.mc-sidebar__shortcut-icon').exists()).toBe(true);
    expect(wrapper.find('[data-testid="test-icon"]').exists()).toBe(true);
  });

  it('does not render icon when not provided', () => {
    const wrapper = mount(MSidebarShortcutItem, {
      props: { label: 'NoIcon', href: '#' },
      global: {
        provide: {
          [EXPANDED_SIDEBAR_KEY]: true,
          [STACKED_SHORTCUTS_KEY]: true,
        },
      },
    });
    expect(wrapper.find('.mc-sidebar__shortcut-icon').exists()).toBe(false);
    expect(wrapper.find('svg').exists()).toBe(false);
  });
});