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

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

@@ -0,0 +1,227 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach } from 'vitest';
+import DatePicker from '../DatePicker.vue';
+
+const factory = (props = {}) =>
+  mount(DatePicker, {
+    props: {
+      size: 'large',
+      type: 'day',
+      ...props,
+    },
+    global: {
+      mocks: {
+        $i18n: { locale: 'en-us' },
+      },
+      stubs: {
+        UnnnicButton: true,
+      },
+    },
+  });
+
+const findFirstSelectableDay = (wrapper) =>
+  wrapper
+    .findAll('[data-testid="date-picker-day"]')
+    .find((day) => day.classes().includes('selectable'));
+
+describe('DatePicker.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = factory({
+      options: [
+        { name: 'Last 7 days', id: 'last-7-days' },
+        { name: 'Custom', id: 'custom' },
+      ],
+    });
+  });
+
+  it('renders day view with two months and options', () => {
+    expect(wrapper.find('[data-testid="date-picker-root"]').exists()).toBe(
+      true,
+    );
+    expect(
+      wrapper.findAll('[data-testid="date-picker-month-container"]').length,
+    ).toBe(2);
+    expect(wrapper.findAll('[data-testid="date-picker-option"]').length).toBe(
+      2,
+    );
+  });
+
+  it('selects a date range and emits change', async () => {
+    const first = findFirstSelectableDay(wrapper);
+    const second = wrapper
+      .findAll('[data-testid="date-picker-day"]')
+      .reverse()
+      .find((day) => day.classes().includes('selectable'));
+
+    await first.trigger('click');
+    await second.trigger('click');
+
+    const emittedChange = wrapper.emitted('change');
+    expect(emittedChange).toBeTruthy();
+    const [{ startDate, endDate }] = emittedChange.pop();
+    expect(startDate).not.toBe('');
+    expect(endDate).not.toBe('');
+  });
+
+  it('clears selection when clear button is clicked', async () => {
+    const day = findFirstSelectableDay(wrapper);
+    await day.trigger('click');
+
+    await wrapper.find('[data-testid="date-picker-clear"]').trigger('click');
+
+    expect(wrapper.vm.startDate).toBe('');
+    expect(wrapper.vm.endDate).toBe('');
+    expect(wrapper.vm.optionSelected).toBe('');
+  });
+
+  it('submits with selected period and emits equivalent option name', async () => {
+    await wrapper.vm.autoSelect('last-7-days');
+    await wrapper.find('[data-testid="date-picker-submit"]').trigger('click');
+
+    const submit = wrapper.emitted('submit');
+    const updateEquivalent = wrapper.emitted('update:equivalentOption');
+
+    expect(submit).toBeTruthy();
+    expect(submit[0][0]).toHaveProperty('startDate');
+    expect(submit[0][0]).toHaveProperty('endDate');
+
+    expect(updateEquivalent[0][0]).toBe('Last 7 days');
+  });
+
+  it('submits with custom selection and clears equivalent option', async () => {
+    wrapper.vm.optionSelected = 'custom';
+    await wrapper.find('[data-testid="date-picker-submit"]').trigger('click');
+
+    const updateEquivalent = wrapper.emitted('update:equivalentOption');
+    expect(updateEquivalent[0][0]).toBe('');
+  });
+
+  it('uses periodBaseDate to compute relative ranges', async () => {
+    const base = '2025-01-15';
+    wrapper = factory({
+      periodBaseDate: base,
+      options: [{ name: 'Last 7 days', id: 'last-7-days' }],
+    });
+
+    await wrapper.vm.autoSelect('last-7-days');
+
+    const [year, month, day] = base.split('-');
+    const baseDate = new Date(Number(year), Number(month) - 1, Number(day));
+    const expectedEnd = wrapper.vm.dateToString(baseDate);
+
+    expect(wrapper.vm.endDate).toBe(expectedEnd);
+  });
+
+  it('renders month view and selects a month', async () => {
+    wrapper = factory({
+      type: 'month',
+      options: [{ name: 'Last 12 months', id: 'last-12-months' }],
+    });
+
+    const monthCell = wrapper.find('[data-testid="date-picker-month-cell"]');
+    await monthCell.trigger('click');
+
+    expect(wrapper.vm.startDate).not.toBe('');
+    expect(wrapper.vm.endDate).not.toBe('');
+  });
+
+  it('renders year view and selects a year', async () => {
+    wrapper = factory({
+      type: 'year',
+      options: [{ name: 'Previous year', id: 'previous-year' }],
+    });
+
+    const yearCell = wrapper.find('[data-testid="date-picker-year-cell"]');
+    await yearCell.trigger('click');
+
+    expect(wrapper.vm.startDate).not.toBe('');
+    expect(wrapper.vm.endDate).not.toBe('');
+  });
+
+  it('hides options when size is small and respects disableClear', async () => {
+    wrapper = factory({
+      size: 'small',
+      options: [{ name: 'Last 7 days', id: 'last-7-days' }],
+    });
+    expect(wrapper.find('[data-testid="date-picker-options"]').exists()).toBe(
+      false,
+    );
+
+    wrapper = factory({
+      disableClear: true,
+      options: [{ name: 'Last 7 days', id: 'last-7-days' }],
+    });
+    expect(wrapper.find('[data-testid="date-picker-clear"]').exists()).toBe(
+      false,
+    );
+    expect(wrapper.find('[data-testid="date-picker-submit"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it('navigates between months using navigation buttons', async () => {
+    const initialReference = wrapper.vm.referenceDate;
+
+    const nextButton = wrapper.find('[data-testid="date-picker-nav-right"]');
+    await nextButton.trigger('click');
+
+    expect(wrapper.vm.referenceDate).not.toBe(initialReference);
+  });
+
+  it('exposes i18n helper compatible with previous mixin', () => {
+    const text = wrapper.vm.i18n('clean', 'Clean');
+    expect(text).toBeTruthy();
+  });
+
+  it('computes previous-month period correctly based on periodBaseDate', () => {
+    const base = '2025-03-15';
+    wrapper = factory({
+      periodBaseDate: base,
+      options: [{ name: 'Previous month', id: 'previous-month' }],
+    });
+
+    const { startDate, endDate } =
+      wrapper.vm.getStartAndEndDateByPeriod('previous-month');
+
+    const baseDate = new Date(base);
+    const firstPrevMonth = new Date(
+      baseDate.getFullYear(),
+      baseDate.getMonth() - 1,
+      1,
+    );
+    const lastPrevMonth = new Date(
+      firstPrevMonth.getFullYear(),
+      firstPrevMonth.getMonth() + 1,
+      0,
+    );
+
+    const expectedStart = wrapper.vm.dateToString(firstPrevMonth);
+    const expectedEnd = wrapper.vm.dateToString(lastPrevMonth);
+
+    expect(startDate).toBe(expectedStart);
+    expect(endDate).toBe(expectedEnd);
+  });
+
+  it('marks dates outside minDate and maxDate as out of range', () => {
+    const min = '2025-02-10';
+    const max = '2025-02-20';
+
+    wrapper = factory({
+      minDate: min,
+      maxDate: max,
+    });
+
+    const [year, month] = min.split('-');
+    const reference = `${Number(month)} 1 ${year}`;
+
+    const dates = wrapper.vm.getDatesOfTheMonth(reference);
+
+    const hasOutOfRange = dates.some((d) =>
+      d.properties.includes('out of range'),
+    );
+
+    expect(hasOutOfRange).toBe(true);
+  });
+});

package/src/components/Drawer/Drawer.vue

@@ -1,9 +1,9 @@
 <template>
   <Drawer
-    :open="modelValue"
-    @update:open="$emit('update:modelValue', $event)"
     class="unnnic-drawer"
     data-testid="drawer"
+    :open="modelValue"
+    @update:open="$emit('update:modelValue', $event)"
   >
     <DrawerContent
       :showOverlay="!withoutOverlay"
@@ -96,6 +96,10 @@ import {
   DrawerDescription,
 } from '../ui/drawer';
 
+defineOptions({
+  name: 'UnnnicDrawer',
+});
+
 const props = defineProps({
   title: {
     type: String,

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

@@ -10,12 +10,6 @@ describe('Drawer.vue', () => {
     UnnnicIcon: true,
     UnnnicButton: true,
     Teleport: templateSlot,
-    Drawer: templateSlot,
-    DrawerContent: templateSlot,
-    DrawerFooter: templateSlot,
-    DrawerClose: templateSlot,
-    DrawerTitle: templateSlot,
-    DrawerDescription: templateSlot,
   };
 
   beforeEach(() => {
@@ -35,7 +29,7 @@ describe('Drawer.vue', () => {
 
   const element = (id) => wrapper.find(`[data-testid="${id}"]`);
   const component = (id) => wrapper.findComponent(`[data-testid="${id}"]`);
-  const drawer = () => element('drawer');
+  const drawerRoot = () => wrapper.findComponent({ name: 'UnnnicDrawerNext' });
   const title = () => element('drawer-title');
   const description = () => element('drawer-description');
   const primaryButton = () => component('primary-button');
@@ -43,6 +37,8 @@ describe('Drawer.vue', () => {
   const footer = () => element('footer');
   const closeIcon = () => component('close-icon');
   const drawerContainer = () => element('drawer-container');
+  const drawerContentComponent = () =>
+    wrapper.findComponent({ name: 'UnnnicDrawerContent' });
 
   describe('Component Rendering', () => {
     describe('Component Rendering', () => {
@@ -51,23 +47,21 @@ describe('Drawer.vue', () => {
       });
 
       it('should render the drawer when modelValue is true', () => {
-        expect(drawer().attributes('open')).toBe('true');
+        expect(drawerRoot().props('open')).toBe(true);
       });
 
       it('should not render the drawer when modelValue is false', async () => {
         await wrapper.setProps({ modelValue: false });
-        expect(drawer().attributes('open')).toBe('false');
+        expect(drawerRoot().props('open')).toBe(false);
       });
 
       it('should render the overlay when withoutOverlay is false', () => {
-        console.log('wrapper.html()', wrapper.html());
-
-        expect(drawerContainer().attributes('showoverlay')).toBe('true');
+        expect(drawerContentComponent().props('showOverlay')).toBe(true);
       });
 
       it('should not render the overlay when withoutOverlay is true', async () => {
         await wrapper.setProps({ withoutOverlay: true });
-        expect(drawerContainer().attributes('showoverlay')).toBe('false');
+        expect(drawerContentComponent().props('showOverlay')).toBe(false);
       });
 
       it('should display the title and description correctly', () => {
@@ -217,14 +211,16 @@ describe('Drawer.vue', () => {
   describe('Props and Computed Properties', () => {
     it('should render the correct size class based on size prop', async () => {
       await wrapper.setProps({ size: 'lg' });
-      expect(drawerContainer().classes()).toContain(
+      expect(drawerContentComponent().props('class')).toContain(
         'unnnic-drawer__container--lg',
       );
+      expect(drawerContentComponent().props('size')).toBe('large');
 
       await wrapper.setProps({ size: 'xl' });
-      expect(drawerContainer().classes()).toContain(
+      expect(drawerContentComponent().props('class')).toContain(
         'unnnic-drawer__container--xl',
       );
+      expect(drawerContentComponent().props('size')).toBe('extra-large');
     });
 
     it('should display footer if either primaryButtonText or secondaryButtonText is provided', async () => {

package/src/components/Drawer/__tests__/__snapshots__/Drawer.spec.js.snap

@@ -1,22 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Drawer.vue > Component Rendering > Component Rendering > matches the snapshot 1`] = `
-"<div data-v-196de012="" open="true" class="unnnic-drawer" data-testid="drawer">
-  <div data-v-196de012="" showoverlay="true" data-testid="drawer-container" size="medium" class="unnnic-drawer__container unnnic-drawer__container--md">
+"<div data-v-e761d31f="" data-v-196de012="" disabled="false" defer="false" forcemount="false" data-testid="drawer-container">
+  <div data-v-7f241b30="" data-v-e761d31f="" data-state="open" style="pointer-events: auto;" data-vaul-overlay="" data-vaul-snap-points="false" data-vaul-snap-points-overlay="true" class="unnnic-drawer__overlay"></div>
+  <div data-v-e761d31f="" data-dismissable-layer="" style="--snap-point-height: 0; --initial-transform: calc(100% + 8px); pointer-events: auto;" tabindex="-1" data-vaul-drawer="" data-vaul-drawer-direction="right" data-vaul-delayed-snap-points="false" data-vaul-snap-points="false" size="medium" showoverlay="true" class="unnnic-drawer__content unnnic-drawer__content--medium unnnic-drawer__container unnnic-drawer__container--md" id="" role="dialog" aria-describedby="reka-dialog-description-v-1" aria-labelledby="reka-dialog-title-v-0" data-state="open">
     <header data-v-39d0dfb8="" data-v-196de012="" class="unnnic-drawer__header unnnic-drawer__header">
       <section data-v-196de012="" class="unnnic-drawer__title-container">
-        <div data-v-196de012="" class="unnnic-drawer__title" data-testid="drawer-title">Test Title</div>
-        <div data-v-196de012="" class="unnnic-drawer__description" data-testid="drawer-description">Test Description</div>
-      </section>
-      <div data-v-196de012="">
+        <h2 data-v-97709962="" data-v-196de012="" id="reka-dialog-title-v-0" class="unnnic-drawer__title unnnic-drawer__title" data-testid="drawer-title">Test Title</h2>
+        <p data-v-750ea255="" data-v-196de012="" id="reka-dialog-description-v-1" class="unnnic-drawer__description unnnic-drawer__description" data-testid="drawer-description">Test Description</p>
+      </section><button data-v-4a771f40="" data-v-196de012="" type="button" class="unnnic-drawer__close">
         <unnnic-button-stub data-v-196de012="" size="small" text="" type="tertiary" float="false" iconleft="" iconright="" iconcenter="arrow_forward" iconsfilled="false" disabled="false" loading="false" class="unnnic-drawer__close-icon" data-testid="close-icon"></unnnic-button-stub>
-      </div>
+      </button>
     </header>
     <section data-v-196de012="" class="unnnic-drawer__content"></section>
-    <div data-v-196de012="" class="unnnic-drawer__footer" data-testid="footer">
+    <footer data-v-02ebc5b4="" data-v-196de012="" class="unnnic-drawer__footer unnnic-drawer__footer" data-testid="footer">
       <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="secondary-button"></unnnic-button-stub>
       <unnnic-button-stub data-v-196de012="" size="large" text="Primary Action" type="primary" float="false" iconleft="" iconright="" iconcenter="" iconsfilled="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
-    </div>
+    </footer>
   </div>
 </div>"
 `;