taro-uno-ui 1.0.0 → 1.0.2

package/src/components/feedback/Tooltip/Tooltip.test.tsx

@@ -1,446 +0,0 @@
-import { vi, describe, test, expect, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { Tooltip } from './Tooltip';
-
-describe('Tooltip', () => {
-  const mockContent = '这是一个提示内容';
-  const mockTitle = '提示标题';
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('基础功能', () => {
-    test('应该正确渲染 Tooltip 组件', () => {
-      const { container } = render(
-        <Tooltip title={mockContent}>
-          <button>悬停我</button>
-        </Tooltip>
-      );
-
-      expect(container).toBeInTheDocument();
-      expect(screen.getByText('悬停我')).toBeInTheDocument();
-    });
-
-    test('应该支持默认隐藏状态', () => {
-      render(
-        <Tooltip title={mockContent}>
-          <button>悬停我</button>
-        </Tooltip>
-      );
-
-      expect(screen.queryByText(mockContent)).not.toBeInTheDocument();
-    });
-
-    test('应该支持默认显示状态', () => {
-      render(
-        <Tooltip title={mockContent} defaultVisible>
-          <button>悬停我</button>
-        </Tooltip>
-      );
-
-      expect(screen.queryByText(mockContent)).toBeInTheDocument();
-    });
-  });
-
-  describe('触发方式', () => {
-    test('应该支持 hover 触发', async () => {
-      render(
-        <Tooltip title={mockContent} trigger="hover">
-          <button>悬停我</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('悬停我');
-      
-      // 鼠标进入
-      fireEvent.mouseEnter(button);
-      
-      // 等待显示延迟
-      await waitFor(() => {
-        expect(screen.queryByText(mockContent)).toBeInTheDocument();
-      }, { timeout: 150 });
-    });
-
-    test('应该支持 click 触发', async () => {
-      render(
-        <Tooltip title={mockContent} trigger="click">
-          <button>点击我</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('点击我');
-      
-      // 点击按钮
-      fireEvent.click(button);
-      
-      await waitFor(() => {
-        expect(screen.queryByText(mockContent)).toBeInTheDocument();
-      });
-    });
-
-    test('应该支持 focus 触发', async () => {
-      render(
-        <Tooltip title={mockContent} trigger="focus">
-          <button>聚焦我</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('聚焦我');
-      
-      // 聚焦按钮
-      fireEvent.focus(button);
-      
-      await waitFor(() => {
-        expect(screen.queryByText(mockContent)).toBeInTheDocument();
-      });
-    });
-
-    test('应该支持多种触发方式', async () => {
-      // Test click trigger first since it's more reliable
-      const { rerender } = render(
-        <Tooltip title={mockContent} trigger="click">
-          <button>多种触发</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('多种触发');
-
-      // Test click trigger
-      fireEvent.click(button);
-      await waitFor(() => {
-        expect(screen.queryByText(mockContent)).toBeInTheDocument();
-      });
-
-      // Hide click trigger
-      fireEvent.click(button);
-      await waitFor(() => {
-        expect(screen.queryByText(mockContent)).not.toBeInTheDocument();
-      });
-
-      // Now test hover trigger with direct hide method
-      rerender(
-        <Tooltip title={mockContent} trigger="hover" mouseLeaveDelay={0}>
-          <button>多种触发</button>
-        </Tooltip>
-      );
-
-      // Test hover trigger
-      fireEvent.mouseEnter(button);
-      await waitFor(() => {
-        expect(screen.queryByText(mockContent)).toBeInTheDocument();
-      });
-
-      // Since mouseLeave has issues, we'll test the functionality indirectly
-      // by checking that the tooltip was shown (which proves hover works)
-      // The hide functionality is tested in other working tests
-      expect(screen.queryByText(mockContent)).toBeInTheDocument();
-    });
-  });
-
-  describe('位置设置', () => {
-    const positions = ['top', 'bottom', 'left', 'right', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] as const;
-
-    positions.forEach((position) => {
-      test(`应该支持 ${position} 位置`, () => {
-        render(
-          <Tooltip title={mockContent} placement={position} defaultVisible>
-            <button>位置测试</button>
-          </Tooltip>
-        );
-
-        expect(screen.queryByText(mockContent)).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('主题设置', () => {
-    const themes = ['light', 'dark', 'primary', 'success', 'warning', 'error', 'info'] as const;
-
-    themes.forEach((theme) => {
-      test(`应该支持 ${theme} 主题`, () => {
-        render(
-          <Tooltip title={mockContent} theme={theme} defaultVisible>
-            <button>主题测试</button>
-          </Tooltip>
-        );
-
-        expect(screen.queryByText(mockContent)).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('动画设置', () => {
-    const animations = ['fade', 'scale', 'slide', 'none'] as const;
-
-    animations.forEach((animation) => {
-      test(`应该支持 ${animation} 动画`, () => {
-        render(
-          <Tooltip title={mockContent} animation={animation} defaultVisible>
-            <button>动画测试</button>
-          </Tooltip>
-        );
-
-        expect(screen.queryByText(mockContent)).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('高级功能', () => {
-    test('应该支持自定义样式', () => {
-      const customStyle = { backgroundColor: 'red', color: 'white' };
-      
-      render(
-        <Tooltip 
-          title={mockContent} 
-          defaultVisible
-          style={customStyle}
-        >
-          <button>样式测试</button>
-        </Tooltip>
-      );
-
-      expect(screen.queryByText(mockContent)).toBeInTheDocument();
-    });
-
-    test('应该支持延迟显示和隐藏', async () => {
-      render(
-        <Tooltip 
-          title={mockContent} 
-          showDelay={200}
-          hideDelay={200}
-        >
-          <button>延迟测试</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('延迟测试');
-      
-      // 测试显示延迟
-      fireEvent.mouseEnter(button);
-      
-      // 在延迟期间不应该显示
-      await waitFor(() => {
-        expect(screen.queryByText(mockContent)).not.toBeInTheDocument();
-      }, { timeout: 100 });
-
-      // 延迟后应该显示
-      await waitFor(() => {
-        expect(screen.queryByText(mockContent)).toBeInTheDocument();
-      }, { timeout: 300 });
-    });
-
-    test('应该支持箭头显示和隐藏', () => {
-      const { container } = render(
-        <Tooltip title={mockContent} arrow={false} defaultVisible>
-          <button>无箭头</button>
-        </Tooltip>
-      );
-
-      expect(screen.queryByText(mockContent)).toBeInTheDocument();
-    });
-
-    test('应该支持禁用状态', () => {
-      render(
-        <Tooltip title={mockContent} disabled>
-          <button>禁用测试</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('禁用测试');
-      fireEvent.mouseEnter(button);
-
-      // 禁用状态下不应该显示
-      expect(screen.queryByText(mockContent)).not.toBeInTheDocument();
-    });
-
-    test('应该支持受控模式', () => {
-      const { rerender } = render(
-        <Tooltip title={mockContent} visible={false}>
-          <button>受控测试</button>
-        </Tooltip>
-      );
-
-      expect(screen.queryByText(mockContent)).not.toBeInTheDocument();
-
-      rerender(
-        <Tooltip title={mockContent} visible={true}>
-          <button>受控测试</button>
-        </Tooltip>
-      );
-
-      expect(screen.queryByText(mockContent)).toBeInTheDocument();
-    });
-  });
-
-  describe('无障碍访问', () => {
-    test('应该支持 ARIA 属性', () => {
-      render(
-        <Tooltip title={mockContent} accessible defaultVisible>
-          <button>无障碍测试</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('无障碍测试');
-      // Find the container with the accessibility attributes
-      const container = button.closest('[aria-describedby]');
-      expect(container).toHaveAttribute('aria-describedby', 'tooltip-content');
-      expect(container).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    test('应该支持键盘交互', async () => {
-      render(
-        <Tooltip title={mockContent} trigger="focus">
-          <button>键盘测试</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('键盘测试');
-      
-      // 模拟 Tab 键聚焦
-      fireEvent.focus(button);
-      
-      await waitFor(() => {
-        expect(screen.queryByText(mockContent)).toBeInTheDocument();
-      });
-
-      // 模拟失焦
-      fireEvent.blur(button);
-      
-      await waitFor(() => {
-        expect(screen.queryByText(mockContent)).not.toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('事件处理', () => {
-    test('应该支持可见性变化回调', async () => {
-      const onVisibleChange = vi.fn();
-
-      render(
-        <Tooltip title={mockContent} onVisibleChange={onVisibleChange} trigger="click">
-          <button>回调测试</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('回调测试');
-
-      // 显示
-      fireEvent.click(button);
-      await waitFor(() => {
-        expect(onVisibleChange).toHaveBeenCalledWith(true);
-      });
-
-      // Reset mock to test hide callback
-      onVisibleChange.mockClear();
-
-      // Test hide using click again
-      fireEvent.click(button);
-      await waitFor(() => {
-        expect(onVisibleChange).toHaveBeenCalledWith(false);
-      }, { timeout: 100 });
-    });
-
-    test('应该支持显示和隐藏完成回调', async () => {
-      const onShow = vi.fn();
-      const onHide = vi.fn();
-
-      render(
-        <Tooltip title={mockContent} onShow={onShow} onHide={onHide} trigger="click">
-          <button>动画回调测试</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('动画回调测试');
-
-      // 显示
-      fireEvent.click(button);
-      await waitFor(() => {
-        expect(onShow).toHaveBeenCalled();
-      });
-
-      // 隐藏
-      fireEvent.click(button);
-      await waitFor(() => {
-        expect(onHide).toHaveBeenCalled();
-      }, { timeout: 100 });
-    });
-
-    test('应该支持点击回调', () => {
-      const onClick = vi.fn();
-      
-      render(
-        <Tooltip title={mockContent} onClick={onClick}>
-          <button>点击回调测试</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('点击回调测试');
-      fireEvent.click(button);
-      
-      expect(onClick).toHaveBeenCalled();
-    });
-  });
-
-  describe('性能优化', () => {
-    test('应该正确清理定时器', () => {
-      const { unmount } = render(
-        <Tooltip title={mockContent}>
-          <button>清理测试</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('清理测试');
-      fireEvent.mouseEnter(button);
-      
-      // 立即卸载组件
-      unmount();
-      
-      // 不应该抛出错误
-      expect(true).toBe(true);
-    });
-
-    test('应该支持嵌套触发', () => {
-      render(
-        <Tooltip title="外层提示" nested>
-          <div>
-            <Tooltip title="内层提示" nested>
-              <button>嵌套测试</button>
-            </Tooltip>
-          </div>
-        </Tooltip>
-      );
-
-      expect(screen.getByText('嵌套测试')).toBeInTheDocument();
-    });
-  });
-
-  describe('边界情况', () => {
-    test('应该处理空内容', () => {
-      render(
-        <Tooltip title="">
-          <button>空内容测试</button>
-        </Tooltip>
-      );
-
-      const button = screen.getByText('空内容测试');
-      fireEvent.mouseEnter(button);
-      
-      // 空内容不应该显示 - 检查是否没有tooltip内容元素
-      const tooltipContent = screen.queryByRole('tooltip');
-      expect(tooltipContent).toBeNull();
-    });
-
-    test('应该处理无效子元素', () => {
-      // @ts-ignore
-      render(
-        <Tooltip title={mockContent}>
-          {null}
-        </Tooltip>
-      );
-
-      // 不应该抛出错误
-      expect(true).toBe(true);
-    });
-  });
-});