@weni/unnnic-system 3.28.2-alpha.3 → 3.30.0

package/src/components/DropArea/__tests__/DropArea.spec.js

@@ -0,0 +1,333 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+
+import DropArea from '../DropArea.vue';
+import i18n from '@/utils/plugins/i18n';
+
+const createFile = (name, type, sizeBytes = 1024) =>
+  new File(['x'.repeat(sizeBytes)], name, { type });
+
+const mountDropArea = (props = {}, listeners = {}) =>
+  mount(DropArea, {
+    props: {
+      currentFiles: [],
+      ...props,
+    },
+    attrs: listeners,
+    global: {
+      plugins: [i18n],
+      stubs: {
+        UnnnicIcon: true,
+      },
+    },
+  });
+
+describe('DropArea', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders default title and supported formats', () => {
+    const wrapper = mountDropArea({ supportedFormats: '.pdf,.png' });
+
+    expect(wrapper.text()).toContain('Drag your file here or');
+    expect(wrapper.attributes('title')).toBeUndefined();
+    expect(
+      wrapper
+        .find('.unnnic-upload-area__dropzone__content__subtitle')
+        .attributes('title'),
+    ).toBe('.PDF, .PNG');
+  });
+
+  it('uses custom subtitle when provided', () => {
+    const wrapper = mountDropArea({ subtitle: 'Custom subtitle' });
+
+    expect(wrapper.text()).toContain('Custom subtitle');
+  });
+
+  it('opens file picker when dropzone is clicked', async () => {
+    const wrapper = mountDropArea();
+    const clickSpy = vi.spyOn(wrapper.vm.$refs.file, 'click');
+
+    await wrapper.find('.unnnic-upload-area__dropzone').trigger('click');
+
+    expect(clickSpy).toHaveBeenCalled();
+  });
+
+  it('does not react when disabled', async () => {
+    const wrapper = mountDropArea({ disabled: true });
+    const clickSpy = vi.spyOn(wrapper.vm.$refs.file, 'click');
+    const file = createFile('notes.txt', 'text/plain');
+
+    await wrapper.trigger('dragenter');
+    await wrapper.trigger('dragover');
+    await wrapper.trigger('dragleave');
+    await wrapper.trigger('dragend');
+    await wrapper.trigger('drop', { dataTransfer: { files: [file] } });
+    await wrapper.trigger('click');
+
+    const input = wrapper.find('input[type="file"]');
+    Object.defineProperty(input.element, 'files', {
+      configurable: true,
+      value: [file],
+    });
+    await input.trigger('input');
+
+    expect(wrapper.classes()).not.toContain(
+      'unnnic-upload-area__dropzone__is-dragover',
+    );
+    expect(clickSpy).not.toHaveBeenCalled();
+    expect(wrapper.emitted('update:currentFiles')).toBeUndefined();
+  });
+
+  it('handles drag enter, over, leave, and end states', async () => {
+    const wrapper = mountDropArea();
+
+    await wrapper.trigger('dragenter');
+    expect(wrapper.classes()).toContain(
+      'unnnic-upload-area__dropzone__is-dragover',
+    );
+
+    await wrapper.trigger('dragover');
+    await wrapper.trigger('dragleave');
+    expect(wrapper.classes()).not.toContain(
+      'unnnic-upload-area__dropzone__is-dragover',
+    );
+
+    await wrapper.trigger('dragenter');
+    await wrapper.trigger('dragend');
+    expect(wrapper.classes()).not.toContain(
+      'unnnic-upload-area__dropzone__is-dragover',
+    );
+  });
+
+  it('adds valid files on drop', async () => {
+    const wrapper = mountDropArea({ supportedFormats: '.txt' });
+    const file = createFile('notes.txt', 'text/plain');
+    const dataTransfer = { files: [file] };
+
+    await wrapper.trigger('drop', { dataTransfer });
+
+    expect(wrapper.emitted('update:currentFiles')[0][0]).toEqual([file]);
+    expect(wrapper.emitted('fileChange')[0][0]).toEqual([file]);
+  });
+
+  it('adds valid files from file input change', async () => {
+    const wrapper = mountDropArea({ supportedFormats: '.txt' });
+    const file = createFile('notes.txt', 'text/plain');
+    const input = wrapper.find('input[type="file"]');
+
+    Object.defineProperty(input.element, 'files', {
+      configurable: true,
+      value: [file],
+    });
+
+    await input.trigger('input');
+
+    expect(wrapper.emitted('update:currentFiles')).toBeTruthy();
+    expect(input.element.value).toBe('');
+  });
+
+  it('shows error when multiple files are not allowed', async () => {
+    const wrapper = mountDropArea({ acceptMultiple: false });
+    const files = [
+      createFile('a.txt', 'text/plain'),
+      createFile('b.txt', 'text/plain'),
+    ];
+
+    await wrapper.trigger('drop', { dataTransfer: { files } });
+
+    expect(wrapper.classes()).toContain(
+      'unnnic-upload-area__dropzone__has-error',
+    );
+    expect(wrapper.emitted('update:currentFiles')).toBeUndefined();
+
+    vi.advanceTimersByTime(5000);
+    await flushPromises();
+    expect(wrapper.classes()).not.toContain(
+      'unnnic-upload-area__dropzone__has-error',
+    );
+  });
+
+  it('emits unsupportedFormat when handler is provided', async () => {
+    const wrapper = mountDropArea(
+      { supportedFormats: '.pdf' },
+      { onUnsupportedFormat: () => {} },
+    );
+    const file = createFile('notes.txt', 'text/plain');
+
+    await wrapper.trigger('drop', { dataTransfer: { files: [file] } });
+
+    expect(wrapper.emitted('unsupportedFormat')).toBeTruthy();
+  });
+
+  it('shows error for unsupported format without custom handler', async () => {
+    const wrapper = mountDropArea({ supportedFormats: '.pdf' });
+    const file = createFile('notes.txt', 'text/plain');
+
+    await wrapper.trigger('drop', { dataTransfer: { files: [file] } });
+
+    expect(wrapper.classes()).toContain(
+      'unnnic-upload-area__dropzone__has-error',
+    );
+  });
+
+  it('emits exceededTheMaximumFileSizeLimit when handler is provided', async () => {
+    const wrapper = mountDropArea(
+      { maxFileSize: 0.001 },
+      { onExceededTheMaximumFileSizeLimit: () => {} },
+    );
+    const file = createFile('large.txt', 'text/plain', 1024 * 1024);
+
+    await wrapper.trigger('drop', { dataTransfer: { files: [file] } });
+
+    expect(wrapper.emitted('exceededTheMaximumFileSizeLimit')).toBeTruthy();
+  });
+
+  it('shows error when file exceeds max size without custom handler', async () => {
+    const wrapper = mountDropArea({ maxFileSize: 0.001 });
+    const file = createFile('large.txt', 'text/plain', 1024 * 1024);
+
+    await wrapper.trigger('drop', { dataTransfer: { files: [file] } });
+
+    expect(wrapper.classes()).toContain(
+      'unnnic-upload-area__dropzone__has-error',
+    );
+  });
+
+  it('accepts any format when supportedFormats is *', async () => {
+    const wrapper = mountDropArea({ supportedFormats: '*' });
+    const file = createFile('archive.zip', 'application/zip');
+
+    await wrapper.trigger('drop', { dataTransfer: { files: [file] } });
+
+    expect(wrapper.emitted('update:currentFiles')).toBeTruthy();
+  });
+
+  it('shows error when maximum uploads is exceeded', async () => {
+    const existing = createFile('existing.txt', 'text/plain');
+    const wrapper = mountDropArea({
+      currentFiles: [existing],
+      maximumUploads: 1,
+      supportedFormats: '.txt',
+    });
+    const file = createFile('new.txt', 'text/plain');
+
+    await wrapper.trigger('drop', { dataTransfer: { files: [file] } });
+
+    expect(wrapper.classes()).toContain(
+      'unnnic-upload-area__dropzone__has-error',
+    );
+  });
+
+  it('replaces files when shouldReplace is true', async () => {
+    const existing = createFile('existing.txt', 'text/plain');
+    const replacement = createFile('new.txt', 'text/plain');
+    const wrapper = mountDropArea({
+      currentFiles: [existing],
+      shouldReplace: true,
+      supportedFormats: '.txt',
+    });
+
+    await wrapper.trigger('drop', { dataTransfer: { files: [replacement] } });
+
+    expect(wrapper.emitted('update:currentFiles')[0][0]).toEqual([replacement]);
+  });
+
+  it('appends files to currentFiles by default', async () => {
+    const existing = createFile('existing.txt', 'text/plain');
+    const incoming = createFile('new.txt', 'text/plain');
+    const wrapper = mountDropArea({
+      currentFiles: [existing],
+      maximumUploads: 2,
+      supportedFormats: '.txt',
+    });
+
+    await wrapper.trigger('drop', { dataTransfer: { files: [incoming] } });
+
+    expect(wrapper.emitted('update:currentFiles')[0][0]).toEqual([
+      existing,
+      incoming,
+    ]);
+  });
+
+  it('filters out files that exceed max size during addFiles', async () => {
+    const wrapper = mountDropArea({
+      supportedFormats: '.txt',
+      maxFileSize: 0.001,
+      maximumUploads: 2,
+    });
+    const validFile = createFile('notes.txt', 'text/plain', 100);
+    const largeFile = createFile('large.txt', 'text/plain', 1024 * 1024);
+
+    await wrapper.trigger('drop', {
+      dataTransfer: { files: [validFile, largeFile] },
+    });
+
+    expect(wrapper.emitted('update:currentFiles')[0][0]).toEqual([validFile]);
+  });
+
+  it('shows invalid subtitle when hasError is true', async () => {
+    const wrapper = mountDropArea({ supportedFormats: '.pdf' });
+    const file = createFile('notes.txt', 'text/plain');
+
+    await wrapper.trigger('drop', { dataTransfer: { files: [file] } });
+
+    expect(wrapper.text()).toContain('File not supported');
+  });
+
+  it('keeps dragover state until all dragenter events are reversed', async () => {
+    const wrapper = mountDropArea();
+
+    await wrapper.trigger('dragenter');
+    await wrapper.trigger('dragenter');
+    await wrapper.trigger('dragleave');
+
+    expect(wrapper.classes()).toContain(
+      'unnnic-upload-area__dropzone__is-dragover',
+    );
+
+    await wrapper.trigger('dragleave');
+
+    expect(wrapper.classes()).not.toContain(
+      'unnnic-upload-area__dropzone__is-dragover',
+    );
+  });
+
+  it('does not add files from input when validation fails', async () => {
+    const wrapper = mountDropArea({ supportedFormats: '.pdf' });
+    const file = createFile('notes.txt', 'text/plain');
+    const input = wrapper.find('input[type="file"]');
+
+    Object.defineProperty(input.element, 'files', {
+      configurable: true,
+      value: [file],
+    });
+
+    await input.trigger('input');
+
+    expect(wrapper.emitted('update:currentFiles')).toBeUndefined();
+    expect(input.element.value).toBe('');
+  });
+
+  it('renders custom title and subtitle slots', () => {
+    const wrapper = mount(DropArea, {
+      props: { currentFiles: [] },
+      slots: {
+        title: '<strong data-testid="custom-title">Upload</strong>',
+        subtitle: '<em data-testid="custom-subtitle">Only CSV</em>',
+      },
+      global: {
+        plugins: [i18n],
+        stubs: { UnnnicIcon: true },
+      },
+    });
+
+    expect(wrapper.find('[data-testid="custom-title"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="custom-subtitle"]').exists()).toBe(true);
+  });
+});

package/src/components/MultiSelect/__tests__/MultiSelect.spec.js

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount, flushPromises } from '@vue/test-utils';
 import { beforeEach, describe, expect, afterEach, test } from 'vitest';
 import UnnnicMultiSelect from '../index.vue';
 import i18n from '@/utils/plugins/i18n';
@@ -15,10 +15,13 @@ describe('UnnnicMultiSelect.vue', () => {
     modelValue: [],
   };
 
-  const mountWrapper = (props = {}, slots = {}) => {
+  const mountWrapper = (props = {}, slots = {}, options = {}) => {
     return mount(UnnnicMultiSelect, {
+      attachTo: document.body,
+      ...options,
       global: {
         plugins: [i18n],
+        ...(options.global || {}),
       },
       props: {
         ...defaultProps,
@@ -269,6 +272,30 @@ describe('UnnnicMultiSelect.vue', () => {
       const filteredOptions = wrapper.vm.filteredOptions;
       expect(filteredOptions.length).toBe(3);
     });
+
+    test('shows no results message when search has no matches', async () => {
+      await wrapper.setProps({ enableSearch: true, search: 'no-match' });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.filteredOptions).toEqual([]);
+      const noResults = wrapper.find(
+        '.unnnic-multi-select__content-no-results',
+      );
+      if (noResults.exists()) {
+        expect(noResults.text()).toContain('No results found');
+      }
+    });
+
+    test('clears search when popover closes', async () => {
+      await wrapper.setProps({ enableSearch: true, search: 'option' });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+      wrapper.vm.setOpenPopover(false);
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted('update:search')).toContainEqual(['']);
+    });
   });
 
   describe('computed properties', () => {
@@ -489,6 +516,16 @@ describe('UnnnicMultiSelect.vue', () => {
       expect(wrapper.emitted('update:modelValue')).toBeTruthy();
       expect(wrapper.emitted('update:modelValue')[0]).toEqual([[]]);
     });
+
+    test('shows clear button when clearable and items are selected', async () => {
+      await wrapper.setProps({
+        clearable: true,
+        modelValue: ['option1'],
+      });
+
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('showClear')).toBe(true);
+    });
   });
 
   describe('getActivatedOptionStatus', () => {
@@ -520,6 +557,76 @@ describe('UnnnicMultiSelect.vue', () => {
     });
   });
 
+  describe('keyboard navigation', () => {
+    test('closes popover through keyboard close callback', async () => {
+      wrapper.vm.setOpenPopover(true);
+      await flushPromises();
+      await flushPromises();
+
+      document.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }),
+      );
+      await flushPromises();
+      document.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      );
+      await flushPromises();
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    });
+
+    test('ignores disabled options on Enter key', async () => {
+      await wrapper.setProps({
+        options: [
+          { label: 'Disabled', value: 'disabled', disabled: true },
+          { label: 'Option 2', value: 'option2' },
+        ],
+      });
+      wrapper.vm.setOpenPopover(true);
+      await flushPromises();
+      await flushPromises();
+
+      document.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }),
+      );
+      await flushPromises();
+      document.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }),
+      );
+      await flushPromises();
+
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+    });
+
+    test('toggles option through option component emit', async () => {
+      await wrapper.setProps({ modelValue: ['option1'] });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+      const options = wrapper.findAllComponents({
+        name: 'UnnnicMultiSelectOption',
+      });
+
+      await options[0].vm.$emit('update:model-value', false);
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    });
+
+    test('closes popover through popover update event', async () => {
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      const popover = wrapper.findComponent({ name: 'UnnnicPopover' });
+      if (popover.exists()) {
+        await popover.vm.$emit('update:open', false);
+      } else {
+        wrapper.vm.setOpenPopover(false);
+      }
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.openPopover).toBe(false);
+    });
+  });
+
   describe('snapshot testing', () => {
     test('matches snapshot with default props', () => {
       expect(wrapper.html()).toMatchSnapshot();

package/src/components/MultiSelect/index.vue

@@ -175,7 +175,7 @@ const keyboard = useSelectKeyboard<SelectOption>(
   },
   {
     closeOnSelect: false,
-    closePopover: () => (base.openPopover.value = false),
+    closePopover: () => setOpenPopover(false),
     openPopoverRef: base.openPopover,
   },
 );

package/src/components/PageHeader/__tests__/PageHeader.spec.js

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import PageHeader from '../PageHeader.vue';
+
+const mountPageHeader = (props = {}, slots = {}) =>
+  mount(PageHeader, {
+    props: {
+      title: 'Page title',
+      ...props,
+    },
+    slots,
+    global: {
+      stubs: {
+        UnnnicButton: {
+          template:
+            '<button data-testid="back-button-stub" @click="$emit(\'click\')"><slot /></button>',
+        },
+      },
+    },
+  });
+
+describe('PageHeader', () => {
+  it('renders title and description', () => {
+    const wrapper = mountPageHeader({
+      description: 'Page description',
+    });
+
+    expect(wrapper.find('[data-testid="page-title"]').text()).toBe(
+      'Page title',
+    );
+    expect(wrapper.find('[data-testid="page-description"]').text()).toBe(
+      'Page description',
+    );
+  });
+
+  it('renders back button and emits back event', async () => {
+    const wrapper = mountPageHeader({ hasBackButton: true });
+
+    expect(wrapper.classes()).toContain('page-header--has-back-button');
+    await wrapper.find('[data-testid="back-button"]').trigger('click');
+    expect(wrapper.emitted('back')).toBeTruthy();
+  });
+
+  it('renders actions slot', () => {
+    const wrapper = mountPageHeader(
+      {},
+      {
+        actions: '<button data-testid="action-btn">Action</button>',
+      },
+    );
+
+    expect(wrapper.find('[data-testid="page-actions"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="action-btn"]').exists()).toBe(true);
+  });
+
+  it('renders tabs slot and removes divider class', () => {
+    const wrapper = mountPageHeader(
+      {},
+      {
+        tabs: '<nav data-testid="tabs-nav">Tabs</nav>',
+      },
+    );
+
+    expect(wrapper.find('[data-testid="page-tabs"]').exists()).toBe(true);
+    expect(wrapper.classes()).toContain('page-header--no-divider');
+  });
+
+  it('hides divider when hideDivider is true', () => {
+    const wrapper = mountPageHeader({ hideDivider: true });
+
+    expect(wrapper.classes()).toContain('page-header--no-divider');
+  });
+
+  it('renders custom infos slot', () => {
+    const wrapper = mountPageHeader(
+      {},
+      {
+        infos: '<section data-testid="custom-infos">Custom</section>',
+      },
+    );
+
+    expect(wrapper.find('[data-testid="custom-infos"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="page-title"]').exists()).toBe(false);
+  });
+
+  it('renders tag slot inside default infos', () => {
+    const wrapper = mountPageHeader(
+      {},
+      {
+        tag: '<span data-testid="header-tag">Tag</span>',
+      },
+    );
+
+    expect(wrapper.find('[data-testid="header-tag"]').exists()).toBe(true);
+  });
+});

package/src/components/Pagination/__tests__/Pagination.spec.js

@@ -205,4 +205,103 @@ describe('Pagination', () => {
       });
     });
   });
+
+  describe('edge cases', () => {
+    it('renders single page pagination', () => {
+      const wrapper = setup({ modelValue: 1, max: 1, disabled: false });
+
+      expect(wrapper.findAll('[data-test="page-button"]')).toHaveLength(1);
+      expect(
+        wrapper.find('[data-test="next-button"]').isDisabled(),
+      ).toBeTruthy();
+    });
+  });
+
+  describe('when previous is not available', () => {
+    it('does not emit when previous button is clicked on first page', async () => {
+      const wrapper = setup({
+        modelValue: 1,
+        max: 10,
+        disabled: false,
+      });
+
+      await wrapper.find('[data-test="previous-button"]').trigger('click');
+      expect(wrapper.emitted('update:model-value')).toBeUndefined();
+    });
+  });
+
+  describe('when next is not available', () => {
+    it('does not emit when next button is clicked on last page', async () => {
+      const wrapper = setup({
+        modelValue: 10,
+        max: 10,
+        disabled: false,
+      });
+
+      await wrapper.find('[data-test="next-button"]').trigger('click');
+      expect(wrapper.emitted('update:model-value')).toBeUndefined();
+    });
+  });
+
+  describe('when pagination is disabled', () => {
+    it('disables all page buttons', () => {
+      const wrapper = setup({
+        modelValue: 2,
+        max: 5,
+        disabled: true,
+      });
+
+      wrapper.findAll('[data-test="page-button"]').forEach((button) => {
+        expect(button.isDisabled()).toBeTruthy();
+      });
+      expect(
+        wrapper.find('[data-test="previous-button"]').isDisabled(),
+      ).toBeTruthy();
+      expect(
+        wrapper.find('[data-test="next-button"]').isDisabled(),
+      ).toBeTruthy();
+    });
+  });
+
+  describe('when previous page is outside visible pages', () => {
+    it('updates reference when navigating to a hidden page', async () => {
+      const wrapper = setup({
+        modelValue: 4,
+        max: 10,
+        disabled: false,
+      });
+
+      await wrapper.find('[data-test="previous-button"]').trigger('click');
+
+      expect(wrapper.emitted('update:model-value')).toContainEqual([3]);
+      expect(wrapper.vm.reference).toBe(3);
+    });
+  });
+
+  describe('when next page is outside visible pages', () => {
+    it('updates reference when navigating forward to a hidden page', async () => {
+      const wrapper = setup({
+        modelValue: 6,
+        max: 10,
+        disabled: false,
+      });
+
+      await wrapper.find('[data-test="next-button"]').trigger('click');
+
+      expect(wrapper.emitted('update:model-value')).toContainEqual([7]);
+      expect(wrapper.vm.reference).toBe(7);
+    });
+  });
+
+  describe('when initialized on a page outside visible range', () => {
+    it('sets reference to the current page', () => {
+      const wrapper = setup({
+        modelValue: 8,
+        max: 20,
+        disabled: false,
+      });
+
+      expect(wrapper.vm.reference).toBe(8);
+    });
+  });
 });