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

const globalStubs = {
  MButton: {
    props: ['ariaLabel'],
    inheritAttrs: false,
    emits: ['click'],
    template:
      '<button v-bind="$attrs" aria-label="Delete file" @click="$emit(\'click\')"><slot /></button>',
  },
  MLinearProgressbarPercentage: {
    inheritAttrs: false,
    template: '<div class="progress" :data-value="$attrs.value"></div>',
  },
  CheckCircle32: { template: '<i class="icon-check"></i>' },
  WarningCircle32: { template: '<i class="icon-warning"></i>' },
  Cross20: { template: '<i class="icon-cross"></i>' },
  CrossCircleFilled20: { template: '<i class="icon-cross-filled"></i>' },
};

describe('MFileUploaderItem', () => {
  it('shows information details when information prop is set', () => {
    const wrapper = mount(MFileUploaderItem, {
      props: { file: { name: 'file.txt' }, information: 'Some info' },
      global: { stubs: globalStubs },
    });
    const details = wrapper.find('.mc-file-uploader-item__details');
    expect(details.exists()).toBe(true);
    expect(details.text()).toBe('Some info');
  });

  it('emits delete when inline delete button is clicked', async () => {
    const wrapper = mount(MFileUploaderItem, {
      props: { file: { name: 'file.txt' }, format: 'inline' },
      global: { stubs: globalStubs },
    });
    const btn = wrapper.find('button[aria-label="Delete file"]');
    expect(btn.exists()).toBe(true);
    await btn.trigger('click');
    expect(wrapper.emitted()).toHaveProperty('delete');
  });

  it('emits delete when stacked delete button is clicked', async () => {
    const wrapper = mount(MFileUploaderItem, {
      props: { file: { name: 'file.txt' }, format: 'stacked' },
      global: { stubs: globalStubs },
    });
    const btn = wrapper.find('button[aria-label="Delete file"]');
    expect(btn.exists()).toBe(true);
    await btn.trigger('click');
    expect(wrapper.emitted()).toHaveProperty('delete');
  });

  it('applies correct state modifier classes', async () => {
    // valid => default
    const wrapper = mount(MFileUploaderItem, {
      props: { file: { name: 'file.txt' }, valid: true },
      global: { stubs: globalStubs },
    });
    expect(wrapper.classes()).not.toContain('mc-file-uploader-item--default');

    // invalid => error
    await wrapper.setProps({ valid: false });
    expect(wrapper.classes()).toContain('mc-file-uploader-item--error');
  });

  it('renders errorMessage prop and allows slot override', () => {
    const wrapperProp = mount(MFileUploaderItem, {
      props: { file: { name: 'file.txt' }, errorMessage: 'Prop error' },
      global: { stubs: globalStubs },
    });
    expect(
      wrapperProp.find('.mc-file-uploader-item__error-message').text(),
    ).toContain('Prop error');

    const wrapperSlot = mount(MFileUploaderItem, {
      props: { file: { name: 'file.txt' }, errorMessage: 'Prop error' },
      slots: {
        errorMessage: '<span>Slot error</span>',
        name: '<span>Slot name</span>',
        information: '<span>Slot information</span>',
      },
      global: { stubs: globalStubs },
    });
    expect(
      wrapperSlot.find('.mc-file-uploader-item__error-message').text(),
    ).toContain('Slot error');
  });
});