@weni/unnnic-system 3.11.1-alpha.2 → 3.11.1-alpha.4

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

@@ -0,0 +1,159 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+import InputDatePicker from '../InputDatePicker.vue';
+
+const factory = (props = {}) =>
+  mount(InputDatePicker, {
+    props: {
+      modelValue: {
+        start: null,
+        end: null,
+      },
+      ...props,
+    },
+    global: {
+      stubs: {
+        UnnnicInput: {
+          name: 'UnnnicInput',
+          template:
+            '<input data-testid="input" v-bind="$attrs" @focus="$emit(\'focus\', $event)" />',
+        },
+        UnnnicDatePicker: {
+          name: 'UnnnicDatePicker',
+          props: ['minDate', 'maxDate', 'periodBaseDate', 'options'],
+          template: '<div data-testid="datepicker"></div>',
+        },
+      },
+    },
+  });
+
+describe('InputDatePicker.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = factory();
+  });
+
+  it('renders input and does not show datepicker by default', () => {
+    expect(wrapper.find('[data-testid="input"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="datepicker"]').exists()).toBe(false);
+  });
+
+  it('opens datepicker when input receives focus', async () => {
+    const input = wrapper.find('[data-testid="input"]');
+    await input.trigger('focus');
+
+    wrapper.vm.showCalendarFilter = true;
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findComponent({ name: 'UnnnicDatePicker' }).exists()).toBe(
+      true,
+    );
+  });
+
+  it('computes filterText placeholder when there is no date selected', () => {
+    expect(wrapper.vm.filterText).toBe('mm/dd/yyyy');
+  });
+
+  it('computes filterText from start and end dates', async () => {
+    const withDates = factory({
+      modelValue: {
+        start: '2025-01-10',
+        end: '2025-01-20',
+      },
+      format: 'YYYY-MM-DD',
+      inputFormat: 'MM-DD-YYYY',
+    });
+
+    expect(withDates.vm.filterText).toBe('01-10-2025 ~ 01-20-2025');
+  });
+
+  it('computes initialStartDate and initialEndDate for DatePicker', () => {
+    const withDates = factory({
+      modelValue: {
+        start: '2025-01-10',
+        end: '2025-01-20',
+      },
+    });
+
+    expect(withDates.vm.initialStartDate).toBe('01 10 2025');
+    expect(withDates.vm.initialEndDate).toBe('01 20 2025');
+  });
+
+  it('emits selectDate with formatted dates when DatePicker emits change', async () => {
+    wrapper.vm.showCalendarFilter = true;
+    await wrapper.vm.$nextTick();
+
+    const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
+
+    const payload = {
+      startDate: '01-10-2025',
+      endDate: '01-20-2025',
+    };
+
+    await datePicker.vm.$emit('change', payload);
+
+    const emitted = wrapper.emitted('selectDate');
+    expect(emitted).toBeTruthy();
+
+    const [formatted] = emitted[0];
+    expect(formatted).toEqual({
+      start: '2025-01-10',
+      end: '2025-01-20',
+    });
+  });
+
+  it('emits update:model-value and closes dropdown when DatePicker emits submit', async () => {
+    wrapper.vm.showCalendarFilter = true;
+    await wrapper.vm.$nextTick();
+
+    const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
+
+    const payload = {
+      startDate: '01-10-2025',
+      endDate: '01-20-2025',
+    };
+
+    await datePicker.vm.$emit('submit', payload);
+
+    const emitted = wrapper.emitted('update:model-value');
+    expect(emitted).toBeTruthy();
+
+    const [newValue] = emitted[0];
+    expect(newValue).toEqual({
+      start: '2025-01-10',
+      end: '2025-01-20',
+    });
+
+    expect(wrapper.vm.showCalendarFilter).toBe(false);
+  });
+
+  it('passes minDate, maxDate, options and periodBaseDate down to DatePicker', async () => {
+    const props = {
+      minDate: '2025-01-01',
+      maxDate: '2025-01-31',
+      periodBaseDate: '2025-01-15',
+      options: [{ name: 'Last 7 days', id: 'last-7-days' }],
+    };
+
+    wrapper = factory(props);
+    wrapper.vm.showCalendarFilter = true;
+    await wrapper.vm.$nextTick();
+
+    const datePicker = wrapper.findComponent({ name: 'UnnnicDatePicker' });
+    const dpProps = datePicker.props();
+
+    expect(dpProps.minDate).toBe(props.minDate);
+    expect(dpProps.maxDate).toBe(props.maxDate);
+    expect(dpProps.periodBaseDate).toBe(props.periodBaseDate);
+    expect(dpProps.options).toEqual(props.options);
+  });
+
+  it('closes dropdown on mouseout when clicking outside', () => {
+    wrapper.vm.showCalendarFilter = true;
+
+    wrapper.vm.mouseout({ target: document.createElement('div') });
+
+    expect(wrapper.vm.showCalendarFilter).toBe(false);
+  });
+});

package/src/components/Tab/__test__/__snapshots__/Tab.spec.js.snap

@@ -4,7 +4,7 @@ exports[`Tab.vue > matches the snapshot 1`] = `
 "<div data-v-b4e39fac="" class="tab size-md">
   <header data-v-b4e39fac="" class="tab-header">
     <ul data-v-b4e39fac="" class="tab-content">
-      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-b3d24f2b="" class="unnnic-tooltip-trigger" data-testid="tooltip-trigger" data-state="closed" data-grace-area-trigger=""><span data-v-26446d8e="" data-v-b4e39fac="" class="material-symbols-rounded unnnic-icon-scheme--neutral-cleanest unnnic-icon-size--sm material-symbols-rounded--filled" data-testid="material-icon" translate="no">info</span></div>
+      <li data-v-b4e39fac="" class="tab-head">tab1<div data-v-b3d24f2b="" class="unnnic-tooltip-trigger" data-testid="tooltip-trigger" data-state="closed" data-grace-area-trigger=""><span data-v-26446d8e="" data-v-b4e39fac="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--sm unnnic-icon__size--sm" data-testid="material-icon" translate="no">help</span></div>
         <!--teleport start-->
         <!--teleport end-->
       </li>

package/src/stories/DatePicker.stories.js

@@ -20,6 +20,7 @@ export default {
     months: { control: { type: 'array' } },
     days: { control: { type: 'array' } },
     options: { control: { type: 'array' } },
+    periodBaseDate: { control: { type: 'text' } },
     clearLabel: { control: { type: 'text' } },
     actionLabel: { control: { type: 'text' } },
   },
@@ -33,3 +34,73 @@ export const Default = {
     initialEndDate: '12-01-2021',
   },
 };
+
+export const SmallDayPicker = {
+  args: {
+    size: 'small',
+    type: 'day',
+    maxDate: moment().format('YYYY-MM-DD'),
+  },
+};
+
+export const MonthView = {
+  args: {
+    size: 'large',
+    type: 'month',
+    maxDate: moment().format('YYYY-MM-DD'),
+  },
+};
+
+export const YearView = {
+  args: {
+    size: 'large',
+    type: 'year',
+    maxDate: moment().format('YYYY-MM-DD'),
+  },
+};
+
+export const WithMinAndMaxDateRange = {
+  args: {
+    size: 'large',
+    type: 'day',
+    minDate: moment().subtract(30, 'days').format('YYYY-MM-DD'),
+    maxDate: moment().format('YYYY-MM-DD'),
+  },
+};
+
+export const WithCustomLabelsAndDisableClear = {
+  args: {
+    size: 'large',
+    type: 'day',
+    clearLabel: 'Reset',
+    actionLabel: 'Apply',
+    disableClear: true,
+    options: [
+      { name: 'Last 7 days', id: 'last-7-days' },
+      { name: 'Last 30 days', id: 'last-30-days' },
+      { name: 'Current month', id: 'current-month' },
+      { name: 'Previous month', id: 'previous-month' },
+      { name: 'Custom', id: 'custom' },
+    ],
+  },
+};
+
+export const CustomRelativePeriodsWithBaseDate = {
+  args: {
+    size: 'large',
+
+    periodBaseDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+
+    maxDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+
+    options: [
+      { name: 'Last 7 days (up to 24h ago)', id: 'last-7-days' },
+      { name: 'Last 14 days (up to 24h ago)', id: 'last-14-days' },
+      { name: 'Last 30 days (up to 24h ago)', id: 'last-30-days' },
+      { name: 'Last 12 months (up to 24h ago)', id: 'last-12-months' },
+      { name: 'Current month (up to 24h ago)', id: 'current-month' },
+      { name: 'Previous month (up to 24h ago)', id: 'previous-month' },
+      { name: 'Custom', id: 'custom' },
+    ],
+  },
+};

package/src/stories/InputDatePicker.stories.js

@@ -67,3 +67,25 @@ export const WithMinMaxDates = {
     ],
   },
 };
+
+export const WithCustomRelativePeriodsAndBaseDate = {
+  args: {
+    size: 'sm',
+    next: true,
+    iconPosition: 'right',
+    fillW: true,
+
+    periodBaseDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+    maxDate: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+
+    options: [
+      { name: 'Last 7 days (up to 24h ago)', id: 'last-7-days' },
+      { name: 'Last 14 days (up to 24h ago)', id: 'last-14-days' },
+      { name: 'Last 30 days (up to 24h ago)', id: 'last-30-days' },
+      { name: 'Last 12 months (up to 24h ago)', id: 'last-12-months' },
+      { name: 'Current month (up to 24h ago)', id: 'current-month' },
+      { name: 'Previous month (up to 24h ago)', id: 'previous-month' },
+      { name: 'Custom', id: 'custom' },
+    ],
+  },
+};