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

describe('MDivider component', () => {
  it('renders correctly with default props', () => {
    const wrapper = mount(MDivider);
    expect(wrapper.classes()).toContain('mc-divider');

    const innerDiv = wrapper.find('.mc-divider > div');
    expect(innerDiv.classes()).toContain('mc-divider-horizontal');
  });

  it('renders with vertical orientation', () => {
    const wrapper = mount(MDivider, {
      props: { orientation: 'vertical' },
    });
    const innerDiv = wrapper.find('.mc-divider > div');
    expect(innerDiv.classes()).toContain('mc-divider-vertical');
  });

  it('applies the correct style class', () => {
    const wrapper = mount(MDivider, {
      props: { style: 'secondary' },
    });
    const innerDiv = wrapper.find('.mc-divider > div');
    expect(innerDiv.classes()).toContain('mc-divider-horizontal--secondary');
  });

  it('applies the correct size class', () => {
    const wrapper = mount(MDivider, {
      props: { size: 'm' },
    });
    const innerDiv = wrapper.find('.mc-divider > div');
    expect(innerDiv.classes()).toContain('mc-divider-horizontal--m');
  });

  it('uses default props when none are provided', () => {
    const wrapper = mount(MDivider);
    expect(wrapper.props().orientation).toBe('horizontal');
    expect(wrapper.props().style).toBe('primary');
    expect(wrapper.props().size).toBe('s');
  });

  it('handles custom props correctly', () => {
    const wrapper = mount(MDivider, {
      props: {
        orientation: 'vertical',
        style: 'tertiary',
        size: 'l',
      },
    });
    expect(wrapper.props().orientation).toBe('vertical');
    expect(wrapper.props().style).toBe('tertiary');
    expect(wrapper.props().size).toBe('l');
  });
});