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

describe('MStepperCompact component', () => {
  it('renders with required label and optional description', () => {
    const wrapper = mount(MStepperCompact, {
      props: {
        label: 'Current Step',
      },
    });

    expect(wrapper.find('.mc-stepper-compact').exists()).toBe(true);
    expect(wrapper.find('.mc-stepper-compact__progress').exists()).toBe(true);
    expect(wrapper.find('.mc-stepper-compact__label').text()).toBe(
      'Current Step',
    );

    // description should NOT be rendered by default
    expect(wrapper.find('.mc-stepper-compact__description').exists()).toBe(
      false,
    );
  });

  it('calculates progress value correctly', () => {
    const wrapper = mount(MStepperCompact, {
      props: {
        label: 'Current Step',
        value: 2,
        maxSteps: 5,
      },
    });

    const progressbar = wrapper.findComponent({ name: 'MCircularProgressbar' });

    expect(progressbar.props('value')).toBe(40); // (2/5) * 100
  });

  it('displays correct content value (current step / total)', () => {
    const wrapper = mount(MStepperCompact, {
      props: {
        label: 'Current Step',
        value: 3,
        maxSteps: 7,
      },
    });

    const progressbar = wrapper.findComponent({ name: 'MCircularProgressbar' });

    expect(progressbar.props('contentValue')).toBe('3 / 7');
  });

  it('passes correct props to MCircularProgressbar', () => {
    const wrapper = mount(MStepperCompact, {
      props: {
        label: 'Current Step',
        value: 2,
        maxSteps: 4,
      },
    });

    const progressbar = wrapper.findComponent({ name: 'MCircularProgressbar' });

    expect(progressbar.props('type')).toBe('content');
    expect(progressbar.props('size')).toBe('m');
    expect(progressbar.props('value')).toBe(50); // (2/4) * 100
    expect(progressbar.props('contentValue')).toBe('2 / 4');
  });

  it('renders custom label and description when provided', () => {
    const wrapper = mount(MStepperCompact, {
      props: {
        label: 'Custom Label',
        description: 'Custom Description',
      },
    });

    expect(wrapper.find('.mc-stepper-compact__label').text()).toBe(
      'Custom Label',
    );
    expect(wrapper.find('.mc-stepper-compact__description').text()).toBe(
      'Custom Description',
    );
  });

  it('does not render description element when description is empty', () => {
    const wrapper = mount(MStepperCompact, {
      props: {
        label: 'Label Only',
        description: undefined,
      },
    });

    expect(wrapper.find('.mc-stepper-compact__description').exists()).toBe(
      false,
    );
  });
});