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

describe('MStatusDot.vue', () => {
  it('renders with default status and size', () => {
    const wrapper = mount(MStatusDot);

    expect(wrapper.classes()).toContain('mc-status-dot');
  });

  it('renders with custom status', () => {
    const wrapper = mount(MStatusDot, {
      props: {
        status: 'success',
      },
    });

    expect(wrapper.classes()).toContain('mc-status-dot--success');
  });

  it('renders with custom size', () => {
    const wrapper = mount(MStatusDot, {
      props: {
        size: 's',
      },
    });

    expect(wrapper.classes()).toContain('mc-status-dot--s');
  });

  it('does not render the "info" status when a custom one is passed', () => {
    const wrapper = mount(MStatusDot, {
      props: {
        status: 'warning',
      },
    });

    expect(wrapper.classes()).not.toContain('mc-status-dot--info');
  });

  it('does not render the "m" size when a custom one is passed', () => {
    const wrapper = mount(MStatusDot, {
      props: {
        size: 'l',
      },
    });

    expect(wrapper.classes()).not.toContain('mc-status-dot--m');
  });
});