@mozaic-ds/vue/src/components/breadcrumb/MBreadcrumb.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 MBreadcrumb from './MBreadcrumb.vue';

const MLinkStub = {
  template: '<a><slot /></a>',
  props: ['href', 'appearance', 'inline', 'router', 'class', 'ariaCurrent'],
};

describe('MBreadcrumb', () => {
  const defaultLinks = [
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Electronics', href: '/products/electronics' },
  ];

  it('renders all breadcrumb links', () => {
    const wrapper = mount(MBreadcrumb, {
      props: {
        links: defaultLinks,
      },
      global: {
        components: { MLink: MLinkStub },
      },
    });

    const items = wrapper.findAll('.mc-breadcrumb__item');
    expect(items).toHaveLength(defaultLinks.length);
    defaultLinks.forEach((link, index) => {
      expect(items[index].text()).toContain(link.label);
    });
  });

  it('adds mc-breadcrumb__current class to the last link', () => {
    const wrapper = mount(MBreadcrumb, {
      props: {
        links: defaultLinks,
      },
      global: {
        components: { MLink: MLinkStub },
      },
    });

    const lastLink = wrapper.findAllComponents(MLinkStub).at(-1);
    expect(lastLink?.classes()).toContain('mc-breadcrumb__current');
  });

  it('sets aria-current="page" on the last link', () => {
    const wrapper = mount(MBreadcrumb, {
      props: {
        links: defaultLinks,
      },
      global: {
        components: { MLink: MLinkStub },
      },
    });

    const lastLink = wrapper.findAllComponents(MLinkStub).at(-1);
    expect(lastLink?.attributes('aria-current')).toBe('page');
  });

  it('does not set aria-current on non-last links', () => {
    const wrapper = mount(MBreadcrumb, {
      props: {
        links: defaultLinks,
      },
      global: {
        components: { MLink: MLinkStub },
      },
    });

    const linkComponents = wrapper.findAllComponents(MLinkStub);
    for (let i = 0; i < linkComponents.length - 1; i++) {
      expect(linkComponents[i].attributes('aria-current')).toBeUndefined();
    }
  });

  it('applies appearance class modifier when not standard', () => {
    const wrapper = mount(MBreadcrumb, {
      props: {
        appearance: 'inverse',
        links: defaultLinks,
      },
      global: {
        components: { MLink: MLinkStub },
      },
    });

    expect(wrapper.classes()).toContain('mc-breadcrumb--inverse');
  });

  it('does not apply appearance modifier for standard (default)', () => {
    const wrapper = mount(MBreadcrumb, {
      props: {
        appearance: 'standard',
        links: defaultLinks,
      },
      global: {
        components: { MLink: MLinkStub },
      },
    });

    expect(wrapper.classes()).not.toContain('mc-breadcrumb--standard');
  });
});