@weni/unnnic-system 3.5.2 → 3.5.3-alpha.0

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

@@ -0,0 +1,284 @@
+import { shallowMount } from '@vue/test-utils';
+import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
+import Toast from '../Toast.vue';
+
+describe('UnnnicToast', () => {
+  let wrapper;
+  let mockAction;
+
+  beforeEach(() => {
+    mockAction = vi.fn();
+    vi.useFakeTimers();
+
+    wrapper = shallowMount(Toast, {
+      props: {
+        title: 'Test Toast',
+      },
+      global: {
+        stubs: {
+          Transition: {
+            template: '<div data-testid="toast-transition"><slot /></div>',
+          },
+        },
+      },
+    });
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  const transition = () =>
+    wrapper.findComponent('[data-testid="toast-transition"]');
+  const toast = () => wrapper.find('[data-testid="toast"]');
+  const content = () => wrapper.find('[data-testid="toast-content"]');
+  const header = () => wrapper.find('[data-testid="toast-header"]');
+  const title = () => wrapper.find('[data-testid="toast-title"]');
+  const text = () => wrapper.find('[data-testid="toast-text"]');
+  const actionButton = () =>
+    wrapper.findComponent('[data-testid="toast-action-button"]');
+  const closeIcon = () =>
+    wrapper.findComponent('[data-testid="toast-close-icon"]');
+  const typeIcon = () =>
+    wrapper.findComponent('[data-testid="toast-type-icon"]');
+
+  describe('Rendering', () => {
+    test('renders correctly with required props', () => {
+      expect(transition().exists()).toBe(true);
+      expect(header().exists()).toBe(true);
+
+      expect(typeIcon().exists()).toBe(true);
+      expect(typeIcon().props('icon')).toBe('info');
+      expect(typeIcon().props('scheme')).toBe('blue-500');
+      expect(typeIcon().props('size')).toBe('ant');
+
+      expect(title().exists()).toBe(true);
+      expect(title().text()).toBe('Test Toast');
+
+      expect(text().exists()).toBe(false);
+
+      expect(toast().exists()).toBe(true);
+      expect(content().exists()).toBe(true);
+      expect(actionButton().exists()).toBe(false);
+
+      expect(closeIcon().exists()).toBe(true);
+      expect(closeIcon().props('icon')).toBe('close');
+      expect(closeIcon().props('scheme')).toBe('neutral-dark');
+      expect(closeIcon().props('size')).toBe('ant');
+      expect(closeIcon().props('clickable')).toBe(true);
+    });
+
+    test('renders description when provided', async () => {
+      await wrapper.setProps({ description: 'Test description' });
+
+      expect(text().exists()).toBe(true);
+      expect(text().text()).toBe('Test description');
+    });
+
+    test('applies correct CSS class based on type', async () => {
+      const types = ['informational', 'attention', 'success', 'error'];
+
+      for (const type of types) {
+        await wrapper.setProps({ type });
+
+        expect(toast().classes()).toContain(`unnnic-toast--${type}`);
+      }
+    });
+
+    test('sets correct ARIA attributes for different types', async () => {
+      // Error type
+      await wrapper.setProps({ type: 'error' });
+      expect(toast().attributes('role')).toBe('alert');
+      expect(toast().attributes('aria-live')).toBe('assertive');
+
+      // Other types
+      await wrapper.setProps({ type: 'informational' });
+      expect(toast().attributes('role')).toBe('status');
+      expect(toast().attributes('aria-live')).toBe('polite');
+    });
+  });
+
+  describe('Icon Configuration', () => {
+    test('displays correct icon for each type', async () => {
+      const typeConfigs = [
+        { type: 'informational', expectedIcon: 'info' },
+        { type: 'attention', expectedIcon: 'error' },
+        { type: 'success', expectedIcon: 'check_circle' },
+        { type: 'error', expectedIcon: 'cancel' },
+      ];
+
+      for (const { type, expectedIcon } of typeConfigs) {
+        await wrapper.setProps({ type });
+        const icon = typeIcon();
+        expect(icon.props('icon')).toBe(expectedIcon);
+      }
+    });
+
+    test('displays correct scheme color for each type', async () => {
+      const typeConfigs = [
+        { type: 'informational', expectedScheme: 'blue-500' },
+        { type: 'attention', expectedScheme: 'yellow-500' },
+        { type: 'success', expectedScheme: 'green-500' },
+        { type: 'error', expectedScheme: 'red-500' },
+      ];
+
+      for (const { type, expectedScheme } of typeConfigs) {
+        await wrapper.setProps({ type });
+        const icon = typeIcon();
+        expect(icon.props('scheme')).toBe(expectedScheme);
+      }
+    });
+  });
+
+  describe('Close Functionality', () => {
+    test('emits close event when close button is clicked', async () => {
+      const closeButton = closeIcon();
+      await closeButton.trigger('click');
+
+      expect(wrapper.emitted('close')).toBeTruthy();
+      expect(wrapper.emitted('close')).toHaveLength(1);
+
+      expect(wrapper.vm.isVisible).toBe(false);
+    });
+
+    test('emits close event when close button is activated with Enter key', async () => {
+      const closeButton = closeIcon();
+      await closeButton.trigger('keydown.enter');
+
+      expect(wrapper.emitted('close')).toBeTruthy();
+      expect(wrapper.emitted('close')).toHaveLength(1);
+
+      expect(wrapper.vm.isVisible).toBe(false);
+    });
+
+    test('hides toast when close is triggered', async () => {
+      expect(toast().exists()).toBe(true);
+
+      await wrapper.vm.handleClose();
+      await wrapper.vm.$nextTick();
+
+      expect(toast().exists()).toBe(false);
+    });
+  });
+
+  describe('Action Button', () => {
+    test('renders action button when provided', async () => {
+      await wrapper.setProps({
+        button: {
+          text: 'Action',
+          action: mockAction,
+        },
+      });
+
+      expect(actionButton().exists()).toBe(true);
+      expect(actionButton().props('text')).toBe('Action');
+    });
+
+    test('does not render action button when not provided', async () => {
+      expect(actionButton().exists()).toBe(false);
+    });
+
+    test('calls action function when action button is clicked', async () => {
+      await wrapper.setProps({
+        button: {
+          text: 'Action',
+          action: mockAction,
+        },
+      });
+
+      await actionButton().trigger('click');
+
+      expect(mockAction).toHaveBeenCalledTimes(1);
+    });
+
+    test('calls action function when action button is activated with Enter key', async () => {
+      await wrapper.setProps({
+        button: {
+          text: 'Action',
+          action: mockAction,
+        },
+      });
+
+      await actionButton().trigger('keydown.enter');
+
+      expect(mockAction).toHaveBeenCalledTimes(1);
+    });
+
+    test('does not throw error when action button has no action function', async () => {
+      await wrapper.setProps({
+        button: {
+          text: 'Action',
+          action: undefined,
+        },
+      });
+
+      expect(async () => {
+        await actionButton().trigger('click');
+      }).not.toThrow();
+    });
+  });
+
+  describe('Timeout Functionality', () => {
+    const createTimeoutWrapper = (timeout = 1000) => {
+      return shallowMount(Toast, {
+        props: { title: 'Test Toast', timeout },
+      });
+    };
+
+    test('auto-closes after timeout period', async () => {
+      wrapper = createTimeoutWrapper();
+      vi.advanceTimersByTime(1000);
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('close')).toBeTruthy();
+    });
+
+    test('does not auto-close when timeout is 0', async () => {
+      wrapper = createTimeoutWrapper(0);
+      vi.advanceTimersByTime(5000);
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('close')).toBeFalsy();
+    });
+
+    test('does not auto-close when timeout is negative', async () => {
+      wrapper = createTimeoutWrapper(-1);
+      vi.advanceTimersByTime(5000);
+
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted('close')).toBeFalsy();
+    });
+
+    test('clears timeout when component is unmounted', () => {
+      const clearTimeoutSpy = vi.spyOn(window, 'clearTimeout');
+      wrapper = createTimeoutWrapper();
+
+      wrapper.unmount();
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Transitions', () => {
+    test('emits destroy event after leave transition', async () => {
+      await wrapper.vm.handleClose();
+      await wrapper.vm.$nextTick();
+
+      await transition().vm.$emit('after-leave');
+
+      expect(wrapper.emitted('destroy')).toBeTruthy();
+    });
+  });
+
+  describe('Default Props', () => {
+    test('uses correct default values', () => {
+      expect(wrapper.props('description')).toBe('');
+      expect(wrapper.props('button')).toBeUndefined();
+      expect(wrapper.props('timeout')).toBe(5000);
+      expect(wrapper.props('type')).toBe('informational');
+    });
+  });
+});

package/src/components/Toast/__tests__/ToastManager.spec.js

@@ -0,0 +1,294 @@
+import { beforeEach, describe, expect, afterEach, test, vi } from 'vitest';
+
+vi.mock('vue', () => ({
+  createApp: vi.fn(() => ({
+    mount: vi.fn(),
+    unmount: vi.fn(),
+  })),
+}));
+
+vi.mock('../Toast.vue', () => ({
+  default: {
+    name: 'Toast',
+    template: '<div data-testid="toast">Mock Toast</div>',
+  },
+}));
+
+import toastManager, { toast } from '../ToastManager';
+import Toast from '../Toast.vue';
+
+describe('ToastManager', () => {
+  let mockCreateApp;
+  let mockMount;
+  let mockUnmount;
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+
+    document.body.innerHTML = '';
+
+    const { createApp } = await import('vue');
+    mockCreateApp = createApp;
+    mockMount = vi.fn();
+    mockUnmount = vi.fn();
+
+    mockCreateApp.mockReturnValue({
+      mount: mockMount,
+      unmount: mockUnmount,
+    });
+
+    Object.defineProperty(globalThis, 'document', {
+      value: {
+        ...document,
+        createElement: vi.fn((tagName) => {
+          const element = {
+            tagName: tagName.toUpperCase(),
+            setAttribute: vi.fn(),
+            appendChild: vi.fn(),
+            remove: vi.fn(),
+            children: [],
+            parentNode: null,
+          };
+
+          if (tagName === 'div') {
+            element.appendChild = vi.fn((child) => {
+              child.parentNode = element;
+              element.children.push(child);
+            });
+          }
+
+          return element;
+        }),
+        body: {
+          ...document.body,
+          appendChild: vi.fn(),
+        },
+      },
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    if (toastManager.toasts) {
+      toastManager.toasts.clear();
+    }
+
+    document.body.innerHTML = '';
+
+    vi.clearAllMocks();
+  });
+
+  describe('Container Management', () => {
+    test('creates container on first toast', () => {
+      const createElementSpy = vi.spyOn(document, 'createElement');
+      const appendChildSpy = vi.spyOn(document.body, 'appendChild');
+
+      toastManager.show({ title: 'Test Toast' });
+
+      expect(createElementSpy).toHaveBeenCalledWith('div');
+      expect(appendChildSpy).toHaveBeenCalled();
+    });
+
+    test('reuses existing container', () => {
+      const createElementSpy = vi.spyOn(document, 'createElement');
+
+      toastManager.show({ title: 'First Toast' });
+      const firstCallCount = createElementSpy.mock.calls.length;
+
+      toastManager.show({ title: 'Second Toast' });
+      const secondCallCount = createElementSpy.mock.calls.length;
+
+      // First toast: container div + wrapper div = 2 calls
+      // Second toast: only wrapper div = 1 more call
+      // Total: 3 calls (1 container + 2 wrappers)
+      expect(secondCallCount).toBe(firstCallCount + 1);
+
+      expect(createElementSpy).toHaveBeenCalledWith('div');
+    });
+  });
+
+  describe('Toast Instance Management', () => {
+    test('generates unique IDs for toasts', () => {
+      const toast1 = toastManager.show({ title: 'First Toast' });
+      const toast2 = toastManager.show({ title: 'Second Toast' });
+
+      expect(toast1.id).not.toBe(toast2.id);
+      expect(toast1.id).toMatch(/^toast-\d+$/);
+      expect(toast2.id).toMatch(/^toast-\d+$/);
+    });
+
+    test('stores toast instances in map', () => {
+      const toast1 = toastManager.show({ title: 'First Toast' });
+      const toast2 = toastManager.show({ title: 'Second Toast' });
+
+      expect(toastManager.toasts.has(toast1.id)).toBe(true);
+      expect(toastManager.toasts.has(toast2.id)).toBe(true);
+      expect(toastManager.toasts.size).toBe(2);
+    });
+
+    test('creates toast with correct props', () => {
+      const props = {
+        title: 'Test Toast',
+        description: 'Test Description',
+        type: 'success',
+        timeout: 3000,
+      };
+
+      toastManager.show(props);
+
+      expect(mockCreateApp).toHaveBeenCalledWith(
+        Toast,
+        expect.objectContaining({
+          title: 'Test Toast',
+          description: 'Test Description',
+          type: 'success',
+          timeout: 3000,
+          onClose: expect.any(Function),
+          onDestroy: expect.any(Function),
+        }),
+      );
+    });
+
+    test('mounts toast app to wrapper element', () => {
+      toastManager.show({ title: 'Test Toast' });
+
+      expect(mockMount).toHaveBeenCalled();
+    });
+  });
+
+  describe('Toast Close Functionality', () => {
+    test('removes toast from map when closed', () => {
+      const toastInstance = toastManager.show({ title: 'Test Toast' });
+
+      expect(toastManager.toasts.has(toastInstance.id)).toBe(true);
+
+      toastManager.close(toastInstance.id);
+
+      expect(toastManager.toasts.has(toastInstance.id)).toBe(false);
+    });
+
+    test('handles closing non-existent toast gracefully', () => {
+      expect(() => {
+        toastManager.close('non-existent-id');
+      }).not.toThrow();
+    });
+
+    test('calls close when onClose is triggered', () => {
+      const closeSpy = vi.spyOn(toastManager, 'close');
+
+      toastManager.show({ title: 'Test Toast' });
+
+      const createAppCall = mockCreateApp.mock.calls[0];
+      const props = createAppCall[1];
+      const onCloseCallback = props.onClose;
+
+      onCloseCallback();
+
+      expect(closeSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Toast Destroy Functionality', () => {
+    test('unmounts app and removes wrapper on destroy', () => {
+      toastManager.show({ title: 'Test Toast' });
+
+      const createAppCall = mockCreateApp.mock.calls[0];
+      const props = createAppCall[1];
+      const onDestroyCallback = props.onDestroy;
+
+      onDestroyCallback();
+
+      expect(mockUnmount).toHaveBeenCalled();
+    });
+
+    test('resolves promise when toast is destroyed', async () => {
+      const toastInstance = toastManager.show({ title: 'Test Toast' });
+
+      const createAppCall = mockCreateApp.mock.calls[0];
+      const props = createAppCall[1];
+      const onDestroyCallback = props.onDestroy;
+
+      const promiseResolved = vi.fn();
+      toastInstance.promise.then(promiseResolved);
+
+      onDestroyCallback();
+
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(promiseResolved).toHaveBeenCalled();
+    });
+  });
+
+  describe('Toast API', () => {
+    beforeEach(() => {
+      vi.spyOn(toastManager, 'show').mockReturnValue({
+        id: 'mock-id',
+        props: {},
+        close: vi.fn(),
+        promise: Promise.resolve(),
+      });
+    });
+
+    test('toast.info creates informational toast', () => {
+      toast.info('Info Title', 'Info Description', { timeout: 1000 });
+
+      expect(toastManager.show).toHaveBeenCalledWith({
+        title: 'Info Title',
+        description: 'Info Description',
+        timeout: 1000,
+        type: 'informational',
+      });
+    });
+
+    test('toast.success creates success toast', () => {
+      toast.success('Success Title', 'Success Description');
+
+      expect(toastManager.show).toHaveBeenCalledWith({
+        title: 'Success Title',
+        description: 'Success Description',
+        type: 'success',
+      });
+    });
+
+    test('toast.attention creates attention toast', () => {
+      toast.attention('Attention Title');
+
+      expect(toastManager.show).toHaveBeenCalledWith({
+        title: 'Attention Title',
+        type: 'attention',
+      });
+    });
+
+    test('toast.error creates error toast', () => {
+      toast.error('Error Title', 'Error Description', {
+        button: { text: 'Retry', action: vi.fn() },
+      });
+
+      expect(toastManager.show).toHaveBeenCalledWith({
+        title: 'Error Title',
+        description: 'Error Description',
+        button: { text: 'Retry', action: expect.any(Function) },
+        type: 'error',
+      });
+    });
+
+    test('toast methods return promises', async () => {
+      const infoPromise = toast.info('Test');
+      const successPromise = toast.success('Test');
+      const attentionPromise = toast.attention('Test');
+      const errorPromise = toast.error('Test');
+
+      expect(infoPromise).toBeInstanceOf(Promise);
+      expect(successPromise).toBeInstanceOf(Promise);
+      expect(attentionPromise).toBeInstanceOf(Promise);
+      expect(errorPromise).toBeInstanceOf(Promise);
+
+      await Promise.all([
+        infoPromise,
+        successPromise,
+        attentionPromise,
+        errorPromise,
+      ]);
+    });
+  });
+});

package/src/components/Toast/types.ts

@@ -0,0 +1,57 @@
+export interface ToastManager {
+  show: (props: ToastProps) => ToastInstance;
+  close: (id: string) => void;
+}
+
+export interface ToastButton {
+  text: string;
+  action: () => void;
+}
+
+export type ToastType = 'informational' | 'attention' | 'success' | 'error';
+
+export interface ToastProps extends ToastOptions {
+  title: string;
+  description?: string;
+}
+
+export interface ToastOptions {
+  type?: ToastType;
+  button?: ToastButton;
+  timeout?: number;
+}
+
+export interface ToastEmits {
+  close: [];
+  destroy: [];
+}
+
+export interface ToastInstance {
+  id: string;
+  props: ToastProps;
+  close: () => void;
+  promise: Promise<void>;
+}
+
+export interface ToastCall {
+  info: (
+    title: string,
+    description?: string,
+    options?: ToastOptions,
+  ) => Promise<void>;
+  success: (
+    title: string,
+    description?: string,
+    options?: ToastOptions,
+  ) => Promise<void>;
+  attention: (
+    title: string,
+    description?: string,
+    options?: ToastOptions,
+  ) => Promise<void>;
+  error: (
+    title: string,
+    description?: string,
+    options?: ToastOptions,
+  ) => Promise<void>;
+}

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

@@ -33,12 +33,20 @@ const commonTests = async (wrapper) => {
 };
 
 describe('Icon', () => {
-  it('should accept valid lineHeight props', () => {
-    const validValues = ['sm', 'md', 'lg', null];
+  describe('Custom Icons', () => {
+    let wrapper;
 
-    validValues.forEach((value) => {
-      const wrapper = createWrapper({ lineHeight: value });
-      expect(wrapper.exists()).toBe(true);
+    beforeEach(() => {
+      wrapper = createWrapper({ icon: 'checkbox-default' });
+    });
+
+    it('should render the icon from Custom Icons', () => {
+      const hasCustomIcon = wrapper.find('[data-testid="custom-icon"]');
+      expect(hasCustomIcon.exists()).toBe(true);
+    });
+
+    it('should emit click event when the icon is clicked if clickable prop its true', async () => {
+      await handlerIconClickTest(wrapper);
     });
   });
 
@@ -50,7 +58,7 @@ describe('Icon', () => {
     });
 
     it('should render the icon from OldIconsMap', () => {
-      const hasOldIcon = wrapper.find('[data-testid="old-map-icons"]');
+      const hasOldIcon = wrapper.find('[data-testid="material-icon"]');
       expect(hasOldIcon.exists()).toBe(true);
     });