cd-aichat 1.0.0

package/src/components/AiChatWidget.test.js

@@ -0,0 +1,312 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AiChatWidget from './AiChatWidget.vue';
+
+// Mock AiChat 组件
+vi.mock('./AiChat.vue', () => {
+  return {
+    default: {
+      name: 'AiChat',
+      template: '<div class="mock-ai-chat">Mock AiChat</div>',
+      props: ['chatType', 'chatUser', 'currentUserId', 'aiConfig'],
+      emits: ['send', 'aiResponseStart', 'aiResponseComplete']
+    }
+  };
+});
+
+describe('AiChatWidget', () => {
+  const defaultProps = {
+    aiConfig: {
+      url: 'https://api.dify.ai/v1',
+      agentId: 'test-agent'
+    },
+    currentUserId: 'user-001'
+  };
+
+  describe('基础功能', () => {
+    it('应该渲染浮动触发按钮', () => {
+      const wrapper = mount(AiChatWidget, {
+        props: defaultProps
+      });
+      
+      expect(wrapper.find('.ai-chat-trigger').exists()).toBe(true);
+      expect(wrapper.find('.ai-chat-dialog').exists()).toBe(false);
+    });
+    
+    it('应该在点击触发按钮后打开对话框', async () => {
+      const wrapper = mount(AiChatWidget, {
+        props: defaultProps
+      });
+      
+      await wrapper.find('.ai-chat-trigger').trigger('click');
+      
+      expect(wrapper.find('.ai-chat-dialog').exists()).toBe(true);
+      expect(wrapper.emitted('open')).toBeTruthy();
+    });
+    
+    it('应该在点击关闭按钮后关闭对话框', async () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          defaultOpen: true
+        }
+      });
+      
+      await wrapper.find('.close-btn').trigger('click');
+      
+      expect(wrapper.find('.ai-chat-dialog').exists()).toBe(false);
+      expect(wrapper.emitted('close')).toBeTruthy();
+    });
+  });
+  
+  describe('位置配置', () => {
+    it('应该根据 position 属性设置正确的位置', () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          position: 'bottom-right',
+          offset: { x: 20, y: 20 }
+        }
+      });
+      
+      const trigger = wrapper.find('.ai-chat-trigger');
+      const style = trigger.attributes('style');
+      
+      expect(style).toContain('bottom: 20px');
+      expect(style).toContain('right: 20px');
+    });
+    
+    it('应该支持不同的位置选项', () => {
+      const positions = ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
+      
+      positions.forEach(position => {
+        const wrapper = mount(AiChatWidget, {
+          props: {
+            ...defaultProps,
+            position
+          }
+        });
+        
+        // 检查位置样式是否正确设置
+        const trigger = wrapper.find('.ai-chat-trigger');
+        const style = trigger.attributes('style');
+        
+        if (position.includes('bottom')) {
+          expect(style).toContain('bottom:');
+        } else {
+          expect(style).toContain('top:');
+        }
+        
+        if (position.includes('right')) {
+          expect(style).toContain('right:');
+        } else {
+          expect(style).toContain('left:');
+        }
+      });
+    });
+  });
+  
+  describe('窗口控制', () => {
+    it('应该支持最小化功能', async () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          defaultOpen: true
+        }
+      });
+      
+      const minimizeBtn = wrapper.findAll('.header-btn')[0];
+      await minimizeBtn.trigger('click');
+      
+      expect(wrapper.find('.ai-chat-dialog').exists()).toBe(false);
+      expect(wrapper.emitted('minimize')).toBeTruthy();
+    });
+    
+    it('应该支持最大化和还原功能', async () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          defaultOpen: true
+        }
+      });
+      
+      const maximizeBtn = wrapper.findAll('.header-btn')[1];
+      
+      // 最大化
+      await maximizeBtn.trigger('click');
+      expect(wrapper.find('.ai-chat-dialog').classes()).toContain('maximized');
+      expect(wrapper.emitted('maximize')).toBeTruthy();
+      
+      // 还原
+      await maximizeBtn.trigger('click');
+      expect(wrapper.find('.ai-chat-dialog').classes()).not.toContain('maximized');
+      expect(wrapper.emitted('restore')).toBeTruthy();
+    });
+  });
+  
+  describe('徽章功能', () => {
+    it('应该显示未读消息徽章', () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          showBadge: true,
+          badgeCount: 5
+        }
+      });
+      
+      const badge = wrapper.find('.badge');
+      expect(badge.exists()).toBe(true);
+      expect(badge.text()).toBe('5');
+    });
+    
+    it('应该在打开对话框后清除徽章', async () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          showBadge: true,
+          badgeCount: 5
+        }
+      });
+      
+      await wrapper.find('.ai-chat-trigger').trigger('click');
+      
+      // 徽章应该被清零
+      const badge = wrapper.find('.badge');
+      expect(badge.exists()).toBe(false);
+    });
+    
+    it('应该正确显示超过 99 的徽章数', () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          showBadge: true,
+          badgeCount: 150
+        }
+      });
+      
+      const badge = wrapper.find('.badge');
+      expect(badge.text()).toBe('99+');
+    });
+  });
+  
+  describe('遮罩层', () => {
+    it('应该在配置时显示遮罩层', async () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          showMask: true
+        }
+      });
+      
+      await wrapper.find('.ai-chat-trigger').trigger('click');
+      
+      expect(wrapper.find('.ai-chat-mask').exists()).toBe(true);
+    });
+    
+    it('应该在点击遮罩层时关闭对话框', async () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          showMask: true,
+          closeOnMaskClick: true,
+          defaultOpen: true
+        }
+      });
+      
+      await wrapper.find('.ai-chat-mask').trigger('click');
+      
+      expect(wrapper.find('.ai-chat-dialog').exists()).toBe(false);
+      expect(wrapper.emitted('close')).toBeTruthy();
+    });
+    
+    it('应该在配置不关闭时保持对话框打开', async () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          showMask: true,
+          closeOnMaskClick: false,
+          defaultOpen: true
+        }
+      });
+      
+      await wrapper.find('.ai-chat-mask').trigger('click');
+      
+      expect(wrapper.find('.ai-chat-dialog').exists()).toBe(true);
+    });
+  });
+  
+  describe('暴露的方法', () => {
+    it('应该暴露 open 方法', () => {
+      const wrapper = mount(AiChatWidget, {
+        props: defaultProps
+      });
+      
+      wrapper.vm.open();
+      
+      expect(wrapper.find('.ai-chat-dialog').exists()).toBe(true);
+      expect(wrapper.emitted('open')).toBeTruthy();
+    });
+    
+    it('应该暴露 close 方法', () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          defaultOpen: true
+        }
+      });
+      
+      wrapper.vm.close();
+      
+      expect(wrapper.find('.ai-chat-dialog').exists()).toBe(false);
+      expect(wrapper.emitted('close')).toBeTruthy();
+    });
+    
+    it('应该暴露 isOpen 方法', async () => {
+      const wrapper = mount(AiChatWidget, {
+        props: defaultProps
+      });
+      
+      expect(wrapper.vm.isOpen()).toBe(false);
+      
+      await wrapper.find('.ai-chat-trigger').trigger('click');
+      
+      expect(wrapper.vm.isOpen()).toBe(true);
+    });
+  });
+  
+  describe('AI 事件转发', () => {
+    it('应该转发 send 事件', async () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          defaultOpen: true
+        }
+      });
+      
+      const aiChat = wrapper.findComponent({ name: 'AiChat' });
+      const sendData = { message: { content: 'test' } };
+      
+      await aiChat.vm.$emit('send', sendData);
+      
+      expect(wrapper.emitted('send')).toBeTruthy();
+      expect(wrapper.emitted('send')[0][0]).toEqual(sendData);
+    });
+    
+    it('应该转发 aiResponseComplete 事件', async () => {
+      const wrapper = mount(AiChatWidget, {
+        props: {
+          ...defaultProps,
+          defaultOpen: true
+        }
+      });
+      
+      const aiChat = wrapper.findComponent({ name: 'AiChat' });
+      const responseData = { response: 'AI response' };
+      
+      await aiChat.vm.$emit('aiResponseComplete', responseData);
+      
+      expect(wrapper.emitted('aiResponseComplete')).toBeTruthy();
+      expect(wrapper.emitted('aiResponseComplete')[0][0]).toEqual(responseData);
+    });
+  });
+});