@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 = [
    { id: '1', label: 'Step 1' },
    { id: '2', label: 'Step 2' },
    { id: '3', label: 'Step 3' },
  ];

  it('sets aria-current="step" on the current step item', () => {
    const wrapper = mount(MStepperInline, {
      props: { currentStep: '2', steps: defaultSteps },
    });

    const items = wrapper.findAll('.mc-stepper-inline__item');
    expect(items[1].attributes('aria-current')).toBe('step');
    expect(items[0].attributes('aria-current')).toBeUndefined();
    expect(items[2].attributes('aria-current')).toBeUndefined();
  });

  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 = [
      { id: '1', label: 'Step 1', additionalInfo: 'Info 1' },
      { id: '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',
    );
  });

  describe('currentStep as a string', () => {
    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');
    });
  });

  describe('currentStep as number', () => {
    it('clamps to the first step when currentStep is below 1', () => {
      const wrapper = mount(MStepperInline, {
        props: { currentStep: 0, steps: defaultSteps },
      });

      const circles = wrapper.findAll('.mc-stepper-inline__circle');
      expect(circles[0].classes()).toContain('is-current');
    });

    it('clamps to the last step when currentStep exceeds steps length', () => {
      const wrapper = mount(MStepperInline, {
        props: { currentStep: 99, steps: defaultSteps },
      });

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

    it('sets the correct step as current when currentStep is a valid number', () => {
      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');
      expect(labels[2].classes()).not.toContain('is-current');
    });
  });
});