@weni/unnnic-system 3.28.2-alpha.2 → 3.29.0

package/src/components/Radio/__test__/Radio.spec.js

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, test, expect, beforeEach, afterEach } from 'vitest';
 import Radio from '@/components/Radio/Radio.vue';
+import RadioGroup from '@/components/RadioGroup/RadioGroup.vue';
 import UnnnicIcon from '@/components/Icon.vue';
 
 describe('Radio.vue', () => {
@@ -75,4 +76,70 @@ describe('Radio.vue', () => {
   test('matches the snapshot', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
+
+  test('renders helper text when provided', async () => {
+    await wrapper.setProps({ helper: 'Radio helper' });
+    expect(wrapper.find('.unnnic-radio__helper').text()).toBe('Radio helper');
+  });
+
+  test('renders label prop', async () => {
+    await wrapper.setProps({ label: 'Radio label' });
+    expect(wrapper.find('.unnnic-radio__label').text()).toContain(
+      'Radio label',
+    );
+  });
+
+  test('uses name prop when radio is standalone', () => {
+    const standalone = mount(Radio, {
+      props: {
+        modelValue: '',
+        value: 'option1',
+        name: 'standalone-radio',
+      },
+      global: { components: { UnnnicIcon } },
+    });
+
+    expect(standalone.find('input').attributes('name')).toBe(
+      'standalone-radio',
+    );
+    standalone.unmount();
+  });
+
+  test('uses injected name when inside RadioGroup without name prop', () => {
+    const groupWrapper = mount(RadioGroup, {
+      props: { modelValue: '', name: 'group-name' },
+      slots: {
+        default: '<Radio value="option1" label="Option 1" />',
+      },
+      global: {
+        components: { Radio },
+        stubs: { UnnnicLabel: true },
+      },
+    });
+
+    expect(groupWrapper.find('input[type="radio"]').attributes('name')).toBe(
+      'group-name',
+    );
+    groupWrapper.unmount();
+  });
+
+  test('updates group context value when used inside RadioGroup', async () => {
+    const groupWrapper = mount(RadioGroup, {
+      props: { modelValue: '' },
+      slots: {
+        default: '<Radio value="option1" label="Option 1" />',
+      },
+      global: {
+        components: { Radio },
+        stubs: {
+          UnnnicLabel: true,
+        },
+      },
+    });
+
+    await groupWrapper.find('input[type="radio"]').trigger('change');
+
+    expect(groupWrapper.emitted('update:modelValue')[0]).toEqual(['option1']);
+    groupWrapper.unmount();
+  });
 });

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

@@ -0,0 +1,100 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import RadioGroup from '../RadioGroup.vue';
+import Radio from '../../Radio/Radio.vue';
+
+const mountRadioGroup = (props = {}, slots = {}) =>
+  mount(RadioGroup, {
+    props: {
+      modelValue: '',
+      ...props,
+    },
+    slots: {
+      default: `
+        <Radio value="a" label="Option A" />
+        <Radio value="b" label="Option B" />
+      `,
+      ...slots,
+    },
+    global: {
+      components: { Radio },
+      stubs: {
+        UnnnicLabel: {
+          props: ['label', 'tooltip'],
+          template:
+            '<label data-testid="radio-group-label">{{ label }}</label>',
+        },
+      },
+    },
+  });
+
+describe('RadioGroup', () => {
+  it('renders radios in slot', () => {
+    const wrapper = mountRadioGroup();
+
+    expect(wrapper.findAllComponents(Radio).length).toBe(2);
+  });
+
+  it('renders label and helper when provided', () => {
+    const wrapper = mountRadioGroup({
+      label: 'Choose one',
+      helper: 'Select an option',
+    });
+
+    expect(wrapper.find('[data-testid="radio-group-label"]').text()).toBe(
+      'Choose one',
+    );
+    expect(wrapper.find('.unnnic-radio-group__helper').text()).toBe(
+      'Select an option',
+    );
+  });
+
+  it('emits update:modelValue when a radio is selected', async () => {
+    const wrapper = mountRadioGroup();
+
+    await wrapper.findAll('input[type="radio"]')[0].trigger('change');
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+    expect(wrapper.emitted('update:modelValue')[0]).toEqual(['a']);
+  });
+
+  it('syncs modelValue from parent', async () => {
+    const wrapper = mountRadioGroup({ modelValue: 'b' });
+
+    await wrapper.setProps({ modelValue: 'a' });
+
+    const inputs = wrapper.findAll('input[type="radio"]');
+    expect(inputs[0].element.checked).toBe(true);
+  });
+
+  it('does not emit when modelValue is already in sync', async () => {
+    const wrapper = mountRadioGroup({ modelValue: 'a' });
+
+    await wrapper.setProps({ modelValue: 'a' });
+
+    expect(wrapper.emitted('update:modelValue') ?? []).toHaveLength(0);
+  });
+
+  it('uses custom name when provided', () => {
+    const wrapper = mountRadioGroup({ name: 'custom-group' });
+
+    expect(wrapper.find('input[type="radio"]').attributes('name')).toBe(
+      'custom-group',
+    );
+  });
+
+  it('generates a random group name when name is not provided', () => {
+    const wrapper = mountRadioGroup();
+
+    expect(wrapper.find('input[type="radio"]').attributes('name')).toMatch(
+      /^unnnic-radio-group-/,
+    );
+  });
+
+  it('applies vertical state class', () => {
+    const wrapper = mountRadioGroup({ state: 'vertical' });
+
+    expect(wrapper.classes()).toContain('unnnic-radio-group--state-vertical');
+  });
+});

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

@@ -0,0 +1,321 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import Slider from '../Slider.vue';
+
+const tooltipStub = {
+  name: 'UnnnicTooltip',
+  template: '<div><div ref="label" class="tooltip-label"><slot /></div></div>',
+  mounted() {
+    Object.defineProperty(this.$refs.label, 'clientWidth', {
+      configurable: true,
+      value: 32,
+    });
+  },
+};
+
+const noLabelTooltipStub = {
+  name: 'UnnnicTooltip',
+  template: '<div><slot /></div>',
+};
+
+const mockInputDimensions = (wrapper, width = 200) => {
+  const input = wrapper.find('input[type="range"]').element;
+
+  Object.defineProperty(input, 'clientWidth', {
+    configurable: true,
+    value: width,
+  });
+  Object.defineProperty(input, 'offsetWidth', {
+    configurable: true,
+    value: width,
+  });
+};
+
+const createWrapper = async (props = {}, options = {}) => {
+  const wrapper = mount(Slider, {
+    props: {
+      initialValue: 2,
+      minValue: 0,
+      maxValue: 10,
+      ...props,
+    },
+    attachTo: document.body,
+    global: {
+      stubs: {
+        UnnnicTooltip: tooltipStub,
+        UnnnicIcon: true,
+        ...options.stubs,
+      },
+    },
+  });
+
+  mockInputDimensions(wrapper);
+  await wrapper.vm.$nextTick();
+
+  return wrapper;
+};
+
+describe('Slider', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    document.body.innerHTML = '';
+  });
+
+  it('renders label, info tooltip, and min/max labels', async () => {
+    const wrapper = await createWrapper({
+      label: 'Volume',
+      labelInfo: 'Adjust volume',
+      minLabel: 'Low',
+      maxLabel: 'High',
+    });
+
+    expect(wrapper.find('.unnnic-slider__label').text()).toBe('Volume');
+    expect(wrapper.find('.unnnic-label__tooltip').exists()).toBe(true);
+    expect(wrapper.find('.unnnic-slider__content__labels__min').text()).toBe(
+      'Low',
+    );
+    expect(wrapper.find('.unnnic-slider__content__labels__max').text()).toBe(
+      'High',
+    );
+  });
+
+  it('hides value input when showInputValue is false', async () => {
+    const wrapper = await createWrapper({ showInputValue: false });
+
+    expect(wrapper.find('.value-input').exists()).toBe(false);
+  });
+
+  it('emits valueChange when range input changes', async () => {
+    const wrapper = await createWrapper();
+
+    const rangeInput = wrapper.find('input[type="range"]');
+    await rangeInput.setValue(5);
+    await rangeInput.trigger('change');
+
+    expect(wrapper.emitted('valueChange')).toBeTruthy();
+    expect(wrapper.emitted('valueChange').at(-1)).toEqual(['5']);
+  });
+
+  it('updates value from the text input', async () => {
+    const wrapper = await createWrapper();
+
+    const valueInput = wrapper.find('.value-input');
+    await valueInput.setValue('7');
+
+    expect(wrapper.vm.sliderVal).toBe('7');
+    expect(wrapper.emitted('valueChange')).toBeTruthy();
+  });
+
+  it('shows tooltip on mouseover and hides on mouseleave', async () => {
+    const wrapper = await createWrapper();
+
+    const rangeInput = wrapper.find('input[type="range"]');
+    await rangeInput.trigger('mouseover');
+    expect(wrapper.vm.showTooltip).toBe(true);
+
+    await rangeInput.trigger('mouseleave');
+    expect(wrapper.vm.showTooltip).toBe(false);
+  });
+
+  it('computes css variables from current state', async () => {
+    const wrapper = await createWrapper({
+      initialValue: 4,
+      minValue: 0,
+      maxValue: 8,
+    });
+
+    expect(wrapper.vm.cssVars).toEqual({
+      '--val': 4,
+      '--tooltip-offset': expect.any(Number),
+      '--min': 0,
+      '--max': 8,
+    });
+  });
+
+  it('returns zero tooltip offset when dimensions are unavailable', async () => {
+    const wrapper = await createWrapper();
+    wrapper.vm.sliderWidth = 0;
+    wrapper.vm.labelWidth = 0;
+
+    expect(wrapper.vm.getNewTooltipPosition()).toBe(0);
+  });
+
+  it('handles NaN range when min and max are equal', async () => {
+    const wrapper = await createWrapper({
+      initialValue: 5,
+      minValue: 5,
+      maxValue: 5,
+    });
+    wrapper.vm.sliderWidth = 200;
+    wrapper.vm.labelWidth = 32;
+
+    expect(wrapper.vm.getNewTooltipPosition()).toBeTypeOf('number');
+  });
+
+  it('uses fallback label width when label width is zero', async () => {
+    const wrapper = await createWrapper();
+    wrapper.vm.sliderWidth = 200;
+    wrapper.vm.labelWidth = 0;
+
+    expect(wrapper.vm.getNewTooltipPosition()).toBe(0);
+  });
+
+  it('reconfigures tooltip on window resize', async () => {
+    const wrapper = await createWrapper();
+    const configureSpy = vi.spyOn(wrapper.vm, 'configureTooltip');
+
+    window.dispatchEvent(new Event('resize'));
+
+    expect(configureSpy).toHaveBeenCalled();
+  });
+
+  it('removes resize listener on unmount', async () => {
+    const wrapper = await createWrapper();
+    const removeSpy = vi.spyOn(window, 'removeEventListener');
+
+    wrapper.unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith('resize', wrapper.vm.handleResize);
+  });
+
+  it('initializes dimensions from polling intervals', async () => {
+    const wrapper = await createWrapper();
+    mockInputDimensions(wrapper, 0);
+
+    vi.advanceTimersByTime(100);
+    await wrapper.vm.$nextTick();
+
+    mockInputDimensions(wrapper, 200);
+    vi.advanceTimersByTime(100);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.sliderWidth).toBe(200);
+    expect(wrapper.vm.labelWidth).toBe(32);
+  });
+
+  it('skips tooltip label polling when label ref is missing', async () => {
+    vi.spyOn(Slider.methods, 'configureTooltip').mockImplementation(() => {});
+
+    const wrapper = await createWrapper(
+      {},
+      { stubs: { UnnnicTooltip: noLabelTooltipStub } },
+    );
+    mockInputDimensions(wrapper);
+
+    vi.advanceTimersByTime(100);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.labelWidth).toBe(0);
+
+    Slider.methods.configureTooltip.mockRestore();
+  });
+
+  it('syncs value input text when slider value changes', async () => {
+    const wrapper = await createWrapper({ initialValue: 1 });
+
+    const valueInput = wrapper.find('.value-input').element;
+    valueInput.textContent = 'old';
+
+    wrapper.vm.sliderVal = 9;
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+
+    expect(valueInput.textContent).toBe('9');
+  });
+
+  it('skips value input sync when text already matches slider value', async () => {
+    const wrapper = await createWrapper({ initialValue: 4 });
+    const valueInput = wrapper.find('.value-input').element;
+    valueInput.textContent = '4';
+
+    wrapper.vm.sliderVal = 4;
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+
+    expect(valueInput.textContent).toBe('4');
+  });
+
+  it('computes tooltip position with non-zero dimensions', async () => {
+    const wrapper = await createWrapper({
+      initialValue: 5,
+      minValue: 0,
+      maxValue: 10,
+    });
+    wrapper.vm.sliderWidth = 200;
+    wrapper.vm.labelWidth = 32;
+
+    expect(wrapper.vm.getNewTooltipPosition()).toBeGreaterThan(0);
+  });
+
+  it('uses fallback label width when label width is NaN', async () => {
+    const wrapper = await createWrapper();
+    wrapper.vm.sliderWidth = 200;
+    wrapper.vm.labelWidth = Number.NaN;
+
+    expect(wrapper.vm.getNewTooltipPosition()).toBeTypeOf('number');
+  });
+
+  it('ignores input polling after unmount', async () => {
+    const wrapper = await createWrapper();
+    mockInputDimensions(wrapper, 0);
+
+    wrapper.unmount();
+    vi.advanceTimersByTime(200);
+
+    expect(true).toBe(true);
+  });
+
+  it('waits until tooltip label width is greater than zero', async () => {
+    const delayedLabelTooltipStub = {
+      name: 'UnnnicTooltip',
+      template:
+        '<div><div ref="label" class="tooltip-label"><slot /></div></div>',
+      mounted() {
+        Object.defineProperty(this.$refs.label, 'clientWidth', {
+          configurable: true,
+          value: 0,
+        });
+      },
+    };
+
+    vi.spyOn(Slider.methods, 'configureTooltip').mockImplementation(
+      function mockConfigure() {
+        if (!this.$refs.input || !this.$refs.tooltip?.$refs?.label) {
+          return;
+        }
+
+        this.sliderWidth = this.$refs.input.clientWidth;
+        this.labelWidth = this.$refs.tooltip.$refs.label.clientWidth;
+        this.tooltipOffset = this.getNewTooltipPosition();
+      },
+    );
+
+    const wrapper = await createWrapper(
+      {},
+      {
+        stubs: { UnnnicTooltip: delayedLabelTooltipStub },
+      },
+    );
+    mockInputDimensions(wrapper);
+
+    vi.advanceTimersByTime(100);
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.labelWidth).toBe(0);
+
+    Object.defineProperty(wrapper.vm.$refs.tooltip.$refs.label, 'clientWidth', {
+      configurable: true,
+      value: 32,
+    });
+    vi.advanceTimersByTime(100);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.labelWidth).toBe(32);
+
+    Slider.methods.configureTooltip.mockRestore();
+  });
+});

package/src/components/Tag/DefaultTag.vue

@@ -1,5 +1,8 @@
 <template>
-  <section :class="`unnnic-tag unnnic-tag--${size}`">
+  <section
+    :class="`unnnic-tag unnnic-tag--${size}`"
+    :style="{ backgroundColor: color }"
+  >
     <section
       v-if="leftIcon"
       class="unnnic-tag__icon"
@@ -62,8 +65,6 @@ const color = computed(() => {
   padding: calc($unnnic-space-1 * 1.5) $unnnic-space-3;
   width: fit-content;
 
-  background-color: v-bind(color);
-
   &--small {
     padding: calc($unnnic-space-1 * 0.5) $unnnic-space-3;
   }

package/src/components/Tag/__tests__/DefaultTag.spec.js

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import DefaultTag from '../DefaultTag.vue';
+
+const schemes = [
+  'aux-green',
+  'aux-blue',
+  'aux-purple',
+  'aux-red',
+  'aux-pink',
+  'aux-orange',
+  'aux-yellow',
+  'aux-gray',
+  'aux-teal',
+  'aux-weni',
+  'unknown-scheme',
+];
+
+describe('DefaultTag', () => {
+  schemes.forEach((scheme) => {
+    it(`renders with scheme ${scheme}`, () => {
+      const wrapper = mount(DefaultTag, {
+        props: { text: `Tag ${scheme}`, scheme },
+        global: { stubs: { UnnnicIcon: true } },
+      });
+
+      expect(wrapper.find('.unnnic-tag__label').text()).toBe(`Tag ${scheme}`);
+      expect(wrapper.element.style.backgroundColor).toBeTruthy();
+      wrapper.unmount();
+    });
+  });
+
+  it('renders left icon when provided', () => {
+    const wrapper = mount(DefaultTag, {
+      props: { text: 'Label', leftIcon: 'info' },
+      global: { stubs: { UnnnicIcon: true } },
+    });
+
+    expect(wrapper.find('.unnnic-tag__icon').exists()).toBe(true);
+  });
+
+  it('applies small size class', () => {
+    const wrapper = mount(DefaultTag, {
+      props: { text: 'Label', size: 'small' },
+      global: { stubs: { UnnnicIcon: true } },
+    });
+
+    expect(wrapper.classes()).toContain('unnnic-tag--small');
+  });
+});

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

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import Tag from '../Tag.vue';
+import DefaultTag from '../DefaultTag.vue';
+import Chip from '../../Chip/Chip.vue';
+
+const mountTag = (props = {}) =>
+  mount(Tag, {
+    props: {
+      text: 'Tag label',
+      ...props,
+    },
+    global: {
+      stubs: {
+        UnnnicIcon: true,
+      },
+    },
+  });
+
+describe('Tag', () => {
+  it('renders DefaultTag for default type', () => {
+    const wrapper = mountTag({ type: 'default' });
+
+    expect(wrapper.findComponent(DefaultTag).exists()).toBe(true);
+    expect(wrapper.text()).toContain('Tag label');
+  });
+
+  it('renders Chip for brand type', () => {
+    const wrapper = mountTag({ type: 'brand' });
+
+    expect(wrapper.findComponent(Chip).exists()).toBe(true);
+  });
+
+  it('renders Chip when hasCloseIcon is true', () => {
+    const wrapper = mountTag({ hasCloseIcon: true });
+
+    expect(wrapper.findComponent(Chip).exists()).toBe(true);
+  });
+
+  it('emits close when chip with close icon is clicked', async () => {
+    const wrapper = mountTag({ hasCloseIcon: true });
+
+    await wrapper.find('.chip').trigger('click');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  it('emits click for brand type chip', async () => {
+    const wrapper = mountTag({ type: 'brand' });
+
+    await wrapper.find('.chip').trigger('click');
+
+    expect(wrapper.emitted('click')).toBeTruthy();
+  });
+
+  it('passes small size for next type', () => {
+    const wrapper = mountTag({ type: 'next' });
+
+    expect(wrapper.findComponent(DefaultTag).props('size')).toBe('small');
+  });
+});
+
+describe('DefaultTag', () => {
+  it('renders left icon when provided', () => {
+    const wrapper = mount(DefaultTag, {
+      props: { text: 'Label', leftIcon: 'info' },
+      global: { stubs: { UnnnicIcon: true } },
+    });
+
+    expect(wrapper.find('.unnnic-tag__icon').exists()).toBe(true);
+  });
+
+  it('applies small size class', () => {
+    const wrapper = mount(DefaultTag, {
+      props: { text: 'Label', size: 'small' },
+      global: { stubs: { UnnnicIcon: true } },
+    });
+
+    expect(wrapper.classes()).toContain('unnnic-tag--small');
+  });
+});

package/src/components/TextArea/__test__/TextArea.spec.js

@@ -57,6 +57,18 @@ describe('TextArea.vue', () => {
     expect(wrapper.emitted('update:modelValue')[0]).toEqual(['new text']);
   });
 
+  test('applies resize none class binding', async () => {
+    await wrapper.setProps({ resize: 'none' });
+    expect(wrapper.find('textarea').exists()).toBe(true);
+  });
+
+  test('returns empty error string for non-string non-array errors', async () => {
+    await wrapper.setProps({ type: 'error', errors: null });
+    expect(
+      wrapper.findComponent({ name: 'UnnnicFormElement' }).props('error'),
+    ).toBe('');
+  });
+
   test('displays errors when type is error', async () => {
     await wrapper.setProps({ type: 'error', errors: ['Error 1', 'Error 2'] });
     expect(
@@ -64,6 +76,13 @@ describe('TextArea.vue', () => {
     ).toBe('Error 1, Error 2');
   });
 
+  test('displays string error when errors is a string', async () => {
+    await wrapper.setProps({ type: 'error', errors: 'Single error' });
+    expect(
+      wrapper.findComponent({ name: 'UnnnicFormElement' }).props('error'),
+    ).toBe('Single error');
+  });
+
   test('applies disabled class and disables textarea when disabled is true', async () => {
     await wrapper.setProps({ disabled: true });
     expect(