@mozaic-ds/vue/src/components/stepperinline/MStepperInline.spec.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import { mount } from '@vue/test-utils';
import MStepperInline from './MStepperInline.vue';
import { describe, it, expect } from 'vitest';

describe('MStepperInline', () => {
  const defaultSteps = [
    { label: 'Step 1' },
    { label: 'Step 2' },
    { label: 'Step 3' },
  ];

  it('renders correctly with default props', () => {
    const wrapper = mount(MStepperInline, {
      props: {
        currentStep: 1,
        steps: defaultSteps,
      },
    });

    expect(wrapper.exists()).toBe(true);
    expect(wrapper.findAll('.mc-stepper-inline__item').length).toBe(
      defaultSteps.length,
    );
    expect(wrapper.find('.mc-stepper-inline__label').text()).toContain(
      'Step 1',
    );
  });

  it('displays additional information when provided', () => {
    const stepsWithInfo = [
      { label: 'Step 1', additionalInfo: 'Info 1' },
      { label: 'Step 2', additionalInfo: 'Info 2' },
    ];
    const wrapper = mount(MStepperInline, {
      props: {
        currentStep: 1,
        steps: stepsWithInfo,
      },
    });

    expect(wrapper.findAll('.mc-stepper-inline__additional').length).toBe(
      stepsWithInfo.length,
    );
    expect(wrapper.find('.mc-stepper-inline__additional').text()).toBe(
      'Info 1',
    );
  });

  it('marks the correct step as active', async () => {
    const wrapper = mount(MStepperInline, {
      props: {
        currentStep: 2,
        steps: defaultSteps,
      },
    });

    const labels = wrapper.findAll('.mc-stepper-inline__label');
    expect(labels[1].classes()).toContain('is-current');
    expect(labels[0].classes()).not.toContain('is-current');

    await wrapper.setProps({ currentStep: 3 });
    expect(labels[2].classes()).toContain('is-current');
  });

  it('marks completed steps', () => {
    const wrapper = mount(MStepperInline, {
      props: {
        currentStep: 3,
        steps: defaultSteps,
      },
    });

    const items = wrapper.findAll('.mc-stepper-inline__item');
    expect(items[0].classes()).toContain('is-completed');
    expect(items[1].classes()).toContain('is-completed');
    expect(items[2].classes()).not.toContain('is-completed');
  });
});