@mozaic-ds/vue/src/components/iconbutton/MIconButton.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 MIconButton from './MIconButton.vue';
import ChevronRight24 from '@mozaic-ds/icons-vue/src/components/ChevronRight24/ChevronRight24.vue';

describe('MButton component', () => {
  it('renders with an icon', () => {
    const wrapper = mount(MIconButton, {
      slots: {
        icon: [ChevronRight24],
      },
    });

    const icon = wrapper.findComponent(ChevronRight24);
    expect(icon.exists()).toBe(true);
  });

  it('applies the correct appearance class based on the appearance prop', () => {
    const wrapper = mount(MIconButton, {
      props: {
        appearance: 'accent',
      },
      slots: {
        icon: [ChevronRight24],
      },
    });

    expect(wrapper.classes()).toContain('mc-button--accent');
  });

  it('applies the correct size class based on the size prop', () => {
    const wrapper = mount(MIconButton, {
      props: {
        size: 'l',
      },
      slots: {
        icon: [ChevronRight24],
      },
    });

    expect(wrapper.classes()).toContain('mc-button--l');
  });

  it('disables the button when the disabled prop is true', async () => {
    const wrapper = mount(MIconButton, {
      props: {
        disabled: true,
      },
      slots: {
        icon: [ChevronRight24],
      },
    });

    const button = wrapper.find('button');
    expect(button.attributes('disabled')).toBeDefined();
  });

  it('applies the correct ghost class when ghost prop is true', () => {
    const wrapper = mount(MIconButton, {
      props: {
        ghost: true,
      },
      slots: {
        icon: [ChevronRight24],
      },
    });

    expect(wrapper.classes()).toContain('mc-button--ghost');
  });

  it('applies the outlined class when outlined prop is true', () => {
    const wrapper = mount(MIconButton, {
      props: {
        outlined: true,
      },
      slots: {
        icon: [ChevronRight24],
      },
    });

    expect(wrapper.classes()).toContain('mc-button--outlined');
  });

  it('has type="button" by default', () => {
    const wrapper = mount(MIconButton, {
      slots: {
        icon: [ChevronRight24],
      },
    });

    const button = wrapper.find('button');
    expect(button.attributes('type')).toBe('button');
  });

  it('can have type="submit" when the type prop is "submit"', () => {
    const wrapper = mount(MIconButton, {
      props: {
        type: 'submit',
      },
      slots: {
        icon: [ChevronRight24],
      },
    });

    const button = wrapper.find('button');
    expect(button.attributes('type')).toBe('submit');
  });
});