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

describe('MSegmentedControl.vue', () => {
  const segments = [
    { label: 'First' },
    { label: 'Second' },
    { label: 'Third' },
  ];

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

    const buttons = wrapper.findAll('button');
    expect(buttons).toHaveLength(segments.length);
    buttons.forEach((btn, i) => {
      expect(btn.text()).toBe(segments[i].label);
    });
  });

  it('sets default active segment based on modelValue prop', () => {
    const wrapper = mount(MSegmentedControl, {
      props: { segments, modelValue: 1 },
    });

    const buttons = wrapper.findAll('button');
    expect(buttons[1].classes()).toContain(
      'mc-segmented-control__segment--selected',
    );
    expect(buttons[1].attributes('aria-checked')).toBe('true');
  });

  it('emits update:modelValue and changes active segment on click', async () => {
    const wrapper = mount(MSegmentedControl, {
      props: { segments, modelValue: 0 },
    });

    const buttons = wrapper.findAll('button');
    await buttons[2].trigger('click');

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

    expect(buttons[2].classes()).toContain(
      'mc-segmented-control__segment--selected',
    );
    expect(buttons[2].attributes('aria-checked')).toBe('true');
  });

  it('does not emit update event if clicking already active segment', async () => {
    const wrapper = mount(MSegmentedControl, {
      props: { segments, modelValue: 1 },
    });

    const buttons = wrapper.findAll('button');
    await buttons[1].trigger('click');

    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
  });

  it('applies full width class when full prop is true', () => {
    const wrapper = mount(MSegmentedControl, {
      props: { segments, full: true },
    });

    expect(wrapper.classes()).toContain('mc-segmented-control--full');
  });

  it('applies size class when size prop is "m"', () => {
    const wrapper = mount(MSegmentedControl, {
      props: { segments, size: 'm' },
    });

    expect(wrapper.classes()).toContain('mc-segmented-control--m');
  });

  it('does not apply size class when size is "s" (default)', () => {
    const wrapper = mount(MSegmentedControl, {
      props: { segments },
    });

    expect(wrapper.classes()).not.toContain('mc-segmented-control--s');
  });

  it('updates active segment when modelValue prop changes', async () => {
    const wrapper = mount(MSegmentedControl, {
      props: { segments, modelValue: 0 },
    });

    const buttons = wrapper.findAll('button');
    expect(buttons[0].classes()).toContain(
      'mc-segmented-control__segment--selected',
    );

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

    expect(buttons[2].classes()).toContain(
      'mc-segmented-control__segment--selected',
    );
    expect(buttons[2].attributes('aria-checked')).toBe('true');
  });

  it('adds role="radio" attribute to buttons', () => {
    const wrapper = mount(MSegmentedControl, {
      props: { segments },
    });

    const buttons = wrapper.findAll('button');
    buttons.forEach((button) => {
      expect(button.attributes('role')).toBe('radio');
    });
  });
});