@mozaic-ds/vue/src/components/tabs/Mtabs.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 MTabs from './MTabs.vue';
import { defineComponent, h, markRaw } from 'vue';

describe('MTabs.vue', () => {
  const tabs = [{ label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' }];

  it('renders tabs with correct labels', () => {
    const wrapper = mount(MTabs, {
      props: {
        tabs,
      },
    });

    const tabElements = wrapper.findAll('li.mc-tabs__item');
    expect(tabElements.length).toBe(tabs.length);

    tabs.forEach((tab, i) => {
      expect(tabElements[i].text()).toContain(tab.label);
    });
  });

  it('applies selected class and aria-selected attribute based on modelValue and updates on tab click', async () => {
    const wrapper = mount(MTabs, {
      props: {
        tabs,
        modelValue: 0,
      },
    });

    const buttons = wrapper.findAll('button.mc-tabs__tab');

    buttons.forEach((button, i) => {
      if (i === 0) {
        expect(button.classes()).toContain('mc-tabs__tab--selected');
        expect(button.attributes('aria-selected')).toBe('true');
      } else {
        expect(button.classes()).not.toContain('mc-tabs__tab--selected');
        expect(button.attributes('aria-selected')).toBe('false');
      }
    });

    await buttons[1].trigger('click');

    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
    expect(wrapper.emitted('update:modelValue')![0]).toEqual([1]);

    await wrapper.setProps({ modelValue: 1 });

    const updatedButtons = wrapper.findAll('button.mc-tabs__tab');
    updatedButtons.forEach((button, i) => {
      if (i === 1) {
        expect(button.classes()).toContain('mc-tabs__tab--selected');
        expect(button.attributes('aria-selected')).toBe('true');
      } else {
        expect(button.classes()).not.toContain('mc-tabs__tab--selected');
        expect(button.attributes('aria-selected')).toBe('false');
      }
    });
  });

  it('adds divider and centered classes based on props', async () => {
    const wrapper = mount(MTabs, {
      props: {
        tabs,
        divider: true,
        centered: true,
      },
    });

    expect(wrapper.classes()).toContain('mc-tabs--centered');
    expect(wrapper.findComponent({ name: 'MDivider' }).exists()).toBe(true);

    await wrapper.setProps({ divider: false, centered: false });

    expect(wrapper.classes()).not.toContain('mc-tabs--centered');
    expect(wrapper.findComponent({ name: 'MDivider' }).exists()).toBe(false);
  });

  it('sets aria-label on tablist based on description prop', () => {
    const description = 'Main tabs navigation';
    const wrapper = mount(MTabs, {
      props: {
        tabs,
        description,
      },
    });

    const ul = wrapper.find('ul[role="tablist"]');
    expect(ul.attributes('aria-label')).toBe(description);
  });

  it('renders no tabs if tabs prop is empty', () => {
    const wrapper = mount(MTabs, { props: { tabs: [] } });
    expect(wrapper.findAll('li.mc-tabs__item').length).toBe(0);
  });

  it('emits update:modelValue on tab click if tab is not disabled', async () => {
    const wrapper = mount(MTabs, {
      props: {
        tabs: [
          { label: 'Tab 1' },
          { label: 'Tab 2', disabled: true },
          { label: 'Tab 3' },
        ],
        modelValue: 0,
      },
    });

    const buttons = wrapper.findAll('button.mc-tabs__tab');

    await buttons[2].trigger('click');
    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
    expect(wrapper.emitted('update:modelValue')![0]).toEqual([2]);

    await buttons[1].trigger('click');
    expect(wrapper.emitted('update:modelValue')!.length).toBe(1);
  });

  it('renders icon component when icon prop is provided', () => {
    const DummyIcon = markRaw(
      defineComponent({
        name: 'DummyIcon',
        render() {
          return h('svg', { class: 'dummy-icon' }, [
            h('circle', { cx: 10, cy: 10, r: 10 }),
          ]);
        },
      }),
    );

    const tabsWithIcon = [
      { label: 'Tab 1', icon: DummyIcon },
      { label: 'Tab 2' },
    ];

    const wrapper = mount(MTabs, {
      props: {
        tabs: tabsWithIcon,
      },
    });

    const firstTabButton = wrapper.findAll('button.mc-tabs__tab')[0];
    expect(firstTabButton.findComponent(DummyIcon).exists()).toBe(true);
    expect(firstTabButton.find('svg.dummy-icon').exists()).toBe(true);

    const secondTabButton = wrapper.findAll('button.mc-tabs__tab')[1];
    expect(secondTabButton.findComponent(DummyIcon).exists()).toBe(false);
  });

  it('renders badge when badge prop is provided', () => {
    const tabsWithBadges = [{ label: 'Tab 1', badge: 5 }, { label: 'Tab 2' }];

    const wrapper = mount(MTabs, {
      props: {
        tabs: tabsWithBadges,
      },
    });

    const firstTabButton = wrapper.findAll('button.mc-tabs__tab')[0];
    expect(firstTabButton.find('span.mc-tabs__badge').exists()).toBe(true);
    expect(
      firstTabButton.find('span.mc-tabs__badge .mc-number-badge').text(),
    ).toBe('5');

    const secondTabButton = wrapper.findAll('button.mc-tabs__tab')[1];
    expect(secondTabButton.find('span.mc-tabs__badge').exists()).toBe(false);
  });
});