@weni/unnnic-system 2.15.0 → 2.16.0

package/src/components/SelectSmart/SelectSmartMultipleHeader.vue

@@ -16,6 +16,7 @@
         <p
           v-if="selectedOptions.length > multipleSelectedsTags"
           class="unnnic-select-smart__options__multiple__selecteds__remaining"
+          data-testid="remaining-count"
         >
           +{{ selectedOptions.length - multipleSelectedsTags }}
         </p>
@@ -24,6 +25,7 @@
     <p
       v-if="!selectedOptions[0]"
       class="unnnic-select-smart__options__multiple--without-multiples"
+      data-testid="without-selects-message"
     >
       {{ withoutSelectsMessage || i18n('without_multiple_selected') }}
     </p>

package/src/components/SelectSmart/SelectSmartOption.vue

@@ -9,10 +9,12 @@
       'unnnic-select-smart-option--with-checkbox': allowCheckbox,
     }"
     :title="label"
+    data-testid="select-smart-option"
   >
     <UnnnicCheckbox
       v-if="allowCheckbox"
       ref="checkbox"
+      data-testid="checkbox"
       :modelValue="active"
       :size="size"
     />
@@ -22,10 +24,12 @@
           'unnnic-select-smart-option__label',
           `unnnic-select-smart-option__label--${size}`,
         ]"
+        data-testid="label"
         >{{ label }}</span
       >
       <p
         v-if="description"
+        data-testid="description"
         :class="[
           'unnnic-select-smart-option__description',
           `unnnic-select-smart-option__description--${size}`,

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

@@ -0,0 +1,240 @@
+import { vi } from 'vitest';
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+
+import SelectSmart from '../SelectSmart.vue';
+import DropdownSkeleton from '../../Dropdown/DropdownSkeleton.vue';
+
+describe('SelectSmart.vue', () => {
+  let wrapper;
+
+  const options = [
+    { label: 'Option 1', value: 'option1' },
+    { label: 'Option 2', value: 'option2' },
+    { label: 'Option 3', value: 'option3' },
+    { label: 'Option 4', value: 'option4' },
+    { label: 'Option 5', value: 'option5' },
+  ];
+
+  const mountWrapper = (props = {}) => {
+    wrapper = shallowMount(SelectSmart, {
+      propsData: {
+        options: [],
+        ...props,
+      },
+      global: {
+        stubs: {
+          DropdownSkeleton,
+        },
+      },
+    });
+  };
+
+  beforeEach(() => {
+    mountWrapper();
+  });
+
+  const selectSmart = () => wrapper.find('[data-testid="select-smart"]');
+  const input = () =>
+    wrapper.findComponent('[data-testid="select-smart-input"]');
+  const optionsContainer = () =>
+    wrapper.find('[data-testid="options-container"]');
+
+  describe('Rendering', () => {
+    it('should render the component correctly', () => {
+      expect(selectSmart().exists()).toBe(true);
+    });
+
+    it('should display placeholder text when no selection is made', () => {
+      const placeholderText = 'Select an option';
+      mountWrapper({ placeholder: placeholderText });
+
+      expect(input().props('placeholder')).toBe(placeholderText);
+    });
+  });
+
+  describe('Dropdown Visibility', () => {
+    it('should open the dropdown when input is clicked', async () => {
+      await input().trigger('click');
+
+      expect(optionsContainer().exists()).toBe(true);
+    });
+
+    it('should close the dropdown on active is false', async () => {
+      wrapper.vm.active = true;
+      await nextTick();
+      expect(optionsContainer().exists()).toBe(true);
+
+      wrapper.vm.active = false;
+      await nextTick();
+      expect(optionsContainer().exists()).toBe(false);
+    });
+
+    it('should toggle the dropdown visibility on input click', async () => {
+      await input().trigger('click');
+      expect(optionsContainer().exists()).toBe(true);
+
+      await input().trigger('click');
+
+      expect(optionsContainer().exists()).toBe(false);
+    });
+
+    it('should close the dropdown when pressing escape key', async () => {
+      await input().trigger('click');
+      expect(optionsContainer().exists()).toBe(true);
+
+      await selectSmart().trigger('keydown', { key: 'Escape' });
+
+      expect(optionsContainer().exists()).toBe(false);
+    });
+  });
+
+  describe('Autocomplete Functionality', () => {
+    beforeEach(async () => {
+      mountWrapper({
+        options: [
+          { label: 'Apple', value: 'apple' },
+          { label: 'Banana', value: 'banana' },
+          { label: 'Orange', value: 'orange' },
+        ],
+      });
+    });
+
+    it('should filter options based on search input', async () => {
+      wrapper.vm.active = true;
+      const filteredOptions = () =>
+        wrapper.findAllComponents('[data-testid="option"]');
+
+      await wrapper.setData({ searchValue: 'ap' });
+
+      expect(filteredOptions().length).toBe(1);
+      expect(filteredOptions()[0].props('label')).toBe('Apple');
+
+      await wrapper.setData({ searchValue: 'or' });
+      expect(filteredOptions().length).toBe(1);
+      expect(filteredOptions()[0].props('label')).toBe('Orange');
+    });
+
+    it('should clear search input on focus if autocompleteClearOnFocus is true', async () => {
+      await wrapper.setProps({
+        autocomplete: true,
+        autocompleteClearOnFocus: true,
+      });
+      await wrapper.setData({ searchValue: 'ap' });
+
+      await input().trigger('click');
+
+      expect(wrapper.vm.searchValue).toBe('');
+    });
+  });
+
+  describe('Option Selection', () => {
+    beforeEach(async () => {
+      mountWrapper({
+        options,
+      });
+
+      wrapper.vm.active = true;
+    });
+
+    afterEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('should select a single option', async () => {
+      await wrapper.setProps({ modelValue: [] });
+
+      const option = wrapper.findComponent('[data-testid="option"]');
+      await option.trigger('click');
+
+      expect(wrapper.emitted('update:modelValue')[0][0]).toEqual([options[0]]);
+    });
+
+    it('should add an option to the selection if multiple is true', async () => {
+      await wrapper.setProps({
+        multiple: true,
+        modelValue: [options[0]],
+      });
+
+      const optionsElements = wrapper.findAllComponents(
+        '[data-testid="option"]',
+      );
+      await optionsElements[1].trigger('click');
+
+      expect(wrapper.emitted('update:modelValue')[2][0]).toEqual([
+        options[0],
+        options[1],
+      ]);
+    });
+
+    it('should unselect an option if clicked again in multiple mode', async () => {
+      await wrapper.setProps({
+        multiple: true,
+        modelValue: [options[0]],
+      });
+
+      const optionsElements = wrapper.findAllComponents(
+        '[data-testid="option"]',
+      );
+      await optionsElements[0].trigger('click');
+
+      expect(wrapper.emitted('update:modelValue')[1][0]).toEqual([]);
+    });
+  });
+
+  describe('Scrolling Behavior', () => {
+    beforeEach(async () => {
+      mountWrapper({
+        options,
+      });
+    });
+
+    it('should scroll to selected option on opening', async () => {
+      wrapper.vm.scrollToOption = vi.fn();
+      await wrapper.setProps({
+        modelValue: [options[2]],
+      });
+
+      await nextTick();
+      wrapper.vm.active = true;
+      await nextTick();
+      await nextTick();
+
+      expect(wrapper.vm.scrollToOption).toHaveBeenCalledWith(2, 'center');
+    });
+
+    it('should scroll to focused option when navigating with keyboard', async () => {
+      wrapper.vm.active = true;
+      await nextTick();
+
+      await selectSmart().trigger('keydown', { key: 'ArrowDown' });
+
+      const optionsElements = wrapper.findAllComponents(
+        '[data-testid="option"]',
+      );
+      const focusedOption = optionsElements.find(
+        (option) => option.props('focused') === true,
+      );
+
+      expect(focusedOption.exists()).toBe(true);
+
+      const dropdownRect = optionsContainer().element.getBoundingClientRect();
+      const focusedRect = focusedOption.element.getBoundingClientRect();
+
+      expect(focusedRect.top).toBeGreaterThanOrEqual(dropdownRect.top);
+      expect(focusedRect.bottom).toBeLessThanOrEqual(dropdownRect.bottom);
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('should select focused option with enter key', async () => {
+      wrapper.vm.active = true;
+      await wrapper.setData({ focusedOption: options[1] });
+
+      await selectSmart().trigger('keydown', { key: 'Enter' });
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')[0][0]).toEqual([options[1]]);
+    });
+  });
+});

package/src/components/SelectSmart/__tests__/SelectSmartMultipleHeader.spec.js

@@ -0,0 +1,86 @@
+import { shallowMount } from '@vue/test-utils';
+import SelectSmartMultipleHeader from '../SelectSmartMultipleHeader.vue';
+import Tag from '@/components/Tag/Tag.vue';
+
+describe('SelectSmartMultipleHeader.vue', () => {
+  let wrapper;
+
+  const mountWrapper = (props = {}) => {
+    wrapper = shallowMount(SelectSmartMultipleHeader, {
+      propsData: {
+        selectedOptions: [],
+        ...props,
+      },
+      stubs: {
+        Tag,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    mountWrapper();
+  });
+
+  describe('initial rendering', () => {
+    it('matches the snapshot', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it('renders without any selected options by default', () => {
+      const withoutSelectsMessage = wrapper.find(
+        '[data-testid="without-selects-message"]',
+      );
+      expect(withoutSelectsMessage.exists()).toBe(true);
+      expect(withoutSelectsMessage.text()).toBe('No option selected');
+    });
+
+    it('displays the correct "without selects" message when no options are selected', async () => {
+      await wrapper.setProps({ withoutSelectsMessage: 'No items selected' });
+      const withoutSelectsMessage = wrapper.find(
+        '[data-testid="without-selects-message"]',
+      );
+      expect(withoutSelectsMessage.text()).toBe('No items selected');
+    });
+  });
+
+  describe('selected options display', () => {
+    beforeEach(() => {
+      mountWrapper({
+        selectedOptions: [
+          { value: 1, label: 'Option 1' },
+          { value: 2, label: 'Option 2' },
+          { value: 3, label: 'Option 3' },
+        ],
+      });
+    });
+
+    it('renders tags for the first multiple selected options', () => {
+      const tags = wrapper.findAllComponents(Tag);
+      expect(tags.length).toBe(2);
+    });
+
+    it('displays remaining selected options count correctly', () => {
+      const remainingCount = wrapper.find('[data-testid="remaining-count"]');
+      expect(remainingCount.exists()).toBe(true);
+      expect(remainingCount.text()).toBe('+1');
+    });
+  });
+
+  describe('unselectOption method', () => {
+    it('emits "unselect-option" event when a Tag close icon is clicked', async () => {
+      mountWrapper({
+        selectedOptions: [
+          { value: 1, label: 'Option 1' },
+          { value: 2, label: 'Option 2' },
+        ],
+      });
+
+      const firstTag = wrapper.findComponent(Tag);
+      await firstTag.vm.$emit('close');
+      expect(wrapper.emitted('unselect-option')).toBeTruthy();
+      expect(wrapper.emitted('unselect-option')[0]).toEqual([
+        { value: 1, label: 'Option 1' },
+      ]);
+    });
+  });
+});

package/src/components/SelectSmart/__tests__/SelectSmartOption.spec.js

@@ -0,0 +1,114 @@
+import { shallowMount } from '@vue/test-utils';
+import SelectSmartOption from '../SelectSmartOption.vue';
+
+describe('SelectSmartOption.vue', () => {
+  let wrapper;
+
+  const mountWrapper = (props = {}) => {
+    wrapper = shallowMount(SelectSmartOption, {
+      propsData: {
+        label: 'Test Option',
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    mountWrapper();
+  });
+
+  describe('Initial rendering', () => {
+    it('matches the snapshot', () => {
+      expect(wrapper.html()).toMatchSnapshot();
+    });
+
+    it('renders the component with the correct label', () => {
+      expect(wrapper.find('[data-testid="label"]').text()).toBe('Test Option');
+    });
+
+    it('applies the title attribute with the label text', () => {
+      expect(wrapper.attributes('title')).toBe('Test Option');
+    });
+  });
+
+  describe('Dynamic classes', () => {
+    it('adds focused class when focused prop is true', async () => {
+      await wrapper.setProps({ focused: true });
+      expect(wrapper.classes()).toContain(
+        'unnnic-select-smart-option--focused',
+      );
+    });
+
+    it('adds active class when active prop is true', async () => {
+      await wrapper.setProps({ active: true });
+      expect(wrapper.classes()).toContain('unnnic-select-smart-option--active');
+    });
+
+    it('adds selectable class when selectable prop is true', async () => {
+      await wrapper.setProps({ selectable: true });
+      expect(wrapper.classes()).toContain(
+        'unnnic-select-smart-option--selectable',
+      );
+    });
+
+    it('adds with-checkbox class when allowCheckbox prop is true', async () => {
+      await wrapper.setProps({ allowCheckbox: true });
+      expect(wrapper.classes()).toContain(
+        'unnnic-select-smart-option--with-checkbox',
+      );
+    });
+  });
+
+  describe('Checkbox rendering', () => {
+    beforeEach(() => {
+      mountWrapper({ allowCheckbox: true });
+    });
+
+    it('renders checkbox when allowCheckbox is true', () => {
+      const checkbox = wrapper.findComponent('[data-testid="checkbox"]');
+      expect(checkbox.exists()).toBe(true);
+    });
+
+    it('does not render checkbox when allowCheckbox is false', () => {
+      mountWrapper({ allowCheckbox: false });
+      const checkbox = wrapper.findComponent('[data-testid="checkbox"]');
+      expect(checkbox.exists()).toBe(false);
+    });
+
+    it('binds active prop to checkbox modelValue', async () => {
+      await wrapper.setProps({ active: true });
+      const checkbox = wrapper.findComponent('[data-testid="checkbox"]');
+      expect(checkbox.props('modelValue')).toBe(true);
+    });
+  });
+
+  describe('Label and description rendering', () => {
+    it('displays the label with the correct size class', async () => {
+      await wrapper.setProps({ size: 'large' });
+      const label = wrapper.find('[data-testid="label"]');
+      expect(label.classes()).toContain(
+        'unnnic-select-smart-option__label--large',
+      );
+    });
+
+    it('displays the description if provided', async () => {
+      await wrapper.setProps({ description: 'This is a test description' });
+      const description = wrapper.find('[data-testid="description"]');
+      expect(description.exists()).toBe(true);
+      expect(description.text()).toBe('This is a test description');
+    });
+
+    it('does not render description if it is not provided', () => {
+      const description = wrapper.find('[data-testid="description"]');
+      expect(description.exists()).toBe(false);
+    });
+
+    it('applies size class to description if provided', async () => {
+      await wrapper.setProps({ description: 'Description', size: 'small' });
+      const description = wrapper.find('[data-testid="description"]');
+      expect(description.classes()).toContain(
+        'unnnic-select-smart-option__description--small',
+      );
+    });
+  });
+});

package/src/components/SelectSmart/__tests__/__snapshots__/SelectSmartMultipleHeader.spec.js.snap

@@ -0,0 +1,8 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SelectSmartMultipleHeader.vue > initial rendering > matches the snapshot 1`] = `
+"<div data-v-4950cf71="" class="unnnic-select-smart__options__multiple">
+  <!--v-if-->
+  <p data-v-4950cf71="" class="unnnic-select-smart__options__multiple--without-multiples" data-testid="without-selects-message">No option selected</p>
+</div>"
+`;

package/src/components/SelectSmart/__tests__/__snapshots__/SelectSmartOption.spec.js.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SelectSmartOption.vue > Initial rendering > matches the snapshot 1`] = `
+"<div class="unnnic-select-smart-option unnnic--clickable unnnic-select-smart-option--selectable" title="Test Option" data-testid="select-smart-option">
+  <!--v-if-->
+  <div><span class="unnnic-select-smart-option__label unnnic-select-smart-option__label--" data-testid="label">Test Option</span>
+    <!--v-if-->
+  </div>
+</div>"
+`;

package/src/stories/ChartFunnel.stories.js

@@ -4,8 +4,13 @@ export default {
   title: 'Charts/ChartFunnel',
   tags: ['autodocs'],
   component: UnnnicChartFunnel,
+  argTypes: {
+    type: { control: { type: 'select' }, options: ['default', 'basic'] },
+  },
   decorators: [
-    () => ({ template: '<div style="width: 500px;"><story /></div>' }),
+    () => ({
+      template: '<div style="width: 500px; height: 500px;"><story /></div>',
+    }),
   ],
 };
 
@@ -13,16 +18,22 @@ export const ThreeRows = {
   args: {
     data: [
       {
-        title: '100% (18.621)',
-        description: 'Execução de fluxo',
+        title: '100%',
+        description: 'Clicou em comprar',
+        value: '18.621',
+        color: '#F6E05E',
       },
       {
-        title: '67% (12.476)',
-        description: 'Execução de fluxo',
+        title: '67%',
+        description: 'Informou entrega',
+        value: '12.476',
+        color: '#F6AD55',
       },
       {
-        title: '12% (2.234)',
-        description: 'Execução de fluxo',
+        title: '24%',
+        description: 'Selecionou Itens',
+        value: '4.469',
+        color: '#B794F4',
       },
     ],
   },
@@ -32,20 +43,28 @@ export const FourRows = {
   args: {
     data: [
       {
-        title: '100% (18.621)',
-        description: 'Execução de fluxo',
+        title: '100%',
+        description: 'Clicou em comprar',
+        value: '18.621',
+        color: '#F6E05E',
       },
       {
-        title: '67% (12.476)',
-        description: 'Execução de fluxo',
+        title: '67%',
+        description: 'Informou entrega',
+        value: '12.476',
+        color: '#F6AD55',
       },
       {
-        title: '12% (2.234)',
-        description: 'Execução de fluxo',
+        title: '24%',
+        description: 'Selecionou Itens',
+        value: '4.469',
+        color: '#B794F4',
       },
       {
-        title: '5% (931)',
-        description: 'Execução de fluxo',
+        title: '12%',
+        description: 'Foi para checkout',
+        value: '2.234',
+        color: '#63B3ED',
       },
     ],
   },
@@ -55,24 +74,34 @@ export const FiveRows = {
   args: {
     data: [
       {
-        title: '100% (18.621)',
-        description: 'Execução de fluxo',
+        title: '100%',
+        description: 'Clicou em comprar',
+        value: '18.621',
+        color: '#F6E05E',
       },
       {
-        title: '67% (12.476)',
-        description: 'Execução de fluxo',
+        title: '67%',
+        description: 'Informou entrega',
+        value: '12.476',
+        color: '#F6AD55',
       },
       {
-        title: '12% (2.234)',
-        description: 'Execução de fluxo',
+        title: '24%',
+        description: 'Selecionou Itens',
+        value: '4.469',
+        color: '#B794F4',
       },
       {
-        title: '5% (931)',
-        description: 'Execução de fluxo',
+        title: '12%',
+        description: 'Foi para checkout',
+        value: '2.234',
+        color: '#63B3ED',
       },
       {
-        title: '2% (372)',
-        description: 'Execução de fluxo',
+        title: '5%',
+        description: 'Finalizou a compra',
+        value: '931',
+        color: '#68D391',
       },
     ],
   },