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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.28.2-alpha.3",
+  "version": "3.29.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -140,4 +140,4 @@
     "vue-eslint-parser": "^10.4.0",
     "vue-tsc": "^3.0.5"
   }
-}
+}

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

@@ -91,6 +91,25 @@ describe('Button', () => {
     expect(invalidType).toThrow(Error);
   });
 
+  it('should count slot content as text for icon spacing', () => {
+    const slotWrapper = createWrapper(
+      { iconLeft: 'search-1', text: '' },
+      { default: 'Label' },
+    );
+
+    expect(slotWrapper.find('[data-testid="icon-left"]').classes()).toContain(
+      'unnnic-button__icon-left',
+    );
+  });
+
+  it('should render button text from slot without text prop', () => {
+    const slotOnlyWrapper = createWrapper(
+      { text: '' },
+      { default: 'Slot only' },
+    );
+    expect(slotOnlyWrapper.text()).toContain('Slot only');
+  });
+
   it('should render filled icons when iconsFilled prop is true', async () => {
     const wrapper = createWrapper({
       iconLeft: 'search-1',
@@ -104,4 +123,66 @@ describe('Button', () => {
     expect(leftIcon.props('filled')).toBe(true);
     expect(rightIcon.props('filled')).toBe(true);
   });
+
+  it('should apply pressed class when pressed prop is true', () => {
+    const pressedWrapper = createWrapper({ text: 'Button', pressed: true });
+    expect(pressedWrapper.classes()).toContain('unnnic-button--pressed');
+  });
+
+  it.each(['primary', 'secondary', 'tertiary', 'warning', 'attention'])(
+    'should render %s type',
+    (type) => {
+      const typeWrapper = createWrapper({ text: 'Button', type });
+      expect(typeWrapper.classes()).toContain(`unnnic-button--${type}`);
+    },
+  );
+
+  it('should map alternative type to tertiary', () => {
+    const altWrapper = createWrapper({ text: 'Button', type: 'alternative' });
+    expect(altWrapper.classes()).toContain('unnnic-button--tertiary');
+  });
+
+  it('should use muted icon scheme when disabled', async () => {
+    const disabledWrapper = createWrapper({
+      text: 'Button',
+      iconLeft: 'search-1',
+      disabled: true,
+    });
+
+    expect(
+      disabledWrapper
+        .findComponent('[data-testid="icon-left"]')
+        .props('scheme'),
+    ).toBe('fg-muted');
+  });
+
+  it('should use extra-large icon size for extra-large float button', () => {
+    const floatWrapper = createWrapper({
+      iconCenter: 'search-1',
+      float: true,
+      size: 'extra-large',
+      text: '',
+    });
+
+    expect(
+      floatWrapper.findComponent('[data-testid="icon-center"]').props('size'),
+    ).toBe('lg');
+  });
+
+  it('should render small size variation', () => {
+    const smallWrapper = createWrapper({ text: 'Button', size: 'small' });
+    expect(smallWrapper.classes()).toContain('unnnic-button--size-small');
+  });
+
+  it('should throw only invalid size message when size is invalid', () => {
+    expect(() => createWrapper({ size: 'small', float: true })).toThrow(
+      /Invalid size prop/,
+    );
+  });
+
+  it('should throw only invalid type message when type is invalid', () => {
+    expect(() => createWrapper({ type: 'invalid-type' })).toThrow(
+      /Invalid type prop/,
+    );
+  });
 });

package/src/components/Button/__tests__/ButtonIcon.spec.js

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import ButtonIcon from '../ButtonIcon.vue';
+
+const mountButtonIcon = (props = {}) =>
+  mount(ButtonIcon, {
+    props: {
+      size: 'large',
+      icon: 'search-1',
+      ...props,
+    },
+    global: {
+      stubs: {
+        UnnnicIcon: {
+          props: ['icon', 'scheme', 'size'],
+          template:
+            '<span data-testid="button-icon" :data-icon="icon" :data-scheme="scheme" />',
+        },
+      },
+    },
+  });
+
+describe('ButtonIcon', () => {
+  it('renders with primary type icon scheme', () => {
+    const wrapper = mountButtonIcon({ type: 'primary' });
+
+    expect(
+      wrapper.find('[data-testid="button-icon"]').attributes('data-scheme'),
+    ).toBe('fg-inverted');
+    expect(wrapper.classes()).toContain('primary');
+  });
+
+  it('renders with secondary type icon scheme', () => {
+    const wrapper = mountButtonIcon({ type: 'secondary' });
+
+    expect(
+      wrapper.find('[data-testid="button-icon"]').attributes('data-scheme'),
+    ).toBe('fg-emphasized');
+    expect(wrapper.classes()).toContain('secondary');
+  });
+
+  it('applies size class', () => {
+    const wrapper = mountButtonIcon({ size: 'small' });
+
+    expect(wrapper.classes()).toContain('small');
+  });
+
+  it('rejects invalid size prop in validator', () => {
+    const { validator } = ButtonIcon.props.size;
+
+    expect(validator('large')).toBe(true);
+    expect(validator('small')).toBe(true);
+    expect(validator('invalid')).toBe(false);
+  });
+});

package/src/components/Carousel/TagCarousel.vue

@@ -9,7 +9,7 @@
           size="sm"
           :scheme="hasPrev ? 'fg-emphasized' : 'fg-muted'"
           clickable
-          @click="previous()"
+          @click="handlePrevious"
         />
       </div>
       <span
@@ -51,7 +51,7 @@
           size="sm"
           :scheme="hasNext ? 'fg-emphasized' : 'fg-muted'"
           clickable
-          @click="next()"
+          @click="handleNext"
         />
       </div>
     </div>
@@ -91,6 +91,12 @@ export default {
     this.slides = this.tagItems;
   },
   methods: {
+    handleNext() {
+      this.next();
+    },
+    handlePrevious() {
+      this.previous();
+    },
     save(tagItem) {
       let valueLocal = this.modelValue;
       if (this.checkIsInclude(tagItem)) {

package/src/components/Carousel/__tests__/TagCarousel.spec.js

@@ -0,0 +1,258 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+
+import TagCarousel from '../TagCarousel.vue';
+
+const tagItems = [
+  { id: 1, name: 'Tag 1' },
+  { id: 2, name: 'Tag 2' },
+  { id: 3, name: 'Tag 3' },
+];
+
+const mountCarousel = async (props = {}) => {
+  const wrapper = mount(TagCarousel, {
+    props: {
+      modelValue: [],
+      tagItems,
+      ...props,
+    },
+    attachTo: document.body,
+    global: {
+      stubs: {
+        UnnnicIcon: true,
+      },
+    },
+  });
+
+  await flushPromises();
+  await wrapper.vm.$nextTick();
+
+  return wrapper;
+};
+
+const mockScrollElement = (
+  wrapper,
+  { scrollWidth = 800, clientWidth = 400, scrollLeft = 0 } = {},
+) => {
+  const element = wrapper.find('#scroll').element;
+
+  Object.defineProperty(element, 'scrollWidth', {
+    configurable: true,
+    value: scrollWidth,
+  });
+  Object.defineProperty(element, 'clientWidth', {
+    configurable: true,
+    value: clientWidth,
+  });
+
+  let currentScrollLeft = scrollLeft;
+  Object.defineProperty(element, 'scrollLeft', {
+    configurable: true,
+    get: () => currentScrollLeft,
+    set: (value) => {
+      currentScrollLeft = value;
+    },
+  });
+
+  return element;
+};
+
+describe('TagCarousel', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('renders tag slides from tagItems', async () => {
+    const wrapper = await mountCarousel();
+
+    expect(wrapper.vm.slides).toHaveLength(3);
+    expect(wrapper.findAll('.chip')).toHaveLength(3);
+    expect(wrapper.text()).toContain('Tag 1');
+  });
+
+  it('adds a tag to selection when clicked', async () => {
+    const wrapper = await mountCarousel();
+
+    await wrapper.findAll('.chip')[0].trigger('click');
+
+    expect(wrapper.emitted('selected')[0]).toEqual([[1]]);
+  });
+
+  it('removes a tag from selection when already selected', async () => {
+    const wrapper = await mountCarousel({ modelValue: [1] });
+
+    await wrapper.findAll('.chip')[0].trigger('click');
+
+    expect(wrapper.emitted('selected')[0]).toEqual([[]]);
+  });
+
+  it('checks whether a tag is included in modelValue', async () => {
+    const wrapper = await mountCarousel({ modelValue: [2] });
+
+    expect(wrapper.vm.checkIsInclude({ id: 2, name: 'Tag 2' })).toBe(true);
+    expect(wrapper.vm.checkIsInclude({ id: 1, name: 'Tag 1' })).toBe(false);
+  });
+
+  it('enables previous button after moving forward', async () => {
+    const wrapper = await mountCarousel();
+    mockScrollElement(wrapper, {
+      scrollWidth: 800,
+      clientWidth: 400,
+      scrollLeft: 0,
+    });
+
+    wrapper.vm.next();
+
+    expect(wrapper.vm.hasPrev).toBe(true);
+    expect(wrapper.vm.hasNext).toBe(true);
+  });
+
+  it('disables next button when scrolled to the end', async () => {
+    const wrapper = await mountCarousel();
+    mockScrollElement(wrapper, {
+      scrollWidth: 800,
+      clientWidth: 400,
+      scrollLeft: 200,
+    });
+
+    wrapper.vm.next();
+
+    expect(wrapper.vm.hasNext).toBe(false);
+  });
+
+  it('disables previous button when scrolled to the start', async () => {
+    const wrapper = await mountCarousel();
+    mockScrollElement(wrapper, {
+      scrollWidth: 800,
+      clientWidth: 400,
+      scrollLeft: 200,
+    });
+
+    wrapper.vm.previous();
+
+    expect(wrapper.vm.hasPrev).toBe(false);
+    expect(wrapper.vm.hasNext).toBe(true);
+  });
+
+  it('keeps next enabled when already disabled and not at end', async () => {
+    const wrapper = await mountCarousel();
+    mockScrollElement(wrapper, {
+      scrollWidth: 900,
+      clientWidth: 400,
+      scrollLeft: 0,
+    });
+    wrapper.vm.hasNext = false;
+
+    wrapper.vm.next();
+
+    expect(wrapper.vm.hasNext).toBe(true);
+  });
+
+  it('keeps previous enabled when already disabled and not at start', async () => {
+    const wrapper = await mountCarousel();
+    mockScrollElement(wrapper, {
+      scrollWidth: 900,
+      clientWidth: 400,
+      scrollLeft: 500,
+    });
+
+    wrapper.vm.previous();
+
+    expect(wrapper.vm.hasPrev).toBe(true);
+    expect(wrapper.vm.hasNext).toBe(true);
+  });
+
+  it('shows blur overlays when navigation is available', async () => {
+    const wrapper = await mountCarousel();
+    mockScrollElement(wrapper, {
+      scrollWidth: 800,
+      clientWidth: 400,
+      scrollLeft: 0,
+    });
+
+    expect(wrapper.vm.hasNext).toBe(true);
+    expect(wrapper.vm.hasPrev).toBe(false);
+
+    wrapper.vm.next();
+
+    expect(wrapper.vm.hasPrev).toBe(true);
+    expect(wrapper.vm.hasNext).toBe(true);
+  });
+
+  it('uses default modelValue when omitted', async () => {
+    const wrapper = mount(TagCarousel, {
+      props: { tagItems },
+      attachTo: document.body,
+      global: { stubs: { UnnnicIcon: true } },
+    });
+
+    await flushPromises();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.modelValue).toEqual([]);
+    expect(wrapper.vm.slides).toHaveLength(3);
+
+    wrapper.unmount();
+  });
+
+  it('uses default tagItems when omitted', async () => {
+    const wrapper = mount(TagCarousel, {
+      props: { modelValue: [] },
+      attachTo: document.body,
+      global: { stubs: { UnnnicIcon: true } },
+    });
+
+    await flushPromises();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.tagItems).toEqual([]);
+    expect(wrapper.vm.slides).toEqual([]);
+
+    wrapper.unmount();
+  });
+
+  it('keeps next enabled when it is already enabled', async () => {
+    const wrapper = await mountCarousel();
+    mockScrollElement(wrapper, {
+      scrollWidth: 900,
+      clientWidth: 400,
+      scrollLeft: 0,
+    });
+    wrapper.vm.hasNext = true;
+
+    wrapper.vm.handleNext();
+
+    expect(wrapper.vm.hasNext).toBe(true);
+    expect(wrapper.vm.hasPrev).toBe(true);
+  });
+
+  it('keeps previous enabled when it is already enabled', async () => {
+    const wrapper = await mountCarousel();
+    mockScrollElement(wrapper, {
+      scrollWidth: 900,
+      clientWidth: 400,
+      scrollLeft: 500,
+    });
+    wrapper.vm.hasPrev = true;
+
+    wrapper.vm.handlePrevious();
+
+    expect(wrapper.vm.hasPrev).toBe(true);
+    expect(wrapper.vm.hasNext).toBe(true);
+  });
+
+  it('delegates navigation to next and previous handlers', async () => {
+    const wrapper = await mountCarousel();
+    mockScrollElement(wrapper, {
+      scrollWidth: 800,
+      clientWidth: 400,
+      scrollLeft: 0,
+    });
+
+    wrapper.vm.handleNext();
+    expect(wrapper.vm.hasPrev).toBe(true);
+
+    wrapper.vm.handlePrevious();
+    expect(wrapper.vm.hasPrev).toBe(false);
+  });
+});

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

@@ -0,0 +1,170 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import ChartLine from '../ChartLine.vue';
+
+const sampleData = [
+  { title: 'Jan', value: 10 },
+  { title: 'Feb', value: 20 },
+  { title: 'Mar', value: 15 },
+];
+
+const setChartWidth = (wrapper, width) => {
+  Object.defineProperty(wrapper.vm.$refs.chart, 'offsetWidth', {
+    configurable: true,
+    value: width,
+  });
+};
+
+const mountChart = (props = {}) => {
+  const wrapper = mount(ChartLine, {
+    props: {
+      data: sampleData,
+      ...props,
+    },
+    attachTo: document.body,
+    global: {
+      stubs: {
+        UnnnicToolTip: {
+          name: 'UnnnicToolTip',
+          template:
+            '<div class="tooltip-stub" :style="$attrs.style"><slot /></div>',
+          inheritAttrs: false,
+        },
+      },
+    },
+  });
+
+  setChartWidth(wrapper, 300);
+  wrapper.vm.chartContainerWidth = 300;
+
+  return wrapper;
+};
+
+describe('ChartLine', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    document.body.innerHTML = '';
+  });
+
+  it('renders title and data labels', () => {
+    const wrapper = mountChart({ title: 'Monthly trend' });
+
+    expect(wrapper.find('.header .title').text()).toBe('Monthly trend');
+    expect(
+      wrapper.findAll('.groups .title').map((node) => node.text()),
+    ).toEqual(['Jan', 'Feb', 'Mar']);
+  });
+
+  it('omits header when title is not provided', () => {
+    const wrapper = mountChart();
+
+    expect(wrapper.find('.header').exists()).toBe(false);
+  });
+
+  it('applies condensed class when prop is true', () => {
+    const wrapper = mountChart({ condensed: true });
+
+    expect(wrapper.classes()).toContain('condensed');
+  });
+
+  it('uses fixedMaxValue when provided', () => {
+    const wrapper = mountChart({ fixedMaxValue: 50 });
+
+    expect(wrapper.vm.maxValue).toBe(50);
+  });
+
+  it('computes maxValue from data when fixedMaxValue is absent', () => {
+    const wrapper = mountChart();
+
+    expect(wrapper.vm.maxValue).toBe(20);
+  });
+
+  it('formats reference values with one decimal when maxValue is 1 or less', () => {
+    const wrapper = mountChart({
+      fixedMaxValue: 1,
+      data: [{ title: 'A', value: 0.5 }],
+    });
+
+    expect(wrapper.vm.value(0.5)).toBe('0.5');
+    expect(wrapper.text()).toContain('0.5');
+  });
+
+  it('formats reference values as integers when maxValue is greater than 1', () => {
+    const wrapper = mountChart();
+
+    expect(wrapper.vm.value(10.2)).toBe('11');
+  });
+
+  it('generates svg background image for multiple data points', () => {
+    const wrapper = mountChart();
+
+    expect(wrapper.vm.svgChart).toContain('data:image/svg+xml');
+    expect(wrapper.vm.svgChart).toContain('linearGradient');
+  });
+
+  it('generates svg background image for a single data point', () => {
+    const wrapper = mountChart({
+      data: [{ title: 'Only', value: 8 }],
+    });
+
+    expect(wrapper.vm.svgChart).toContain('data:image/svg+xml');
+  });
+
+  it('updates chart container width on interval', async () => {
+    const wrapper = mountChart();
+
+    setChartWidth(wrapper, 320);
+    vi.advanceTimersByTime(100);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.chartContainerWidth).toBe(320);
+  });
+
+  it('clears width interval on unmount', () => {
+    const wrapper = mountChart();
+    const intervalId = wrapper.vm.chartContainerWidthInterval;
+    const clearSpy = vi.spyOn(globalThis, 'clearInterval');
+
+    wrapper.unmount();
+
+    expect(clearSpy).toHaveBeenCalledWith(intervalId);
+  });
+
+  it('clears width interval on unmount even when interval is unset', () => {
+    const wrapper = mountChart();
+    wrapper.vm.chartContainerWidthInterval = null;
+    const clearSpy = vi.spyOn(globalThis, 'clearInterval');
+
+    wrapper.unmount();
+
+    expect(clearSpy).not.toHaveBeenCalled();
+  });
+
+  it('covers svg path generation for more than two bars', () => {
+    const wrapper = mountChart({
+      data: [
+        { title: 'A', value: 4 },
+        { title: 'B', value: 8 },
+        { title: 'C', value: 6 },
+        { title: 'D', value: 2 },
+      ],
+    });
+
+    expect(wrapper.vm.svgChart).toContain('linearGradient');
+    expect(wrapper.findAll('.tooltip-stub')).toHaveLength(4);
+  });
+
+  it('renders tooltip bars with proportional heights', () => {
+    const wrapper = mountChart();
+    const tooltips = wrapper.findAll('.tooltip-stub');
+
+    expect(tooltips).toHaveLength(3);
+    expect(tooltips[1].attributes('style')).toContain('height: 100%');
+    expect(tooltips[0].attributes('style')).toContain('height: 50%');
+  });
+});

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

@@ -48,4 +48,18 @@ describe('Checkbox', () => {
     await checkbox.trigger('click');
     expect(wrapper.emitted('change')).eq(undefined);
   });
+
+  it('should render helper text', () => {
+    wrapper = createWrapper({ helper: 'Helper message' });
+    expect(wrapper.find('.unnnic-checkbox__helper').text()).toBe(
+      'Helper message',
+    );
+  });
+
+  it('should render label prop', () => {
+    wrapper = createWrapper({ label: 'Checkbox label' });
+    expect(wrapper.find('[data-testid="checkbox-text-right"]').text()).toBe(
+      'Checkbox label',
+    );
+  });
 });

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

@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import CheckboxGroup from '../CheckboxGroup.vue';
+
+const mountCheckboxGroup = (props = {}, slots = {}) =>
+  mount(CheckboxGroup, {
+    props,
+    slots: {
+      default: '<input type="checkbox" data-testid="checkbox-slot" />',
+      ...slots,
+    },
+    global: {
+      stubs: {
+        UnnnicLabel: {
+          props: ['label', 'tooltip'],
+          template:
+            '<label data-testid="checkbox-group-label">{{ label }}</label>',
+        },
+      },
+    },
+  });
+
+describe('CheckboxGroup', () => {
+  it('renders slot content', () => {
+    const wrapper = mountCheckboxGroup();
+
+    expect(wrapper.find('[data-testid="checkbox-slot"]').exists()).toBe(true);
+  });
+
+  it('renders label when provided', () => {
+    const wrapper = mountCheckboxGroup({ label: 'Group label' });
+
+    expect(wrapper.find('[data-testid="checkbox-group-label"]').text()).toBe(
+      'Group label',
+    );
+  });
+
+  it('renders helper text when provided', () => {
+    const wrapper = mountCheckboxGroup({ helper: 'Helper text' });
+
+    expect(wrapper.find('.unnnic-checkbox-group__helper').text()).toBe(
+      'Helper text',
+    );
+  });
+
+  it('applies horizontal state class by default', () => {
+    const wrapper = mountCheckboxGroup();
+
+    expect(wrapper.classes()).toContain(
+      'unnnic-checkbox-group--state-horizontal',
+    );
+  });
+
+  it('applies vertical state class', () => {
+    const wrapper = mountCheckboxGroup({ state: 'vertical' });
+
+    expect(wrapper.classes()).toContain(
+      'unnnic-checkbox-group--state-vertical',
+    );
+  });
+});