@mozaic-ds/vue/src/components/checklistmenu/MCheckListMenu.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 MCheckListMenu, { type CheckListMenuItem } from './MCheckListMenu.vue';
import CheckCircleFilled24 from '@mozaic-ds/icons-vue/src/components/CheckCircleFilled24/CheckCircleFilled24.vue';
import type { MenuItem } from '../builtinmenu/MBuiltInMenu.vue';

const StubMBuiltInMenu = {
  name: 'MBuiltInMenu',
  props: ['modelValue', 'items', 'outlined'],
  emits: ['update:modelValue'],
  template: '<div />',
};

describe('MCheckListMenu', () => {
  it('maps items and sets icon for checked items', () => {
    const items: CheckListMenuItem[] = [
      {
        label: 'One',
        checked: true,
        href: '/one',
        to: undefined,
        target: undefined,
      },
      {
        label: 'Two',
        checked: false,
        href: undefined,
        to: '/two',
        target: '_blank',
      },
    ];

    const wrapper = mount(MCheckListMenu, {
      props: { items, modelValue: undefined },
      global: { components: { MBuiltInMenu: StubMBuiltInMenu } },
    });

    const builtIn = wrapper.findComponent(StubMBuiltInMenu);
    const passedItems = builtIn.props('items') as MenuItem[];

    expect(passedItems).toHaveLength(2);
    expect(passedItems[0].label).toBe('One');
    expect(passedItems[0].icon).toBe(CheckCircleFilled24);
    expect(passedItems[0].href).toBe('/one');

    expect(passedItems[1].label).toBe('Two');
    expect(passedItems[1].icon).toBeUndefined();
    expect(passedItems[1].to).toBe('/two');
    expect(passedItems[1].target).toBe('_blank');
  });

  it('forwards outlined prop to MBuiltInMenu', () => {
    const items = [{ label: 'A', checked: false }];
    const wrapper = mount(MCheckListMenu, {
      props: { items, modelValue: undefined, outlined: true },
      global: { components: { MBuiltInMenu: StubMBuiltInMenu } },
    });

    const builtIn = wrapper.findComponent(StubMBuiltInMenu);
    expect(builtIn.props('outlined')).toBe(true);
  });

  it('emits update:modelValue when inner menu updates modelValue', async () => {
    const items = [{ label: 'X', checked: false }];
    const wrapper = mount(MCheckListMenu, {
      props: { items, modelValue: undefined },
      global: { components: { MBuiltInMenu: StubMBuiltInMenu } },
    });

    const builtIn = wrapper.findComponent(StubMBuiltInMenu);
    await builtIn.vm.$emit('update:modelValue', 3);

    const emitted = wrapper.emitted('update:modelValue');
    expect(emitted).toBeTruthy();
    expect(emitted![0]).toEqual([3]);
  });
});