@mozaic-ds/vue/src/components/drawer/MDrawer.spec.ts

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

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

describe('MDrawer component', () => {
  it('renders title and contentTitle when provided', () => {
    const wrapper = mount(MDrawer, {
      props: {
        open: true,
        title: 'Main Drawer Title',
        contentTitle: 'Drawer Content Title',
      },
      slots: {
        default: '<p>Drawer content</p>',
      },
    });

    expect(wrapper.find('.mc-drawer__title').text()).toBe('Main Drawer Title');
    expect(wrapper.find('.mc-drawer__content__title').text()).toBe(
      'Drawer Content Title',
    );
    expect(wrapper.find('.mc-drawer__content').text()).toContain(
      'Drawer content',
    );
  });

  it('emits update:open false when close button is clicked', async () => {
    const wrapper = mount(MDrawer, {
      props: {
        open: true,
        title: 'Test Title',
      },
    });

    const closeButton = wrapper.find('.mc-drawer__close');
    await closeButton.trigger('click');

    expect(wrapper.emitted('update:open')).toBeTruthy();
    expect(wrapper.emitted('update:open')![0]).toEqual([false]);
  });

  it('emits back event when back button is clicked', async () => {
    const wrapper = mount(MDrawer, {
      props: {
        open: true,
        title: 'Test Title',
        back: true,
      },
    });

    const backButton = wrapper.find('.mc-drawer__back');
    await backButton.trigger('click');

    expect(wrapper.emitted('back')).toBeTruthy();
  });

  it('renders footer slot when provided', () => {
    const wrapper = mount(MDrawer, {
      props: {
        open: true,
        title: 'Test Title',
      },
      slots: {
        footer: '<button>Footer Button</button>',
      },
    });

    expect(wrapper.find('.mc-drawer__footer').exists()).toBe(true);
    expect(wrapper.find('.mc-drawer__footer button').text()).toBe(
      'Footer Button',
    );
  });

  it('applies correct class when extended and position is left', () => {
    const wrapper = mount(MDrawer, {
      props: {
        open: true,
        title: 'Test Title',
        extended: true,
        position: 'left',
      },
    });

    const section = wrapper.find('section.mc-drawer');
    expect(section.classes()).toContain('mc-drawer--extend');
    expect(section.classes()).toContain('mc-drawer--left');
    expect(section.classes()).toContain('is-open');
  });

  it('does not render back button if prop `back` is false', () => {
    const wrapper = mount(MDrawer, {
      props: {
        open: true,
        title: 'Test Title',
      },
    });

    expect(wrapper.find('.mc-drawer__back').exists()).toBe(false);
  });
});