@weni/unnnic-system 2.13.0 → 2.13.1

package/package.json

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

package/src/components/Alert/Alert.vue

@@ -7,6 +7,7 @@
       :icon="icon"
       :scheme="scheme"
       size="sm"
+      data-test="unnnic-icon"
     />
     <div class="unnnic-alert__content">
       <div class="unnnic-alert__title">
@@ -29,6 +30,7 @@
       icon="close-1"
       scheme="brand-sec"
       size="xs"
+      data-test="unnnic-icon-close"
       @click="onClose"
     />
   </div>

package/src/components/Alert/AlertBanner.vue

@@ -18,6 +18,7 @@
         :icon="getIconType(type)"
         size="sm"
         scheme="neutral-white"
+        data-test="unnnic-icon"
       />
       <p class="text">{{ text }}</p>
       <a
@@ -39,6 +40,7 @@
         icon="close"
         size="sm"
         scheme="neutral-white"
+        data-test="unnnic-close-icon"
       />
     </div>
   </section>

package/src/components/Alert/Version1dot1.vue

@@ -91,6 +91,7 @@ export default {
       default: 'default',
     },
   },
+  emits: ['close'],
 
   mounted() {
     this.$refs.progress.addEventListener('animationend', () => {

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

@@ -0,0 +1,84 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
+import UnnnicAlert from '@/components/Alert/Alert.vue';
+
+describe('UnnnicAlert.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(UnnnicAlert, {
+      props: {
+        version: '1.0',
+        title: 'Test Alert',
+        text: 'This is an alert message',
+        scheme: 'primary',
+        icon: 'alert-icon',
+        position: 'top-right',
+        closeText: 'Close',
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test('renders title and text in uppercase', () => {
+    const title = wrapper.find('.unnnic-alert__title');
+    const text = wrapper.find('.unnnic-alert__text');
+
+    expect(title.text()).toBe('TEST ALERT');
+    expect(text.text()).toBe('This is an alert message');
+  });
+
+  test('applies the correct position class', () => {
+    expect(wrapper.classes()).toContain('unnnic-alert-position--top-right');
+  });
+
+  test('renders the icon with correct props', () => {
+    const icon = wrapper.findComponent('[data-test="unnnic-icon"]');
+    expect(icon.exists()).toBe(true);
+    expect(icon.props('icon')).toBe('alert-icon');
+    expect(icon.props('scheme')).toBe('primary');
+    expect(icon.props('size')).toBe('sm');
+  });
+
+  test('renders closeText and calls onClose when clicked', async () => {
+    const closeText = wrapper.find('.unnnic-alert__close-text');
+    expect(closeText.exists()).toBe(true);
+    expect(closeText.text()).toBe('CLOSE');
+
+    const onCloseSpy = vi.spyOn(wrapper.props(), 'onClose');
+    await closeText.trigger('click');
+    expect(onCloseSpy).toHaveBeenCalled();
+  });
+
+  test('renders default close icon if closeText is not provided', async () => {
+    await wrapper.setProps({ closeText: '', onClose: () => vi.fn() });
+    await wrapper.vm.$nextTick();
+    const closeIcon = wrapper.findComponent('[data-test="unnnic-icon-close"]');
+    expect(closeIcon.exists()).toBe(true);
+    expect(closeIcon.props('icon')).toBe('close-1');
+    expect(closeIcon.props('scheme')).toBe('brand-sec');
+    expect(closeIcon.props('size')).toBe('xs');
+  });
+
+  test('renders the correct component for version 1.1', async () => {
+    await wrapper.setProps({ version: '1.1' });
+    const versionComponent = wrapper.findComponent({ name: 'Version1dot1' });
+    expect(versionComponent.exists()).toBe(true);
+  });
+
+  test('does not render alert if version is not 1.0', async () => {
+    await wrapper.setProps({ version: '1.2' });
+    expect(wrapper.find('.unnnic-alert').exists()).toBe(false);
+  });
+
+  test('matches the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/src/components/Alert/__tests__/AlertBanner.spec.js

@@ -0,0 +1,89 @@
+import { mount } from '@vue/test-utils';
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
+import AlertBanner from '@/components/Alert/AlertBanner.vue';
+
+describe('AlertBanner.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(AlertBanner, {
+      props: {
+        text: 'This is a banner alert',
+        type: 'danger',
+        showCloseButton: true,
+        linkHref: 'https://example.com',
+        linkText: 'Learn more',
+        linkTarget: '_self',
+        onClose: vi.fn(),
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test('renders the correct text and link', () => {
+    const textElement = wrapper.find('.text');
+    const linkElement = wrapper.find('.banner-alert__link');
+
+    expect(textElement.text()).toBe('This is a banner alert');
+    expect(linkElement.text()).toBe('Learn more');
+    expect(linkElement.attributes('href')).toBe('https://example.com');
+    expect(linkElement.attributes('target')).toBe('_self');
+  });
+
+  test('applies the correct class based on the type', () => {
+    expect(wrapper.classes()).toContain('banner-alert--banner-danger');
+  });
+
+  test('renders the correct icon based on the type', () => {
+    const icon = wrapper.findComponent('[data-test="unnnic-icon"]');
+    expect(icon.exists()).toBe(true);
+    expect(icon.props('icon')).toBe('block');
+    expect(icon.props('size')).toBe('sm');
+    expect(icon.props('scheme')).toBe('neutral-white');
+  });
+
+  test('does not render the icon when type is not danger, warning, or info', async () => {
+    await wrapper.setProps({ type: 'success' });
+    const icon = wrapper.findComponent('[data-test="unnnic-icon"]');
+    expect(icon.element.style.display).toBe('none');
+  });
+
+  test('calls emitClose and emits close event when close button is clicked', async () => {
+    const closeButton = wrapper.find('.banner-alert__close');
+    await closeButton.trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('close');
+    expect(wrapper.props().onClose).toHaveBeenCalled();
+  });
+
+  test('does not render close button if showCloseButton is false', async () => {
+    await wrapper.setProps({ showCloseButton: false });
+    const closeButton = wrapper.find('.banner-alert__close');
+    expect(closeButton.element.style.display).toBe('none');
+  });
+
+  test('matches the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('getIconType function returns the correct icon based on type', () => {
+    expect(wrapper.vm.getIconType('danger')).toBe('block');
+    expect(wrapper.vm.getIconType('info')).toBe('info');
+    expect(wrapper.vm.getIconType('')).toBe('info');
+  });
+
+  test('isShowTextIcon function returns true for danger, warning, and info types', () => {
+    expect(wrapper.vm.isShowTextIcon('danger')).toBe(true);
+    expect(wrapper.vm.isShowTextIcon('warning')).toBe(true);
+    expect(wrapper.vm.isShowTextIcon('info')).toBe(true);
+    expect(wrapper.vm.isShowTextIcon('')).toBe(true);
+    expect(wrapper.vm.isShowTextIcon('success')).toBe(false);
+  });
+});

package/src/components/Alert/__tests__/AlertCaller.spec.js

@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, test, vi, beforeEach, afterEach } from 'vitest';
+import AlertCaller from '@/components/Alert/AlertCaller.vue';
+import alert from '@/utils/call';
+
+vi.mock('@/utils/call', () => ({
+  default: {
+    callAlert: vi.fn(),
+  },
+}));
+
+describe('AlertCaller.vue', () => {
+  let wrapper;
+
+  const defaultProps = {
+    title: 'Test Title',
+    text: 'Test Text',
+    icon: 'test-icon',
+    enabled: true,
+    scheme: 'primary',
+    seconds: 5,
+    closeText: 'Close',
+    position: 'top-right',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(AlertCaller, {
+      props: defaultProps,
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+    vi.clearAllMocks();
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('button').text()).toBe('Launch alert');
+  });
+
+  test('calls callAlert method when button is clicked', async () => {
+    const callAlertSpy = vi.spyOn(wrapper.vm, 'callAlert');
+    await wrapper.find('button').trigger('click');
+    expect(callAlertSpy).toHaveBeenCalledTimes(1);
+  });
+
+  test('callAlert method invokes alert.callAlert with correct props', async () => {
+    await wrapper.find('button').trigger('click');
+    expect(alert.callAlert).toHaveBeenCalledWith({
+      props: defaultProps,
+      seconds: defaultProps.seconds,
+    });
+  });
+
+  test.each([
+    ['title', 'New Title'],
+    ['text', 'New Text'],
+    ['icon', 'new-icon'],
+    ['enabled', false],
+    ['scheme', 'secondary'],
+    ['seconds', 10],
+    ['closeText', 'Dismiss'],
+    ['position', 'bottom-left'],
+  ])('updates %s prop correctly', async (propName, newValue) => {
+    await wrapper.setProps({ [propName]: newValue });
+    await wrapper.find('button').trigger('click');
+    const expectedProps = { ...defaultProps, [propName]: newValue };
+    expect(alert.callAlert).toHaveBeenCalledWith({
+      props: expectedProps,
+      seconds: expectedProps.seconds,
+    });
+  });
+
+  test('passes default values when props are not provided', async () => {
+    wrapper = mount(AlertCaller, {
+      props: {},
+    });
+    await wrapper.find('button').trigger('click');
+    expect(alert.callAlert).toHaveBeenCalledWith({
+      props: {
+        title: null,
+        text: null,
+        icon: null,
+        enabled: true,
+        scheme: null,
+        seconds: 3,
+        closeText: null,
+        position: 'top-right',
+      },
+      seconds: 3,
+    });
+  });
+
+  test('matches snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/src/components/Alert/__tests__/Version1dot1.spec.js

@@ -0,0 +1,124 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, test, vi, beforeEach, afterEach } from 'vitest';
+import Alert from '@/components/Alert/Version1dot1.vue';
+import UnnnicIcon from '@/components/Icon.vue';
+
+vi.mock('@/components/Icon.vue');
+
+describe('Alert.vue', () => {
+  let wrapper;
+
+  const defaultProps = {
+    version: '1.0',
+    text: 'Test Alert',
+    scheme: 'feedback-green',
+    onClose: vi.fn(),
+    linkHref: 'https://example.com',
+    linkTarget: '_blank',
+    linkText: 'Learn more',
+    type: 'success',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(Alert, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          UnnnicIcon: true,
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    wrapper.unmount();
+    vi.clearAllMocks();
+  });
+
+  test('renders correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('.alert').exists()).toBe(true);
+    expect(wrapper.find('.alert__text').text()).toBe('Test Alert');
+  });
+
+  test('applies correct classes based on scheme and type props', () => {
+    expect(wrapper.find('.alert--scheme-aux-green').exists()).toBe(true);
+
+    wrapper = mount(Alert, {
+      props: { ...defaultProps, scheme: 'feedback-red', type: 'error' },
+      global: { stubs: { UnnnicIcon: true } },
+    });
+    expect(wrapper.find('.alert--scheme-aux-red').exists()).toBe(true);
+  });
+
+  test('renders link when linkHref is provided', () => {
+    const link = wrapper.find('.alert__link');
+    expect(link.exists()).toBe(true);
+    expect(link.attributes('href')).toBe('https://example.com');
+    expect(link.attributes('target')).toBe('_blank');
+    expect(link.text()).toBe('Learn more');
+  });
+
+  test('does not render link when linkHref is not provided', async () => {
+    await wrapper.setProps({ linkHref: '' });
+    expect(wrapper.find('.alert__link').exists()).toBe(false);
+  });
+
+  test('emits close event and calls onClose prop when close button is clicked', async () => {
+    await wrapper.find('.alert__close').trigger('click');
+    expect(wrapper.emitted('close')).toBeTruthy();
+    expect(defaultProps.onClose).toHaveBeenCalled();
+  });
+
+  test('adds slide-down class on progress animation end', async () => {
+    const progressElement = wrapper.find('.alert__progress');
+    await progressElement.trigger('animationend');
+    expect(wrapper.find('.alert-container').classes()).toContain('slide-down');
+  });
+
+  test('emits close event on slide-down animation end', async () => {
+    const alertContainer = wrapper.find('.alert-container');
+    await alertContainer.trigger('animationend', {
+      animationName: 'slideDown',
+    });
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+
+  test('does not emit close event on non-slideDown animation end', async () => {
+    const alertContainer = wrapper.find('.alert-container');
+    await alertContainer.trigger('animationend', {
+      animationName: 'someOtherAnimation',
+    });
+    expect(wrapper.emitted('close')).toBeFalsy();
+  });
+
+  test.each([
+    ['version', '1.1'],
+    ['text', 'New Alert Text'],
+    ['scheme', 'feedback-red'],
+    ['linkHref', 'https://newexample.com'],
+    ['linkTarget', '_self'],
+    ['linkText', 'Click here'],
+    ['type', 'error'],
+  ])('updates %s prop correctly', async (propName, newValue) => {
+    await wrapper.setProps({ [propName]: newValue });
+    expect(wrapper.props(propName)).toBe(newValue);
+  });
+
+  test('renders UnnnicIcon component', () => {
+    expect(wrapper.findComponent(UnnnicIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(UnnnicIcon).props()).toEqual({
+      clickable: false,
+      filled: false,
+      icon: 'close-1',
+      lineHeight: null,
+      next: false,
+      size: 'sm',
+      scheme: 'neutral-white',
+    });
+  });
+
+  test('matches snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

package/src/components/AudioRecorder/AudioRecorder.vue

@@ -165,7 +165,8 @@ export default {
         }
 
         this.audio = new Audio();
-        this.audio.setAttribute('src', this.src);
+        this.audio.src = this.src;
+        this.duration = await this.getBlobDuration(this.src);
 
         this.addAudioEventListeners();
       },
@@ -176,6 +177,34 @@ export default {
   },
 
   methods: {
+    getBlobDuration(blob) {
+      const tempAudioEl = document.createElement('audio');
+
+      const durationPromisse = new Promise((resolve, reject) => {
+        tempAudioEl.addEventListener('loadedmetadata', () => {
+          // Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=642012
+          if (tempAudioEl.duration === Infinity) {
+            tempAudioEl.currentTime = Number.MAX_SAFE_INTEGER;
+            tempAudioEl.ontimeupdate = () => {
+              tempAudioEl.ontimeupdate = null;
+              resolve(tempAudioEl.duration);
+              tempAudioEl.currentTime = 0;
+            };
+          }
+          // Normal behavior
+          else resolve(tempAudioEl.duration);
+        });
+        tempAudioEl.onerror = (event) => reject(event.target.error);
+      });
+
+      tempAudioEl.src =
+        typeof blob === 'string' || blob instanceof String
+          ? blob
+          : window.URL.createObjectURL(blob);
+
+      return durationPromisse;
+    },
+
     // entry point; accessed by external components
     async record() {
       if (this.hasInUseRecordDevice()) return;

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

@@ -0,0 +1,84 @@
+import { mount } from '@vue/test-utils';
+import { describe, test, expect, beforeEach } from 'vitest';
+import AvatarIcon from '@/components/AvatarIcon/AvatarIcon.vue';
+
+describe('AvatarIcon.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(AvatarIcon, {
+      props: {
+        enabled: true,
+        icon: 'graph-stats-1',
+        size: 'sm',
+        scheme: 'aux-blue',
+        filled: false,
+        opacity: true,
+      },
+      global: {
+        stubs: {
+          UnnnicIcon: true,
+        },
+      },
+    });
+  });
+
+  test('renders the component correctly', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  test('applies the correct classes based on props', async () => {
+    expect(wrapper.classes()).toContain('unnnic-avatar-icon');
+    expect(wrapper.classes()).toContain('aux-blue');
+    expect(wrapper.classes()).toContain('sm');
+    expect(wrapper.classes()).not.toContain('disabled');
+    expect(wrapper.classes()).not.toContain('filled');
+    expect(wrapper.classes()).not.toContain('opacity');
+
+    await wrapper.setProps({
+      enabled: false,
+      size: 'lg',
+      filled: true,
+      opacity: false,
+    });
+    expect(wrapper.classes()).toContain('lg');
+    expect(wrapper.classes()).toContain('disabled');
+    expect(wrapper.classes()).toContain('opacity');
+  });
+
+  test('renders UnnnicIcon with correct props', () => {
+    const icon = wrapper.findComponent({ name: 'UnnnicIcon' });
+    expect(icon.exists()).toBe(true);
+    expect(icon.props('icon')).toBe('graph-stats-1');
+    expect(icon.props('scheme')).toBe('aux-blue');
+    expect(icon.props('size')).toBe('md');
+    expect(icon.props('filled')).toBe(false);
+  });
+
+  test('computes iconSize correctly based on size prop', async () => {
+    expect(wrapper.vm.iconSize).toBe('md');
+
+    await wrapper.setProps({ size: 'nano' });
+    expect(wrapper.vm.iconSize).toBe('xs');
+
+    await wrapper.setProps({ size: 'xl' });
+    expect(wrapper.vm.iconSize).toBe('xl');
+  });
+
+  test('renders neutral-cloudy scheme when enabled is false', async () => {
+    await wrapper.setProps({ enabled: false });
+    const icon = wrapper.findComponent({ name: 'UnnnicIcon' });
+    expect(icon.props('scheme')).toBe('neutral-cloudy');
+  });
+
+  test('applies opacity class based on prop', async () => {
+    expect(wrapper.classes()).not.toContain('opacity');
+
+    await wrapper.setProps({ opacity: false });
+    expect(wrapper.classes()).toContain('opacity');
+  });
+
+  test('matches the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AvatarIcon.vue > matches the snapshot 1`] = `
+"<div data-v-5f185a90="" class="unnnic-avatar-icon aux-blue sm">
+  <unnnic-icon-stub data-v-5f185a90="" filled="false" next="false" icon="graph-stats-1" clickable="false" size="md" scheme="aux-blue"></unnnic-icon-stub>
+</div>"
+`;

package/src/components/Breadcrumb/Breadcrumb.vue

@@ -10,6 +10,7 @@
           'unnnic-breadcrumb__container__link__active':
             index === crumbs.length - 1,
         }"
+        :data-test="crumb.name"
         @click="$emit('crumb-click', crumb)"
       >
         {{ crumb.name }}
@@ -17,6 +18,7 @@
 
       <UnnnicIcon
         v-if="index !== crumbs.length - 1"
+        data-test="right-icon"
         icon="arrow-right-1-1"
         size="xs"
         lineHeight="md"
@@ -40,6 +42,8 @@ export default {
       validator: (crumb) => crumb.every((c) => c.name !== null),
     },
   },
+
+  emits: ['crumb-click'],
 };
 </script>
 

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

@@ -0,0 +1,68 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+import Breadcrumb from '../Breadcrumb.vue';
+
+function setup(props) {
+  return mount(Breadcrumb, { props });
+}
+
+describe('Breadcrumb', () => {
+  let wrapper;
+
+  const crumbs = [
+    { name: 'First Page Name', path: '/first-page' },
+    { name: 'Second Page Name', path: '/first-page/second-page' },
+    { name: 'Last Page Name', path: '/first-page/second-page/last-page' },
+  ];
+
+  beforeEach(() => {
+    wrapper = setup({
+      crumbs,
+    });
+  });
+
+  it('renders the right icon the same amount as the breadcrumbs length minus one', () => {
+    const rightIcons = wrapper.findAll('[data-test="right-icon"]');
+
+    expect(rightIcons.length).toBe(crumbs.length - 1);
+  });
+
+  it.each(crumbs)('renders $name breadcrumb', ({ name }) => {
+    const breadcrumb = wrapper.find(`[data-test="${name}"]`);
+
+    expect(breadcrumb.exists()).toBeTruthy();
+    expect(breadcrumb.text()).contains(name);
+  });
+
+  const allCrumbsButLast = crumbs.slice(0, -1);
+  const lastCrumb = crumbs.at(-1);
+
+  it.each(allCrumbsButLast)(
+    '$name has not the "active" class name',
+    ({ name }) => {
+      const breadcrumb = wrapper.find(`[data-test="${name}"]`);
+
+      expect(breadcrumb.wrapperElement.className).not.contains('active');
+    },
+  );
+
+  it(`'${lastCrumb.name}' has the "active" class name`, () => {
+    const breadcrumb = wrapper.find(`[data-test="${lastCrumb.name}"]`);
+
+    expect(breadcrumb.wrapperElement.className).contains('active');
+  });
+
+  describe.each(crumbs)(
+    'when the user clicks on the $name breadcrumb',
+    (crumb) => {
+      it('emits the crumb-click event with the respective crumb object', () => {
+        const breadcrumb = wrapper.find(`[data-test="${crumb.name}"]`);
+
+        breadcrumb.trigger('click');
+
+        expect(wrapper.emitted('crumb-click')).toHaveLength(1);
+        expect(wrapper.emitted('crumb-click')).toContainEqual([crumb]);
+      });
+    },
+  );
+});