@weni/unnnic-system 2.14.2 → 2.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.14.2",
+  "version": "2.15.0",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Collapse/Collapse.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div
+    data-testid="collapse"
     :class="[
       'unnnic-collapse',
       `unnnic-collapse--size-${size}`,
@@ -12,6 +13,7 @@
     ]"
   >
     <div
+      data-testid="collapse-header"
       class="unnnic-collapse__header"
       @click="localActive = !localActive"
     >

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

@@ -0,0 +1,117 @@
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach } from 'vitest';
+import Collapse from '../Collapse.vue';
+
+describe('Collapse.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Collapse, {
+      props: { title: 'Test Title' },
+    });
+  });
+
+  it('matches the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  describe('Props', () => {
+    it('should accept title prop and render it correctly', () => {
+      expect(wrapper.find('[data-testid="collapse-header"]').text()).toContain(
+        'Test Title',
+      );
+    });
+
+    it('should accept active prop and set localActive accordingly', async () => {
+      await wrapper.setProps({ active: true });
+      expect(wrapper.vm.localActive).toBe(true);
+
+      await wrapper.setProps({ active: false });
+      expect(wrapper.vm.localActive).toBe(false);
+    });
+
+    it('should apply classes based on props', async () => {
+      await wrapper.setProps({ borderBottom: true });
+      expect(wrapper.classes()).toContain('unnnic-collapse--border-bottom');
+
+      await wrapper.setProps({ unspacedIcon: true });
+      expect(wrapper.classes()).toContain('unnnic-collapse--unspaced-icon');
+
+      await wrapper.setProps({ size: 'lg' });
+      expect(wrapper.classes()).toContain('unnnic-collapse--size-lg');
+
+      await wrapper.setProps({ size: 'md' });
+      expect(wrapper.classes()).toContain('unnnic-collapse--size-md');
+
+      await wrapper.setProps({ size: undefined });
+      expect(wrapper.classes()).toContain('unnnic-collapse--size-lg'); // default size
+
+      await wrapper.setProps({ modelValue: true });
+      expect(wrapper.classes()).toContain('unnnic-collapse--active');
+
+      await wrapper.setProps({ modelValue: false });
+      expect(wrapper.classes()).not.toContain('unnnic-collapse--active');
+    });
+  });
+
+  describe('Interactions', () => {
+    it('should toggle localActive when header is clicked', async () => {
+      const header = wrapper.find('[data-testid="collapse-header"]');
+
+      expect(wrapper.vm.localActive).toBe(false);
+      await header.trigger('click');
+      expect(wrapper.vm.localActive).toBe(true);
+      await header.trigger('click');
+      expect(wrapper.vm.localActive).toBe(false);
+    });
+
+    it('should emit change and update:modelValue on toggle', async () => {
+      const header = wrapper.find('[data-testid="collapse-header"]');
+
+      await header.trigger('click');
+
+      expect(wrapper.emitted('change')).toEqual([[true]]);
+      expect(wrapper.emitted('update:modelValue')).toEqual([[true]]);
+
+      await header.trigger('click');
+
+      expect(wrapper.emitted('change')).toEqual([[true], [false]]);
+      expect(wrapper.emitted('update:modelValue')).toEqual([[true], [false]]);
+    });
+  });
+
+  describe('Slots', () => {
+    it('should render default slot content when active', async () => {
+      const defaultSlotContent = 'This is default slot content';
+      wrapper = mount(Collapse, {
+        props: { title: 'Test Title', active: true },
+        slots: { default: defaultSlotContent },
+      });
+      expect(wrapper.html()).toContain(defaultSlotContent);
+    });
+
+    it('should render header slot content if provided', async () => {
+      const headerSlotContent =
+        '<header data-testid="header-slot">Header Slot Content</header>';
+      wrapper = mount(Collapse, {
+        props: { title: 'Test Title' },
+        slots: { header: headerSlotContent },
+      });
+      expect(wrapper.find('[data-testid="header-slot"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Watchers', () => {
+    it('should update localActive when active prop changes', async () => {
+      expect(wrapper.vm.localActive).toBe(false);
+      await wrapper.setProps({ active: true });
+      expect(wrapper.vm.localActive).toBe(true);
+    });
+
+    it('should update localActive when modelValue prop changes', async () => {
+      expect(wrapper.vm.localActive).toBe(false);
+      await wrapper.setProps({ modelValue: true });
+      expect(wrapper.vm.localActive).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Collapse.vue > matches the snapshot 1`] = `
+"<div data-v-7d0d9fbd="" data-testid="collapse" class="unnnic-collapse unnnic-collapse--size-lg">
+  <div data-v-7d0d9fbd="" data-testid="collapse-header" class="unnnic-collapse__header">Test Title<svg data-v-26446d8e="" data-v-7d0d9fbd="" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="unnnic-icon unnnic-icon__size--xs unnnic-icon-scheme--neutral-cloudy" data-testid="old-map-icons">
+      <path d="M5.31471 14.0096L19.0432 29.5967C19.1676 29.7264 19.3169 29.8296 19.4822 29.9001C19.6474 29.9707 19.8253 30.007 20.005 30.007C20.1847 30.007 20.3625 29.9707 20.5278 29.9001C20.6931 29.8296 20.8424 29.7264 20.9668 29.5967L34.689 14.0096C34.7987 13.886 34.8825 13.7415 34.9353 13.5849C34.9882 13.4282 35.009 13.2625 34.9965 13.0977C34.984 12.9328 34.9385 12.7721 34.8627 12.6252C34.7869 12.4783 34.6824 12.3481 34.5553 12.2423L32.243 10.2963C31.9852 10.0789 31.6522 9.97163 31.316 9.99759C30.9797 10.0235 30.6671 10.1807 30.4457 10.435L20.2406 22.25C20.2112 22.2841 20.1749 22.3114 20.134 22.3302C20.0931 22.3489 20.0487 22.3587 20.0037 22.3587C19.9588 22.3587 19.9143 22.3489 19.8734 22.3302C19.8326 22.3114 19.7962 22.2841 19.7669 22.25L9.558 10.4338C9.33639 10.1806 9.02374 10.0252 8.68809 10.0013C8.52167 9.9865 8.35397 10.0052 8.19489 10.0563C8.03582 10.1074 7.8886 10.1898 7.76195 10.2988L5.44845 12.2423C5.32061 12.3479 5.21534 12.4781 5.13889 12.6252C5.06245 12.7723 5.0164 12.9332 5.0035 13.0985C4.99099 13.2635 5.01212 13.4294 5.06562 13.586C5.11911 13.7426 5.20386 13.8868 5.31471 14.0096Z" fill="#3B414D" class="primary"></path>
+    </svg></div>
+  <div data-v-7d0d9fbd="" class="unnnic-collapse__body" style="display: none;"></div>
+</div>"
+`;

package/src/components/Drawer/Drawer.vue

@@ -2,10 +2,12 @@
   <aside
     v-if="modelValue"
     class="unnnic-drawer"
+    data-testid="drawer"
   >
     <section
       v-if="!withoutOverlay"
       class="unnnic-drawer__overlay"
+      data-testid="overlay"
       @click.stop="close"
     />
     <Transition
@@ -14,6 +16,7 @@
     >
       <section
         v-if="showDrawer"
+        data-testid="drawer-container"
         :class="[
           'unnnic-drawer__container',
           `unnnic-drawer__container--${size}`,
@@ -21,16 +24,23 @@
       >
         <header class="unnnic-drawer__header">
           <section class="unnnic-drawer__title-container">
-            <h1 class="unnnic-drawer__title">{{ title }}</h1>
+            <h1
+              class="unnnic-drawer__title"
+              data-testid="drawer-title"
+            >
+              {{ title }}
+            </h1>
             <p
               v-if="description"
               class="unnnic-drawer__description"
+              data-testid="drawer-description"
             >
               {{ description }}
             </p>
           </section>
           <UnnnicIcon
             class="unnnic-drawer__close"
+            data-testid="close-icon"
             :icon="closeIcon"
             size="avatar-nano"
             clickable
@@ -43,9 +53,11 @@
         <footer
           v-if="showFooter"
           class="unnnic-drawer__footer"
+          data-testid="footer"
         >
           <UnnnicButton
             v-if="secondaryButtonText"
+            data-testid="secondary-button"
             size="large"
             type="tertiary"
             :disabled="disabledSecondaryButton"
@@ -55,6 +67,7 @@
           />
           <UnnnicButton
             v-if="primaryButtonText"
+            data-testid="primary-button"
             size="large"
             :disabled="disabledPrimaryButton"
             :loading="loadingPrimaryButton"

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

@@ -0,0 +1,253 @@
+import { flushPromises, mount } from '@vue/test-utils';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import Drawer from '../Drawer.vue';
+import { nextTick } from 'vue';
+
+describe('Drawer.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(Drawer, {
+      props: {
+        modelValue: true,
+        title: 'Test Title',
+        description: 'Test Description',
+        primaryButtonText: 'Primary Action',
+        secondaryButtonText: 'Secondary Action',
+      },
+      global: {
+        stubs: ['UnnnicIcon', 'UnnnicButton'],
+      },
+    });
+  });
+
+  const element = (id) => wrapper.find(`[data-testid="${id}"]`);
+  const component = (id) => wrapper.findComponent(`[data-testid="${id}"]`);
+  const drawer = () => element('drawer');
+  const overlay = () => element('overlay');
+  const title = () => element('drawer-title');
+  const description = () => element('drawer-description');
+  const primaryButton = () => component('primary-button');
+  const secondaryButton = () => component('secondary-button');
+  const footer = () => element('footer');
+  const closeIcon = () => component('close-icon');
+  const drawerContainer = () => element('drawer-container');
+
+  describe('Component Rendering', () => {
+    describe('Component Rendering', () => {
+      it('matches the snapshot', () => {
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      it('should render the drawer when modelValue is true', () => {
+        expect(drawer().exists()).toBe(true);
+      });
+
+      it('should not render the drawer when modelValue is false', async () => {
+        await wrapper.setProps({ modelValue: false });
+        expect(drawer().exists()).toBe(false);
+      });
+
+      it('should render the overlay when withoutOverlay is false', () => {
+        expect(overlay().exists()).toBe(true);
+      });
+
+      it('should not render the overlay when withoutOverlay is true', async () => {
+        await wrapper.setProps({ withoutOverlay: true });
+        expect(overlay().exists()).toBe(false);
+      });
+
+      it('should display the title and description correctly', () => {
+        expect(title().text()).toBe('Test Title');
+        expect(description().text()).toBe('Test Description');
+      });
+
+      it('should not display the description when not provided', async () => {
+        await wrapper.setProps({ description: '' });
+        expect(description().exists()).toBe(false);
+      });
+
+      it('should render the slot content correctly', () => {
+        wrapper = mount(Drawer, {
+          props: {
+            modelValue: true,
+            title: 'Test Title',
+          },
+          slots: {
+            content: '<div data-testid="slot-content">Slot Content</div>',
+          },
+        });
+        expect(wrapper.find('[data-testid="slot-content"]').exists()).toBe(
+          true,
+        );
+        expect(wrapper.find('[data-testid="slot-content"]').text()).toBe(
+          'Slot Content',
+        );
+      });
+    });
+  });
+
+  describe('Button Behavior', () => {
+    it('should emit the primaryButtonClick event when the primary button is clicked', async () => {
+      await primaryButton().trigger('click');
+      expect(wrapper.emitted('primaryButtonClick')).toBeTruthy();
+    });
+
+    it('should disable the primary button when disabledPrimaryButton is true', async () => {
+      await wrapper.setProps({ disabledPrimaryButton: true });
+      expect(primaryButton().attributes('disabled')).toBeDefined();
+    });
+
+    it('should display the correct text on the primary button', () => {
+      expect(primaryButton().props('text')).toBe('Primary Action');
+    });
+
+    it('should emit the secondaryButtonClick event when the secondary button is clicked', async () => {
+      await secondaryButton().trigger('click');
+      expect(wrapper.emitted('secondaryButtonClick')).toBeTruthy();
+    });
+
+    it('should disable the secondary button when disabledSecondaryButton is true', async () => {
+      await wrapper.setProps({ disabledSecondaryButton: true });
+      expect(secondaryButton().attributes('disabled')).toBeDefined();
+    });
+
+    it('should display the correct text on the secondary button', () => {
+      expect(secondaryButton().props('text')).toBe('Secondary Action');
+    });
+
+    it('should render the footer only if showFooter is true', async () => {
+      expect(footer().exists()).toBe(true);
+
+      await wrapper.setProps({
+        primaryButtonText: '',
+        secondaryButtonText: '',
+      });
+
+      expect(footer().exists()).toBe(false);
+    });
+  });
+
+  describe('Interactions and Transitions', () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+    afterEach(() => {
+      vi.clearAllTimers();
+    });
+
+    it('should close the drawer when the close icon is clicked', async () => {
+      await closeIcon().trigger('click');
+
+      vi.advanceTimersByTime(200);
+
+      expect(wrapper.emitted('close')).toBeTruthy();
+    });
+
+    it('should call back method when back icon is clicked and distinctCloseBack is true', async () => {
+      await wrapper.setProps({ distinctCloseBack: true });
+      await closeIcon().trigger('click');
+
+      vi.advanceTimersByTime(200);
+
+      expect(wrapper.emitted('back')).toBeTruthy();
+    });
+
+    it('should not emit back event when back icon is clicked and distinctCloseBack is false', async () => {
+      await closeIcon().trigger('click');
+      expect(wrapper.emitted('back')).toBeUndefined();
+    });
+
+    it('should correctly handle transitions when closing the drawer', async () => {
+      await wrapper.vm.close();
+      expect(wrapper.vm.showDrawer).toBe(false);
+
+      setTimeout(() => {
+        expect(drawer().exists()).toBe(false);
+      }, 200);
+    });
+
+    it('should handle overlay clicks to close the drawer when withoutOverlay is false', async () => {
+      expect(overlay().exists()).toBe(true);
+      await overlay().trigger('click');
+
+      vi.advanceTimersByTime(200);
+
+      expect(wrapper.emitted('close')).toBeTruthy();
+    });
+
+    it('should execute the callback after 200ms timeout and reset showDrawer', async () => {
+      const callbackMock = vi.fn();
+      wrapper.vm.transitionClose(callbackMock);
+
+      expect(wrapper.vm.showDrawer).toBe(false);
+
+      vi.advanceTimersByTime(200);
+
+      expect(callbackMock).toHaveBeenCalled();
+      expect(wrapper.vm.showDrawer).toBe(true);
+    });
+  });
+
+  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(
+        'unnnic-drawer__container--lg',
+      );
+
+      await wrapper.setProps({ size: 'xl' });
+      expect(drawerContainer().classes()).toContain(
+        'unnnic-drawer__container--xl',
+      );
+    });
+
+    it('should display footer if either primaryButtonText or secondaryButtonText is provided', async () => {
+      expect(footer().exists()).toBe(true);
+
+      await wrapper.setProps({
+        primaryButtonText: '',
+        secondaryButtonText: 'Secondary Button',
+      });
+      expect(footer().exists()).toBe(true);
+    });
+
+    it('should not display footer if both primaryButtonText and secondaryButtonText are not provided', async () => {
+      await wrapper.setProps({
+        primaryButtonText: '',
+        secondaryButtonText: '',
+      });
+
+      expect(footer().exists()).toBe(false);
+    });
+
+    it('should disable primary button when disabledPrimaryButton prop is true', async () => {
+      await wrapper.setProps({
+        primaryButtonText: 'Primary Button',
+        disabledPrimaryButton: true,
+      });
+      expect(primaryButton().attributes('disabled')).toBe('true');
+    });
+
+    it('should disable secondary button when disabledSecondaryButton prop is true', async () => {
+      await wrapper.setProps({
+        secondaryButtonText: 'Secondary Button',
+        disabledSecondaryButton: true,
+      });
+      expect(secondaryButton().attributes('disabled')).toBe('true');
+    });
+
+    it('should use correct icon for close button based on closeIcon prop', async () => {
+      await wrapper.setProps({ closeIcon: 'custom_close_icon' });
+      expect(closeIcon().props('icon')).toBe('custom_close_icon');
+    });
+
+    it('should validate size prop to accept only md, lg, or xl values', async () => {
+      const validator = Drawer.props.size.validator;
+      expect(validator('md')).toBe(true);
+      expect(validator('lg')).toBe(true);
+      expect(validator('xl')).toBe(true);
+      expect(validator('sm')).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Drawer.vue > Component Rendering > Component Rendering > matches the snapshot 1`] = `
+"<aside data-v-196de012="" class="unnnic-drawer" data-testid="drawer">
+  <section data-v-196de012="" class="unnnic-drawer__overlay" data-testid="overlay"></section>
+  <transition-stub data-v-196de012="" name="drawer" appear="true" persisted="false" css="true">
+    <section data-v-196de012="" data-testid="drawer-container" class="unnnic-drawer__container unnnic-drawer__container--md">
+      <header data-v-196de012="" class="unnnic-drawer__header">
+        <section data-v-196de012="" class="unnnic-drawer__title-container">
+          <h1 data-v-196de012="" class="unnnic-drawer__title" data-testid="drawer-title">Test Title</h1>
+          <p data-v-196de012="" class="unnnic-drawer__description" data-testid="drawer-description">Test Description</p>
+        </section>
+        <unnnic-icon-stub data-v-196de012="" filled="false" next="false" icon="arrow_back" clickable="true" size="avatar-nano" scheme="neutral-darkest" class="unnnic-drawer__close" data-testid="close-icon"></unnnic-icon-stub>
+      </header>
+      <section data-v-196de012="" class="unnnic-drawer__content"></section>
+      <footer data-v-196de012="" class="unnnic-drawer__footer" data-testid="footer">
+        <unnnic-button-stub data-v-196de012="" size="large" text="Secondary Action" type="tertiary" float="false" iconleft="" iconright="" iconcenter="" next="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="" next="false" disabled="false" loading="false" data-testid="primary-button"></unnnic-button-stub>
+      </footer>
+    </section>
+  </transition-stub>
+</aside>"
+`;

package/src/components/ModalDialog/ModalDialog.vue

@@ -2,9 +2,11 @@
   <section
     v-if="modelValue"
     class="unnnic-modal-dialog"
+    data-testid="modal-dialog"
   >
     <section
       class="unnnic-modal-dialog__overlay"
+      data-testid="modal-overlay"
       @click.stop="!persistent && close()"
     />
     <section
@@ -12,6 +14,7 @@
         'unnnic-modal-dialog__container',
         `unnnic-modal-dialog__container--${size}`,
       ]"
+      data-testid="modal-container"
     >
       <section
         v-if="$slots.leftSidebar"
@@ -28,17 +31,22 @@
           <section class="unnnic-modal-dialog__container__title-container">
             <UnnnicIcon
               v-if="icon || type"
+              data-testid="title-icon"
               class="unnnic-modal-dialog__container__title-icon"
               :icon="icon || iconsMapper[type]?.icon"
               :scheme="iconScheme || iconsMapper[type]?.scheme"
               size="md"
             />
-            <h1 class="unnnic-modal-dialog__container__title-text">
+            <h1
+              class="unnnic-modal-dialog__container__title-text"
+              data-testid="title-text"
+            >
               {{ title }}
             </h1>
           </section>
           <UnnnicIcon
             v-if="showCloseIcon"
+            data-testid="close-icon"
             icon="close"
             clickable
             @click="close()"
@@ -49,6 +57,7 @@
         </section>
         <section
           v-if="primaryButtonProps.text"
+          data-testid="actions-section"
           :class="[
             'unnnic-modal-dialog__container__actions',
             {
@@ -60,6 +69,7 @@
           <UnnnicButton
             v-if="!hideSecondaryButton"
             v-bind="secondaryButtonProps"
+            data-testid="secondary-button"
             type="tertiary"
             :text="secondaryButtonProps.text || i18n('cancel')"
             class="unnnic-modal-dialog__container__actions__secondary-button"
@@ -71,6 +81,7 @@
           />
           <UnnnicButton
             v-bind="primaryButtonProps"
+            data-testid="primary-button"
             :type="
               primaryButtonProps.type ||
               primaryButtonTypeMapper[type] ||