@veritree/ui 0.94.2 → 0.95.0

package/test/toast.test.js

@@ -0,0 +1,575 @@
+import { mount } from '@vue/test-utils';
+import VTToast from '@/components/Toast/VTToast.vue';
+import VTToastItem from '@/components/Toast/VTToastItem.vue';
+import VTToastIcon from '@/components/Toast/VTToastIcon.vue';
+import VTToastContent from '@/components/Toast/VTToastContent.vue';
+import VTToastTitle from '@/components/Toast/VTToastTitle.vue';
+import VTToastDescription from '@/components/Toast/VTToastDescription.vue';
+import VTToastAction from '@/components/Toast/VTToastAction.vue';
+import VTToastClose from '@/components/Toast/VTToastClose.vue';
+import VTButton from '@/components/Button/VTButton.vue';
+
+describe('VTToast.vue', () => {
+  let wrapper;
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('renders the component', () => {
+    wrapper = mount(VTToast);
+    expect(VTToast).toBeTruthy();
+  });
+
+  it('has the correct default props', () => {
+    wrapper = mount(VTToast);
+    expect(wrapper.props().position).toBe('top-right');
+    expect(wrapper.props().headless).toBe(false);
+  });
+
+  it('renders a dialog element', () => {
+    wrapper = mount(VTToast);
+    expect(wrapper.find('dialog').exists()).toBe(true);
+  });
+
+  it('displays position classes for top-right', () => {
+    wrapper = mount(VTToast, {
+      propsData: { position: 'top-right' },
+    });
+
+    expect(wrapper.find('dialog').classes()).toEqual(
+      expect.arrayContaining([
+        'fixed',
+        'top-6',
+        'right-10',
+        'bottom-auto',
+        'left-auto',
+        'z-50',
+      ]),
+    );
+  });
+
+  it('displays position classes for top-left', () => {
+    wrapper = mount(VTToast, {
+      propsData: { position: 'top-left' },
+    });
+
+    expect(wrapper.find('dialog').classes()).toEqual(
+      expect.arrayContaining([
+        'fixed',
+        'top-6',
+        'left-10',
+        'bottom-auto',
+        'right-auto',
+        'z-50',
+      ]),
+    );
+  });
+
+  it('displays position classes for bottom-right', () => {
+    wrapper = mount(VTToast, {
+      propsData: { position: 'bottom-right' },
+    });
+
+    expect(wrapper.find('dialog').classes()).toEqual(
+      expect.arrayContaining([
+        'fixed',
+        'bottom-6',
+        'right-10',
+        'top-auto',
+        'left-auto',
+        'z-50',
+      ]),
+    );
+  });
+
+  it('displays position classes for bottom-left', () => {
+    wrapper = mount(VTToast, {
+      propsData: { position: 'bottom-left' },
+    });
+
+    expect(wrapper.find('dialog').classes()).toEqual(
+      expect.arrayContaining([
+        'fixed',
+        'bottom-6',
+        'left-10',
+        'top-auto',
+        'right-auto',
+        'z-50',
+      ]),
+    );
+  });
+
+  it('displays headless class when headless prop is true', () => {
+    wrapper = mount(VTToast, {
+      propsData: { headless: true },
+    });
+
+    expect(wrapper.find('dialog').classes()).toContain('toast');
+  });
+
+  it('provides apiToast method to children', () => {
+    wrapper = mount(VTToast);
+    expect(wrapper.vm._provided.apiToast).toBeDefined();
+    expect(typeof wrapper.vm._provided.apiToast).toBe('function');
+  });
+});
+
+describe('VTToastItem.vue', () => {
+  let wrapper;
+
+  const createWrapper = (propsData = {}, slots = {}) => {
+    return mount(VTToastItem, {
+      propsData,
+      slots,
+      provide: {
+        apiToast: () => ({
+          componentId: 1,
+          registerItem: jest.fn(),
+          unregisterItem: jest.fn(),
+          position: 'top-right',
+        }),
+      },
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('renders the component', () => {
+    wrapper = createWrapper();
+    expect(VTToastItem).toBeTruthy();
+  });
+
+  it('has the correct default props', () => {
+    wrapper = createWrapper();
+    expect(wrapper.props().variant).toBe('default');
+    expect(wrapper.props().dismissable).toBe(true);
+    expect(wrapper.props().duration).toBe(5000);
+    expect(wrapper.props().headless).toBe(false);
+    expect(wrapper.props().as).toBe('div');
+  });
+
+  it('displays the component with default styles', () => {
+    wrapper = createWrapper();
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'grid',
+        'grid-cols-[auto_1fr_auto]',
+        'items-start',
+        'gap-3',
+        'rounded',
+        'border',
+        'border-solid',
+      ]),
+    );
+  });
+
+  it('displays the component with success variant styles', () => {
+    wrapper = createWrapper({ variant: 'success' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'border-success-300',
+        'bg-success-50',
+        'text-success-700',
+      ]),
+    );
+  });
+
+  it('displays the component with error variant styles', () => {
+    wrapper = createWrapper({ variant: 'error' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'border-error-300',
+        'bg-error-50',
+        'text-error-700',
+      ]),
+    );
+  });
+
+  it('displays the component with warning variant styles', () => {
+    wrapper = createWrapper({ variant: 'warning' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining([
+        'border-warning-300',
+        'bg-warning-50',
+        'text-warning-700',
+      ]),
+    );
+  });
+
+  it('displays the component with default variant styles', () => {
+    wrapper = createWrapper({ variant: 'default' });
+
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining(['border-gray-300', 'bg-white', 'text-gray-700']),
+    );
+  });
+
+  it('displays headless class when headless prop is true', () => {
+    wrapper = createWrapper({ headless: true });
+    expect(wrapper.classes()).toContain('toast-item');
+  });
+
+  it('has role="alert" and aria-live="polite"', () => {
+    wrapper = createWrapper();
+    expect(wrapper.attributes('role')).toBe('alert');
+    expect(wrapper.attributes('aria-live')).toBe('polite');
+  });
+
+  it('renders default close button when dismissable is true', () => {
+    wrapper = createWrapper({ dismissable: true });
+    expect(wrapper.findComponent(VTToastClose).exists()).toBe(true);
+  });
+
+  it('does not render close button when dismissable is false', () => {
+    wrapper = createWrapper({ dismissable: false });
+    expect(wrapper.findComponent(VTToastClose).exists()).toBe(false);
+  });
+
+  it('auto-dismisses after duration', (done) => {
+    wrapper = createWrapper({ duration: 100 });
+
+    expect(wrapper.vm.visible).toBe(true);
+
+    setTimeout(() => {
+      expect(wrapper.vm.visible).toBe(false);
+      expect(wrapper.emitted('close')).toBeTruthy();
+      done();
+    }, 150);
+  });
+
+  it('pauses timer on mouseenter', () => {
+    wrapper = createWrapper({ duration: 5000 });
+
+    expect(wrapper.vm.timer).not.toBeNull();
+
+    wrapper.trigger('mouseenter');
+
+    expect(wrapper.vm.timer).toBeNull();
+  });
+
+  it('resumes timer on mouseleave', (done) => {
+    wrapper = createWrapper({ duration: 100 });
+
+    wrapper.trigger('mouseenter');
+    expect(wrapper.vm.timer).toBeNull();
+
+    wrapper.trigger('mouseleave');
+    expect(wrapper.vm.timer).not.toBeNull();
+
+    setTimeout(() => {
+      expect(wrapper.vm.visible).toBe(false);
+      done();
+    }, 150);
+  });
+
+  it('provides apiToastItem method to children', () => {
+    wrapper = createWrapper();
+    expect(wrapper.vm._provided.apiToastItem).toBeDefined();
+    expect(typeof wrapper.vm._provided.apiToastItem).toBe('function');
+
+    const api = wrapper.vm._provided.apiToastItem();
+    expect(api.componentId).toBeDefined();
+    expect(api.variant).toBe('default');
+    expect(typeof api.close).toBe('function');
+  });
+});
+
+describe('VTToastIcon.vue', () => {
+  let wrapper;
+
+  const createWrapper = (propsData = {}, variant = 'default') => {
+    return mount(VTToastIcon, {
+      propsData,
+      provide: {
+        apiToastItem: () => ({
+          componentId: 1,
+          variant,
+        }),
+      },
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('renders the component', () => {
+    wrapper = createWrapper();
+    expect(VTToastIcon).toBeTruthy();
+  });
+
+  it('displays default icon classes', () => {
+    wrapper = createWrapper();
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining(['flex', 'h-5', 'w-5', 'shrink-0']),
+    );
+  });
+
+  it('displays headless class when headless prop is true', () => {
+    wrapper = createWrapper({ headless: true });
+    expect(wrapper.classes()).toContain('toast-icon');
+  });
+});
+
+describe('VTToastContent.vue', () => {
+  let wrapper;
+
+  const createWrapper = (propsData = {}) => {
+    return mount(VTToastContent, {
+      propsData,
+      provide: {
+        apiToastItem: () => ({
+          componentId: 1,
+        }),
+      },
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('renders the component', () => {
+    wrapper = createWrapper();
+    expect(VTToastContent).toBeTruthy();
+  });
+
+  it('displays default flex column classes', () => {
+    wrapper = createWrapper();
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining(['flex', 'flex-col', 'gap-1']),
+    );
+  });
+
+  it('displays headless class when headless prop is true', () => {
+    wrapper = createWrapper({ headless: true });
+    expect(wrapper.classes()).toContain('toast-content');
+  });
+});
+
+describe('VTToastTitle.vue', () => {
+  let wrapper;
+
+  const createWrapper = (propsData = {}) => {
+    return mount(VTToastTitle, {
+      propsData,
+      provide: {
+        apiToastItem: () => ({
+          componentId: 1,
+        }),
+      },
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('renders the component', () => {
+    wrapper = createWrapper();
+    expect(VTToastTitle).toBeTruthy();
+  });
+
+  it('displays default title classes', () => {
+    wrapper = createWrapper();
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining(['text-sm', 'font-semibold']),
+    );
+  });
+
+  it('displays headless class when headless prop is true', () => {
+    wrapper = createWrapper({ headless: true });
+    expect(wrapper.classes()).toContain('toast-title');
+  });
+
+  it('has correct id attribute', () => {
+    wrapper = createWrapper();
+    expect(wrapper.attributes('id')).toBe('toast-title-1');
+  });
+});
+
+describe('VTToastDescription.vue', () => {
+  let wrapper;
+
+  const createWrapper = (propsData = {}) => {
+    return mount(VTToastDescription, {
+      propsData,
+      provide: {
+        apiToastItem: () => ({
+          componentId: 1,
+        }),
+      },
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('renders the component', () => {
+    wrapper = createWrapper();
+    expect(VTToastDescription).toBeTruthy();
+  });
+
+  it('displays default description classes', () => {
+    wrapper = createWrapper();
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining(['text-sm', 'opacity-90']),
+    );
+  });
+
+  it('displays headless class when headless prop is true', () => {
+    wrapper = createWrapper({ headless: true });
+    expect(wrapper.classes()).toContain('toast-description');
+  });
+
+  it('has correct id attribute', () => {
+    wrapper = createWrapper();
+    expect(wrapper.attributes('id')).toBe('toast-description-1');
+  });
+});
+
+describe('VTToastAction.vue', () => {
+  let wrapper;
+
+  const createWrapper = (propsData = {}) => {
+    return mount(VTToastAction, {
+      propsData,
+      provide: {
+        apiToastItem: () => ({
+          componentId: 1,
+        }),
+      },
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('renders the component', () => {
+    wrapper = createWrapper();
+    expect(VTToastAction).toBeTruthy();
+  });
+
+  it('displays default action classes', () => {
+    wrapper = createWrapper();
+    expect(wrapper.classes()).toEqual(
+      expect.arrayContaining(['flex', 'flex-col', 'gap-2']),
+    );
+  });
+
+  it('displays headless class when headless prop is true', () => {
+    wrapper = createWrapper({ headless: true });
+    expect(wrapper.classes()).toContain('toast-action');
+  });
+});
+
+describe('VTToastClose.vue', () => {
+  let wrapper;
+  const mockClose = jest.fn();
+
+  const createWrapper = (propsData = {}) => {
+    return mount(VTToastClose, {
+      propsData,
+      provide: {
+        apiToastItem: () => ({
+          componentId: 1,
+          close: mockClose,
+        }),
+      },
+      stubs: {
+        VTButton,
+      },
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+    mockClose.mockClear();
+  });
+
+  it('renders the component', () => {
+    wrapper = createWrapper();
+    expect(VTToastClose).toBeTruthy();
+  });
+
+  it('calls close method when clicked', async () => {
+    wrapper = createWrapper();
+
+    await wrapper.find('button').trigger('click');
+
+    expect(mockClose).toHaveBeenCalled();
+    expect(wrapper.emitted('click')).toBeTruthy();
+  });
+
+  it('has correct id attribute', () => {
+    wrapper = createWrapper();
+    expect(wrapper.find('button').attributes('id')).toBe('toast-close-1');
+  });
+});
+
+describe('Toast Component Composition', () => {
+  let wrapper;
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  it('renders complete toast with all child components', () => {
+    wrapper = mount(VTToast, {
+      slots: {
+        default: `
+          <VTToastItem variant="success">
+            <VTToastIcon />
+            <VTToastContent>
+              <VTToastTitle>Success!</VTToastTitle>
+              <VTToastDescription>Operation completed</VTToastDescription>
+            </VTToastContent>
+            <VTToastClose />
+          </VTToastItem>
+        `,
+      },
+      stubs: {
+        VTToastItem,
+        VTToastIcon,
+        VTToastContent,
+        VTToastTitle,
+        VTToastDescription,
+        VTToastClose,
+      },
+    });
+
+    expect(wrapper.findComponent(VTToastItem).exists()).toBe(true);
+    expect(wrapper.findComponent(VTToastIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(VTToastContent).exists()).toBe(true);
+    expect(wrapper.findComponent(VTToastTitle).exists()).toBe(true);
+    expect(wrapper.findComponent(VTToastDescription).exists()).toBe(true);
+    expect(wrapper.findComponent(VTToastClose).exists()).toBe(true);
+  });
+});