@mozaic-ds/vue/src/components/pageheaderfeature/MPageHeaderFeature.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 { defineComponent } from 'vue';
import MPageHeaderFeature from './MPageHeaderFeature.vue';

const IconStub = defineComponent({
  name: 'IconStub',
  template: '<svg class="icon-stub" />',
});

describe('MPageHeaderFeature', () => {
  it('renders label and icon', () => {
    const wrapper = mount(MPageHeaderFeature, {
      props: {
        label: 'Search',
        icon: IconStub,
      },
    });

    expect(wrapper.find('.mc-page-header__feature-item').exists()).toBe(true);
    expect(wrapper.find('.mc-page-header__feature-item-icon').exists()).toBe(
      true,
    );
    expect(wrapper.text()).toContain('Search');
  });

  it('emits action when clicked', async () => {
    const wrapper = mount(MPageHeaderFeature, {
      props: {
        label: 'Help',
        icon: IconStub,
      },
    });

    await wrapper.find('.mc-page-header__feature-item').trigger('click');

    expect(wrapper.emitted()).toHaveProperty('action');
  });
});