@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

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

@@ -0,0 +1,626 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, afterEach, test } from 'vitest';
+import { h } from 'vue';
+import UnnnicSelect from '../index.vue';
+import i18n from '@/utils/plugins/i18n';
+
+describe('UnnnicSelect.vue', () => {
+  let wrapper;
+
+  const defaultProps = {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    modelValue: null,
+  };
+
+  const mountWrapper = (props = {}, slots = {}) => {
+    return mount(UnnnicSelect, {
+      global: {
+        plugins: [i18n],
+      },
+      props: {
+        ...defaultProps,
+        ...props,
+      },
+      slots,
+    });
+  };
+
+  beforeEach(() => {
+    wrapper = mountWrapper();
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+  });
+
+  describe('rendering', () => {
+    test('renders correctly', () => {
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.find('.unnnic-select').exists()).toBe(true);
+    });
+
+    test('renders input component', () => {
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.exists()).toBe(true);
+    });
+
+    test('renders popover component', () => {
+      const popover = wrapper.findComponent({ name: 'UnnnicPopover' });
+      expect(popover.exists()).toBe(true);
+    });
+
+    test('renders select options when popover is open', async () => {
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+      const options = wrapper.findAllComponents(
+        '[data-testid="select-option"]',
+      );
+      expect(options.length).toBe(3);
+    });
+  });
+
+  describe('props validation', () => {
+    test('validates required options prop', () => {
+      const { options } = wrapper.vm.$options.props;
+      expect(options.required).toBe(true);
+    });
+
+    test('validates required modelValue prop', () => {
+      const { modelValue } = wrapper.vm.$options.props;
+      expect(modelValue.required).toBe(true);
+    });
+
+    test('applies default values correctly', () => {
+      expect(wrapper.vm.size).toBe('md');
+      expect(wrapper.vm.type).toBe('normal');
+      expect(wrapper.vm.placeholder).toBe('');
+      expect(wrapper.vm.optionsLines).toBe(5);
+      expect(wrapper.vm.returnObject).toBe(false);
+      expect(wrapper.vm.itemLabel).toBe('label');
+      expect(wrapper.vm.itemValue).toBe('value');
+      expect(wrapper.vm.locale).toBe('en');
+      expect(wrapper.vm.enableSearch).toBe(false);
+      expect(wrapper.vm.disabled).toBe(false);
+    });
+  });
+
+  describe('input display', () => {
+    test('displays placeholder when no option is selected', () => {
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('placeholder')).toBe('');
+    });
+
+    test('displays selected option label', async () => {
+      await wrapper.setProps({ modelValue: 'option1' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('modelValue')).toBe('Option 1');
+    });
+
+    test('displays custom placeholder', async () => {
+      await wrapper.setProps({ placeholder: 'Select an option' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('placeholder')).toBe('Select an option');
+    });
+
+    test('input is readonly', () => {
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('readonly')).toBe(true);
+    });
+
+    test('input shows correct icon based on popover state', async () => {
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+
+      // Initially closed
+      expect(input.props('iconRight')).toBe('keyboard_arrow_down');
+
+      // When popover is open
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+      expect(input.props('iconRight')).toBe('keyboard_arrow_up');
+    });
+  });
+
+  describe('option selection', () => {
+    test('emits update:modelValue when option is selected', async () => {
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+      const options = wrapper.findAllComponents(
+        '[data-testid="select-option"]',
+      );
+
+      await options[0].vm.$emit('click');
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')[0]).toEqual(['option1']);
+    });
+
+    test('emits object when returnObject is true', async () => {
+      await wrapper.setProps({ returnObject: true });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+      const options = wrapper.findAllComponents(
+        '[data-testid="select-option"]',
+      );
+
+      await options[0].vm.$emit('click');
+
+      expect(wrapper.emitted('update:modelValue')[0]).toEqual([
+        { label: 'Option 1', value: 'option1' },
+      ]);
+    });
+
+    test('does not emit when same option is selected', async () => {
+      await wrapper.setProps({ modelValue: 'option1' });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+      const options = wrapper.findAllComponents(
+        '[data-testid="select-option"]',
+      );
+
+      await options[0].vm.$emit('click');
+
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+    });
+
+    test('does not emit when disabled option is clicked', async () => {
+      const disabledOptions = [
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Disabled Option', value: 'disabled', disabled: true },
+      ];
+
+      await wrapper.setProps({ options: disabledOptions });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+      const options = wrapper.findAllComponents(
+        '[data-testid="select-option"]',
+      );
+
+      await options[1].vm.$emit('click');
+
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+    });
+  });
+
+  describe('search functionality', () => {
+    test('renders search input when enableSearch is true', async () => {
+      await wrapper.setProps({ enableSearch: true });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+      const searchInputs = wrapper.findAllComponents({ name: 'UnnnicInput' });
+      expect(searchInputs.length).toBe(2); // Main input + search input
+    });
+
+    test('does not render search input when enableSearch is false', async () => {
+      await wrapper.setProps({ enableSearch: false, modelValue: true });
+      const searchInputs = wrapper.findAllComponents({ name: 'UnnnicInput' });
+      expect(searchInputs.length).toBe(1); // Only main input
+    });
+
+    test('emits update:search when search input changes', async () => {
+      await wrapper.setProps({ enableSearch: true });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+      const searchInput = wrapper.findAllComponents({ name: 'UnnnicInput' })[1];
+
+      await searchInput.vm.$emit('update:modelValue', 'test search');
+
+      expect(wrapper.emitted('update:search')).toBeTruthy();
+      expect(wrapper.emitted('update:search')[0]).toEqual(['test search']);
+    });
+
+    test('filters options based on search term', async () => {
+      await wrapper.setProps({ enableSearch: true, search: 'Option 1' });
+      const filteredOptions = wrapper.vm.filteredOptions;
+      expect(filteredOptions.length).toBe(1);
+      expect(filteredOptions[0].label).toBe('Option 1');
+    });
+
+    test('filters options by both label and value', async () => {
+      await wrapper.setProps({ enableSearch: true, search: 'option1' });
+      const filteredOptions = wrapper.vm.filteredOptions;
+      expect(filteredOptions.length).toBe(1);
+      expect(filteredOptions[0].value).toBe('option1');
+    });
+
+    test('shows all options when search is empty', async () => {
+      await wrapper.setProps({ enableSearch: true, search: '' });
+      const filteredOptions = wrapper.vm.filteredOptions;
+      expect(filteredOptions.length).toBe(3);
+    });
+  });
+
+  describe('computed properties', () => {
+    test('calculatedPopoverHeight returns correct value', () => {
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
+      expect(maxHeight).toBe('235px');
+    });
+
+    test('calculatedPopoverHeight includes search height when enabled', async () => {
+      await wrapper.setProps({ enableSearch: true });
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
+      expect(maxHeight).toBe('282px');
+    });
+
+    test('calculatedPopoverHeight returns unset when no options', async () => {
+      await wrapper.setProps({ options: [] });
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
+      expect(maxHeight).toBe('unset');
+    });
+
+    test('selectedItem returns correct item for returnObject false', async () => {
+      await wrapper.setProps({ modelValue: 'option2' });
+      const selectedItem = wrapper.vm.selectedItem;
+      expect(selectedItem.label).toBe('Option 2');
+      expect(selectedItem.value).toBe('option2');
+    });
+
+    test('selectedItem returns modelValue for returnObject true', async () => {
+      const selectedOption = { label: 'Option 2', value: 'option2' };
+      await wrapper.setProps({
+        returnObject: true,
+        modelValue: selectedOption,
+      });
+      const selectedItem = wrapper.vm.selectedItem;
+      expect(selectedItem).toStrictEqual(selectedOption);
+    });
+
+    test('inputValue returns correct label', async () => {
+      await wrapper.setProps({ modelValue: 'option3' });
+      const inputValue = wrapper.vm.inputValue;
+      expect(inputValue).toBe('Option 3');
+    });
+
+    test('inputValue returns undefined when no selection', () => {
+      const inputValue = wrapper.vm.inputValue;
+      expect(inputValue).toBeUndefined();
+    });
+  });
+
+  describe('disabled state', () => {
+    test('passes disabled prop to input', async () => {
+      await wrapper.setProps({ disabled: true });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('disabled')).toBe(true);
+    });
+
+    test('input is not disabled by default', () => {
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('disabled')).toBe(false);
+    });
+  });
+
+  describe('size prop', () => {
+    test('passes size prop to input', async () => {
+      await wrapper.setProps({ size: 'sm' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('size')).toBe('sm');
+    });
+
+    test('defaults to md size', () => {
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('size')).toBe('md');
+    });
+  });
+
+  describe('label and message props', () => {
+    test('passes label prop to input', async () => {
+      await wrapper.setProps({ label: 'Select Label' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('label')).toBe('Select Label');
+    });
+
+    test('passes message prop to input', async () => {
+      await wrapper.setProps({ message: 'Select Message' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('message')).toBe('Select Message');
+    });
+
+    test('passes errors prop to input', async () => {
+      await wrapper.setProps({ errors: 'Error message' });
+      const input = wrapper.findComponent({ name: 'UnnnicInput' });
+      expect(input.props('errors')).toBe('Error message');
+    });
+  });
+
+  describe('custom item keys', () => {
+    test('uses custom itemLabel and itemValue', async () => {
+      const customOptions = [
+        { name: 'Custom 1', id: 'custom1' },
+        { name: 'Custom 2', id: 'custom2' },
+      ];
+
+      await wrapper.setProps({
+        options: customOptions,
+        itemLabel: 'name',
+        itemValue: 'id',
+        modelValue: 'custom1',
+      });
+
+      const inputValue = wrapper.vm.inputValue;
+      expect(inputValue).toBe('Custom 1');
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles empty options array', async () => {
+      await wrapper.setProps({ options: [] });
+      expect(wrapper.vm.filteredOptions).toEqual([]);
+      expect(wrapper.vm.calculatedPopoverHeight).toBe('unset');
+    });
+
+    test('handles null modelValue', async () => {
+      await wrapper.setProps({ modelValue: null });
+      expect(wrapper.vm.inputValue).toBeUndefined();
+      expect(wrapper.vm.selectedItem).toBeUndefined();
+    });
+
+    test('handles undefined modelValue', async () => {
+      await wrapper.setProps({ modelValue: undefined });
+      expect(wrapper.vm.inputValue).toBeUndefined();
+      expect(wrapper.vm.selectedItem).toBeUndefined();
+    });
+
+    test('handles case insensitive search', async () => {
+      await wrapper.setProps({ enableSearch: true, search: 'OPTION 1' });
+      const filteredOptions = wrapper.vm.filteredOptions;
+      expect(filteredOptions.length).toBe(1);
+      expect(filteredOptions[0].label).toBe('Option 1');
+    });
+
+    test('handles partial search matches', async () => {
+      await wrapper.setProps({ enableSearch: true, search: 'tion' });
+      const filteredOptions = wrapper.vm.filteredOptions;
+      expect(filteredOptions.length).toBe(3); // All options contain 'tion'
+    });
+  });
+
+  describe('component structure', () => {
+    test('has correct component name', () => {
+      expect(wrapper.vm.$options.name).toBe('UnnnicSelect');
+    });
+
+    test('uses i18n for labels', () => {
+      const searchPlaceholder = wrapper.find('.unnnic-select__input-search');
+      if (searchPlaceholder.exists()) {
+        expect(searchPlaceholder.attributes('placeholder')).toBeDefined();
+      }
+    });
+  });
+
+  describe('infinite scroll functionality', () => {
+    test('infinite scroll is disabled by default', () => {
+      expect(wrapper.vm.infiniteScroll).toBe(false);
+    });
+
+    test('applies infinite scroll props correctly', async () => {
+      await wrapper.setProps({
+        infiniteScroll: true,
+        infiniteScrollDistance: 20,
+        infiniteScrollCanLoadMore: () => false,
+      });
+
+      expect(wrapper.vm.infiniteScroll).toBe(true);
+      expect(wrapper.vm.infiniteScrollDistance).toBe(20);
+      expect(wrapper.vm.infiniteScrollCanLoadMore()).toBe(false);
+    });
+
+    test('does not render loading when infiniteScrollLoading is false', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      const loading = wrapper.find('.unnnic-select__infinite-loading');
+      expect(loading.exists()).toBe(false);
+    });
+
+    test('sets infiniteScrollLoading to true and verifies state', async () => {
+      await wrapper.setProps({
+        infiniteScroll: true,
+        options: [
+          { label: 'Option 1', value: 'option1' },
+          { label: 'Option 2', value: 'option2' },
+        ],
+      });
+
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.infiniteScrollLoading).toBe(false);
+
+      wrapper.vm.infiniteScrollLoading = true;
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.infiniteScrollLoading).toBe(true);
+      expect(wrapper.vm.infiniteScroll).toBe(true);
+    });
+
+    test('finishInfiniteScroll sets loading to false', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.infiniteScrollLoading = true;
+      expect(wrapper.vm.infiniteScrollLoading).toBe(true);
+
+      wrapper.vm.finishInfiniteScroll();
+      expect(wrapper.vm.infiniteScrollLoading).toBe(false);
+    });
+
+    test('resetInfiniteScroll sets loading to false', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.infiniteScrollLoading = true;
+      expect(wrapper.vm.infiniteScrollLoading).toBe(true);
+
+      wrapper.vm.resetInfiniteScroll();
+      expect(wrapper.vm.infiniteScrollLoading).toBe(false);
+    });
+  });
+
+  describe('snapshot testing', () => {
+    test('matches snapshot with default props', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with selected value', async () => {
+      await wrapper.setProps({ modelValue: 'option1' });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with search enabled', async () => {
+      await wrapper.setProps({ enableSearch: true, modelValue: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with disabled state', async () => {
+      await wrapper.setProps({ disabled: true });
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    test('matches snapshot with infinite scroll enabled', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.setOpenPopover(true);
+      wrapper.vm.infiniteScrollLoading = true;
+      await wrapper.vm.$nextTick();
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+  });
+
+  describe('option slot', () => {
+    test('renders custom content for each option through the option slot', async () => {
+      const slotWrapper = mountWrapper(
+        {},
+        {
+          option: (slotProps) =>
+            h('span', { class: 'custom-option' }, `custom-${slotProps.label}`),
+        },
+      );
+
+      slotWrapper.vm.setOpenPopover(true);
+      await slotWrapper.vm.$nextTick();
+
+      const options = slotWrapper.findAllComponents({
+        name: 'UnnnicPopoverOption',
+      });
+      expect(options.length).toBe(3);
+      expect(options[0].find('.custom-option').exists()).toBe(true);
+      expect(options[0].find('.custom-option').text()).toBe('custom-Option 1');
+
+      slotWrapper.unmount();
+    });
+
+    test('falls back to default label rendering without option slot', async () => {
+      wrapper.vm.setOpenPopover(true);
+      await wrapper.vm.$nextTick();
+
+      const options = wrapper.findAllComponents({
+        name: 'UnnnicPopoverOption',
+      });
+      expect(options[0].find('.custom-option').exists()).toBe(false);
+      expect(options[0].find('.unnnic-popover-option__label').exists()).toBe(
+        true,
+      );
+    });
+  });
+
+  describe('selected slot (custom trigger)', () => {
+    const selectedSlot = {
+      selected: (slotProps) =>
+        h('span', { class: 'custom-selected' }, `selected-${slotProps.label}`),
+    };
+
+    test('renders custom trigger when selected slot is used and an item is selected', () => {
+      const slotWrapper = mountWrapper({ modelValue: 'option1' }, selectedSlot);
+
+      expect(slotWrapper.find('.unnnic-select__trigger').exists()).toBe(true);
+      expect(slotWrapper.find('.custom-selected').text()).toBe(
+        'selected-Option 1',
+      );
+      expect(slotWrapper.findComponent({ name: 'UnnnicInput' }).exists()).toBe(
+        false,
+      );
+
+      slotWrapper.unmount();
+    });
+
+    test('falls back to UnnnicInput when no item is selected', () => {
+      const slotWrapper = mountWrapper({ modelValue: null }, selectedSlot);
+
+      expect(slotWrapper.find('.unnnic-select__trigger').exists()).toBe(false);
+      expect(slotWrapper.findComponent({ name: 'UnnnicInput' }).exists()).toBe(
+        true,
+      );
+
+      slotWrapper.unmount();
+    });
+
+    test('falls back to UnnnicInput when selected slot is not provided', () => {
+      const fallbackWrapper = mountWrapper({ modelValue: 'option1' });
+
+      expect(fallbackWrapper.find('.unnnic-select__trigger').exists()).toBe(
+        false,
+      );
+      expect(
+        fallbackWrapper.findComponent({ name: 'UnnnicInput' }).exists(),
+      ).toBe(true);
+
+      fallbackWrapper.unmount();
+    });
+
+    test('shows the field label above the custom trigger', () => {
+      const slotWrapper = mountWrapper(
+        { modelValue: 'option1', label: 'Representative' },
+        selectedSlot,
+      );
+
+      const label = slotWrapper.find('.unnnic-select__trigger-label');
+      expect(label.exists()).toBe(true);
+      expect(label.text()).toBe('Representative');
+
+      slotWrapper.unmount();
+    });
+
+    test('reflects the popover state through the chevron icon', async () => {
+      const slotWrapper = mountWrapper({ modelValue: 'option1' }, selectedSlot);
+
+      const arrow = slotWrapper.find('.unnnic-select__trigger-arrow');
+      expect(arrow.exists()).toBe(true);
+
+      slotWrapper.vm.setOpenPopover(true);
+      await slotWrapper.vm.$nextTick();
+      expect(slotWrapper.vm.openPopover).toBe(true);
+
+      slotWrapper.unmount();
+    });
+
+    test('emits update:modelValue with empty value when clear is clicked', async () => {
+      const slotWrapper = mountWrapper(
+        { modelValue: 'option1', clearable: true },
+        selectedSlot,
+      );
+
+      const clear = slotWrapper.find('.unnnic-select__trigger-clear');
+      expect(clear.exists()).toBe(true);
+
+      await clear.trigger('click');
+
+      expect(slotWrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(slotWrapper.emitted('update:modelValue')[0]).toEqual(['']);
+
+      slotWrapper.unmount();
+    });
+
+    test('does not render clear icon when clearable is false', () => {
+      const slotWrapper = mountWrapper(
+        { modelValue: 'option1', clearable: false },
+        selectedSlot,
+      );
+
+      expect(slotWrapper.find('.unnnic-select__trigger-clear').exists()).toBe(
+        false,
+      );
+
+      slotWrapper.unmount();
+    });
+  });
+});