@mozaic-ds/vue/src/components/kpiitem/MKpiItem.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 KpiItem from './MKpiItem.vue';

describe('MKpiItem component', () => {
  it('renders the large size correctly', () => {
    const wrapper = mount(KpiItem, {
      props: {
        value: '85%',
        label: 'Completion Rate',
        trend: 'increasing',
        information: 'Above target',
        size: 'l',
      },
    });
    expect(wrapper.text()).toContain('85%');
    expect(wrapper.text()).toContain('Completion Rate');
    expect(wrapper.text()).toContain('Above target');
    expect(wrapper.find('.mc-kpi__icon').exists()).toBe(true);
  });

  it('renders the medium size component correctly', () => {
    const wrapper = mount(KpiItem, {
      props: {
        value: '85%',
        label: 'Completion Rate',
        information: 'Above target',
        trend: 'increasing',
        size: 'm',
      },
    });
    expect(wrapper.text()).toContain('85%');
    expect(wrapper.text()).toContain('Completion Rate');
    expect(wrapper.text()).not.toContain('Above target');
    expect(wrapper.find('.mc-kpi__icon').exists()).toBe(true);
  });

  it('renders the small size component correctly', () => {
    const wrapper = mount(KpiItem, {
      props: {
        value: '85%',
        label: 'Completion Rate',
        information: 'Above target',
        trend: 'increasing',
        size: 's',
      },
    });
    expect(wrapper.text()).toContain('85%');
    expect(wrapper.text()).not.toContain('Completion Rate');
    expect(wrapper.text()).not.toContain('Above target');
    expect(wrapper.find('.mc-kpi__icon').exists()).toBe(true);
  });

  describe('trend icon', () => {
    it('does not render the icon when trend prop is not provided', () => {
      const wrapper = mount(KpiItem, {
        props: { value: '123' },
      });

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

    it('renders the icon when trend prop is  provided', () => {
      const wrapper = mount(KpiItem, {
        props: { value: '123', trend: 'increasing' },
      });

      expect(wrapper.find('.mc-kpi__icon').exists()).toBe(true);
    });

    it.each([['increasing'], ['decreasing'], ['stable']] as const)(
      'gives the trend icon an accessible label for "%s"',
      (trend) => {
        const wrapper = mount(KpiItem, {
          props: { value: '123', trend },
        });
        const icon = wrapper.find('.mc-kpi__icon');
        expect(icon.attributes('role')).toBe('img');
        expect(icon.attributes('aria-label')).toBe(trend);
      },
    );
  });
});