@mozaic-ds/vue-3/src/components/stepperbar/MStepperBar.spec.ts

Vue.js implementation of Mozaic Design System

import {DOMWrapper, mount, VueWrapper} from '@vue/test-utils';
import MStepperBar from '@/components/stepperbar/MStepperBar.vue';

const stepsNb = 3;
let wrapper: VueWrapper<any>;
let previousButtonElement: DOMWrapper<HTMLDivElement>;
let nextButtonElement: DOMWrapper<HTMLDivElement>;

describe('going from step to step without beforeStepChange handler', () => {
  it('test from step 1 to step 2', async () => {
    wrapper = mount(MStepperBar, {
      props: {
        stepsNb,
        modelValue: 0,
        'onUpdate:modelValue': (e:number) => wrapper.setProps({ modelValue: e })
      }
    });
    nextButtonElement = wrapper.find('.mc-stepper-bar__next');
    await nextButtonElement.trigger('click');
    expect(wrapper.props('modelValue')).toEqual(1);
  });

  it('test from step 2 to step 3', async () => {
    wrapper = mount(MStepperBar, {
      props: {
        stepsNb,
        modelValue: 1,
        'onUpdate:modelValue': (e:number) => wrapper.setProps({ modelValue: e })
      }
    });
    nextButtonElement = wrapper.find('.mc-stepper-bar__next');
    await nextButtonElement.trigger('click');
    expect(wrapper.props('modelValue')).toEqual(2);
  });

  it('test from step 3 to step 2', async () => {
    wrapper = mount(MStepperBar, {
      props: {
        stepsNb,
        modelValue: 2,
        'onUpdate:modelValue': (e:number) => wrapper.setProps({ modelValue: e })
      }
    });
    previousButtonElement = wrapper.find('.mc-stepper-bar__actions button:not(.mc-stepper-bar__next)');
    await previousButtonElement.trigger('click');
    expect(wrapper.props('modelValue')).toEqual(1);
  });
  it('test from step 2 to step 1', async () => {
    wrapper = mount(MStepperBar, {
      props: {
        stepsNb,
        modelValue: 1,
        'onUpdate:modelValue': (e:number) => wrapper.setProps({ modelValue: e })
      }
    });
    previousButtonElement = wrapper.find('.mc-stepper-bar__actions button:not(.mc-stepper-bar__next)');
    await previousButtonElement.trigger('click');
    expect(wrapper.props('modelValue')).toEqual(0);
  });
});


describe('going from step to step with beforeStepChange handler returning false', () => {
  it('test from step 1 to step 2', async () => {
    wrapper = mount(MStepperBar, {
      props: {
        stepsNb,
        modelValue: 0,
        beforeStepChange: () => false,
        'onUpdate:modelValue': (e:number) => wrapper.setProps({ modelValue: e })
      }
    });
    nextButtonElement = wrapper.find('.mc-stepper-bar__next');
    await nextButtonElement.trigger('click');
    expect(wrapper.props('modelValue')).toEqual(0);
  });

  it('test from step 2 to step 3', async () => {
    wrapper = mount(MStepperBar, {
      props: {
        stepsNb,
        modelValue: 1,
        beforeStepChange: () => false,
        'onUpdate:modelValue': (e:number) => wrapper.setProps({ modelValue: e })
      }
    });
    nextButtonElement = wrapper.find('.mc-stepper-bar__next');
    await nextButtonElement.trigger('click');
    expect(wrapper.props('modelValue')).toEqual(1);
  });

  it('test from step 3 to step 2', async () => {
    wrapper = mount(MStepperBar, {
      props: {
        stepsNb,
        modelValue: 2,
        beforeStepChange: () => false,
        'onUpdate:modelValue': (e:number) => wrapper.setProps({ modelValue: e })
      }
    });
    previousButtonElement = wrapper.find('.mc-stepper-bar__actions button:not(.mc-stepper-bar__next)');
    await previousButtonElement.trigger('click');
    expect(wrapper.props('modelValue')).toEqual(2);
  });
  it('test from step 2 to step 1', async () => {
    wrapper = mount(MStepperBar, {
      props: {
        stepsNb,
        modelValue: 1,
        beforeStepChange: () => false,
        'onUpdate:modelValue': (e:number) => wrapper.setProps({ modelValue: e })
      }
    });
    previousButtonElement = wrapper.find('.mc-stepper-bar__actions button:not(.mc-stepper-bar__next)');
    await previousButtonElement.trigger('click');
    expect(wrapper.props('modelValue')).toEqual(1);
  });
});