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

describe('ActionBottomBar component', () => {
  it('renders the component root element', () => {
    const wrapper = mount(MActionBottomBar);
    expect(wrapper.classes()).toContain('mc-action-bottom-bar');
  });

  it('applies the shadow class when shadow prop is true', () => {
    const wrapper = mount(MActionBottomBar, {
      props: {
        shadow: true,
      },
    });

    expect(wrapper.classes()).toContain('mc-action-bottom-bar--shadow');
  });

  it('does not apply the shadow class when shadow prop is false', () => {
    const wrapper = mount(MActionBottomBar, {
      props: {
        shadow: false,
      },
    });

    expect(wrapper.classes()).not.toContain('mc-action-bottom-bar--shadow');
  });

  it('renders the left container element', () => {
    const wrapper = mount(MActionBottomBar);
    const left = wrapper.find('.mc-action-bottom-bar__left');

    expect(left.exists()).toBe(true);
  });

  it('renders the right container element', () => {
    const wrapper = mount(MActionBottomBar);
    const right = wrapper.find('.mc-action-bottom-bar__right');

    expect(right.exists()).toBe(true);
  });

  it('renders the divider component', () => {
    const wrapper = mount(MActionBottomBar);
    const divider = wrapper.findComponent(MDivider);

    expect(divider.exists()).toBe(true);
  });
});