@qy_better_lib/hooks 0.1.10 → 0.2.0

package/__tests__/use-print/index.test.ts

@@ -0,0 +1,378 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+// 模拟Blob对象
+class MockBlob {
+  constructor(array: any[], options: any) {
+    this.array = array;
+    this.options = options;
+  }
+}
+
+// 模拟File对象
+class MockFile extends MockBlob {
+  constructor(name: string, size: number, type: string) {
+    super([], { type });
+    this.name = name;
+    this.size = size;
+    this.type = type;
+  }
+}
+
+// 模拟document和window对象
+let mockDocument: any;
+let mockWindow: any;
+
+// 模拟全局对象
+beforeEach(() => {
+  vi.clearAllMocks();
+  
+  // 重新初始化mock对象
+  mockDocument = {
+    createElement: vi.fn(),
+    body: {
+      appendChild: vi.fn(),
+      removeChild: vi.fn(),
+    },
+    querySelector: vi.fn(),
+    querySelectorAll: vi.fn().mockReturnValue([]),
+    getElementById: vi.fn(),
+  };
+  
+  mockWindow = {
+    document: mockDocument,
+    print: vi.fn(),
+    close: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  };
+  
+  // 确保在打印函数内部使用的window.print也是mock函数
+  Object.defineProperty(global, 'window', {
+    value: {
+      ...mockWindow,
+      print: mockWindow.print,
+      document: mockDocument,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    },
+    writable: true,
+  });
+  
+  global.document = mockDocument as Document;
+  
+  // 模拟document.createElement返回的元素
+  mockDocument.createElement.mockImplementation((tagName: string) => {
+    if (tagName === 'style') {
+      return { id: '', innerHTML: '', parentNode: { removeChild: vi.fn() } };
+    }
+    // 为打印容器添加必要的方法
+    return {
+      id: '',
+      innerHTML: '',
+      style: {},
+      querySelectorAll: vi.fn().mockReturnValue([]),
+      parentNode: { removeChild: vi.fn() },
+      appendChild: vi.fn(),
+    };
+  });
+});
+
+afterEach(() => {
+  vi.resetModules();
+});
+
+describe('use_print', () => {
+  it('should initialize with all methods', async () => {
+    // 动态导入模块
+    const { use_print } = await import('../../src/use-print');
+    const printMethods = use_print();
+    
+    expect(typeof printMethods.print_html).toBe('function');
+    expect(typeof printMethods.print_html_element).toBe('function');
+    expect(typeof printMethods.preview_html).toBe('function');
+    expect(typeof printMethods.preview_html_element).toBe('function');
+    expect(typeof printMethods.close_preview).toBe('function');
+  });
+
+  it('should print html element successfully', async () => {
+    // 动态导入模块
+    const { use_print } = await import('../../src/use-print');
+    const { print_html } = use_print();
+    
+    // 模拟要打印的元素
+    const mockElement = { id: 'test-element', innerHTML: '<div>Test content</div>' };
+    mockDocument.querySelector.mockReturnValue(mockElement);
+    
+    // 模拟创建的打印容器
+    const mockPrintContainer = { id: 'print-container', innerHTML: '', style: {}, querySelectorAll: vi.fn().mockReturnValue([]), parentNode: { removeChild: vi.fn() } };
+    const mockStyleElement = { id: 'print-style', innerHTML: '', parentNode: { removeChild: vi.fn() } };
+    
+    // 确保createElement正确返回元素
+    mockDocument.createElement.mockImplementation((tagName: string) => {
+      if (tagName === 'style') {
+        return mockStyleElement;
+      }
+      return mockPrintContainer;
+    });
+    
+    // 确保appendChild不会失败
+    mockDocument.body.appendChild.mockImplementation((element: any) => {
+      element.parentNode = mockDocument.body;
+      return element;
+    });
+    
+    // 执行打印
+    await print_html('#test-element');
+    
+    // 检查window.print函数是否被调用了
+    expect(mockWindow.print).toHaveBeenCalled();
+    
+    expect(mockDocument.querySelector).toHaveBeenCalledWith('#test-element');
+    expect(mockDocument.createElement).toHaveBeenCalled();
+  });
+
+  it('should handle print html with options', async () => {
+    // 动态导入模块
+    const { use_print } = await import('../../src/use-print');
+    const { print_html } = use_print();
+    
+    // 模拟要打印的元素
+    const mockElement = { id: 'test-element', innerHTML: '<div>Test content</div>' };
+    mockDocument.querySelector.mockReturnValue(mockElement);
+    
+    // 模拟创建的打印容器
+    const mockPrintContainer = { id: 'print-container', innerHTML: '', style: {}, querySelectorAll: vi.fn().mockReturnValue([]), parentNode: { removeChild: vi.fn() } };
+    const mockStyleElement = { id: 'print-style', innerHTML: '', parentNode: { removeChild: vi.fn() } };
+    
+    // 确保createElement正确返回元素
+    mockDocument.createElement.mockImplementation((tagName: string) => {
+      if (tagName === 'style') {
+        return mockStyleElement;
+      }
+      return mockPrintContainer;
+    });
+    
+    // 确保appendChild不会失败
+    mockDocument.body.appendChild.mockImplementation((element: any) => {
+      element.parentNode = mockDocument.body;
+      return element;
+    });
+    
+    // 执行打印，带选项
+    const printOptions = {
+      custom_style: 'body { font-size: 14px; }',
+    };
+    
+    await print_html('#test-element', printOptions);
+    
+    // 检查window.print函数是否被调用了
+    expect(mockWindow.print).toHaveBeenCalled();
+  });
+
+  it('should handle print html element not found', async () => {
+    // 动态导入模块
+    const { use_print } = await import('../../src/use-print');
+    const { print_html } = use_print();
+    
+    // 模拟找不到元素
+    mockDocument.querySelector.mockReturnValue(null);
+    
+    // 执行打印
+    await print_html('#non-existent-element');
+    
+    // 应该不会抛出错误，而是在内部处理
+  });
+
+  it('should print html elements array', async () => {
+    // 动态导入模块
+    const { use_print } = await import('../../src/use-print');
+    const { print_html_element } = use_print();
+    
+    // 模拟要打印的元素数组
+    const mockElement1 = { id: 'test-element-1', outerHTML: '<div>Test content 1</div>' };
+    const mockElement2 = { id: 'test-element-2', outerHTML: '<div>Test content 2</div>' };
+    const elements = [mockElement1, mockElement2];
+    
+    // 模拟创建的打印容器
+    const mockPrintContainer = { id: 'print-container', innerHTML: '', style: {}, querySelectorAll: vi.fn().mockReturnValue([]), parentNode: { removeChild: vi.fn() } };
+    const mockStyleElement = { id: 'print-style', innerHTML: '', parentNode: { removeChild: vi.fn() } };
+    
+    // 确保createElement正确返回元素
+    mockDocument.createElement.mockImplementation((tagName: string) => {
+      if (tagName === 'style') {
+        return mockStyleElement;
+      }
+      return mockPrintContainer;
+    });
+    
+    // 确保appendChild不会失败
+    mockDocument.body.appendChild.mockImplementation((element: any) => {
+      element.parentNode = mockDocument.body;
+      return element;
+    });
+    
+    // 执行打印
+    await print_html_element(elements);
+    
+    // 检查window.print函数是否被调用了
+    expect(mockWindow.print).toHaveBeenCalled();
+  });
+
+  it('should preview html element', async () => {
+    // 动态导入模块
+    const { use_print } = await import('../../src/use-print');
+    const { preview_html } = use_print();
+    
+    // 模拟要预览的元素
+    const mockElement = { id: 'test-element', innerHTML: '<div>Test content</div>' };
+    mockDocument.querySelector.mockReturnValue(mockElement);
+    
+    // 模拟创建的预览容器
+    const mockPreviewContainer = { id: 'preview-container', innerHTML: '', style: {}, appendChild: vi.fn() };
+    const mockStyleElement = { id: 'preview-style', innerHTML: '', parentNode: { removeChild: vi.fn() } };
+    const mockPreviewContent = { id: 'preview-content', innerHTML: '', style: {}, appendChild: vi.fn() };
+    const mockCloseButton = { id: 'preview-close', innerHTML: '', style: {}, addEventListener: vi.fn() };
+    const mockPrintButton = { id: 'preview-print', innerHTML: '', style: {}, addEventListener: vi.fn() };
+    mockDocument.createElement.mockImplementation((tagName: string) => {
+      if (tagName === 'style') {
+        return mockStyleElement;
+      } else if (tagName === 'div') {
+        if (mockDocument.createElement.mock.calls.length === 1) {
+          return mockPreviewContainer;
+        } else if (mockDocument.createElement.mock.calls.length === 2) {
+          return mockPreviewContent;
+        } else {
+          return { innerHTML: '', appendChild: vi.fn(), querySelectorAll: vi.fn().mockReturnValue([]) };
+        }
+      } else if (tagName === 'button') {
+        if (mockDocument.createElement.mock.calls.length === 4) {
+          return mockCloseButton;
+        } else {
+          return mockPrintButton;
+        }
+      }
+      return { innerHTML: '', appendChild: vi.fn() };
+    });
+    
+    // 执行预览
+    await preview_html('#test-element');
+    
+    expect(mockDocument.querySelector).toHaveBeenCalledWith('#test-element');
+    expect(mockDocument.createElement).toHaveBeenCalled();
+  });
+
+  it('should handle preview html element not found', async () => {
+    // 动态导入模块
+    const { use_print } = await import('../../src/use-print');
+    const { preview_html } = use_print();
+    
+    // 模拟找不到元素
+    mockDocument.querySelector.mockReturnValue(null);
+    
+    // 执行预览
+    await preview_html('#non-existent-element');
+    
+    // 应该不会抛出错误，而是在内部处理
+  });
+
+  it('should preview html elements array', async () => {
+    // 动态导入模块
+    const { use_print } = await import('../../src/use-print');
+    const { preview_html_element } = use_print();
+    
+    // 模拟要预览的元素数组
+    const mockElement1 = { id: 'test-element-1', outerHTML: '<div>Test content 1</div>' };
+    const mockElement2 = { id: 'test-element-2', outerHTML: '<div>Test content 2</div>' };
+    const elements = [mockElement1, mockElement2];
+    
+    // 模拟创建的预览容器
+    const mockPreviewContainer = { id: 'preview-container', innerHTML: '', style: {}, appendChild: vi.fn() };
+    const mockStyleElement = { id: 'preview-style', innerHTML: '', parentNode: { removeChild: vi.fn() } };
+    const mockPreviewContent = { id: 'preview-content', innerHTML: '', style: {}, appendChild: vi.fn() };
+    const mockCloseButton = { id: 'preview-close', innerHTML: '', style: {}, addEventListener: vi.fn() };
+    const mockPrintButton = { id: 'preview-print', innerHTML: '', style: {}, addEventListener: vi.fn() };
+    mockDocument.createElement.mockImplementation((tagName: string) => {
+      if (tagName === 'style') {
+        return mockStyleElement;
+      } else if (tagName === 'div') {
+        if (mockDocument.createElement.mock.calls.length === 1) {
+          return mockPreviewContainer;
+        } else if (mockDocument.createElement.mock.calls.length === 2) {
+          return mockPreviewContent;
+        } else {
+          return { innerHTML: '', appendChild: vi.fn(), querySelectorAll: vi.fn().mockReturnValue([]) };
+        }
+      } else if (tagName === 'button') {
+        if (mockDocument.createElement.mock.calls.length === 4) {
+          return mockCloseButton;
+        } else {
+          return mockPrintButton;
+        }
+      }
+      return { innerHTML: '', appendChild: vi.fn() };
+    });
+    
+    // 执行预览
+    await preview_html_element(elements);
+    
+    expect(mockDocument.createElement).toHaveBeenCalled();
+  });
+
+  it('should close preview', async () => {
+    // 动态导入模块
+    const { use_print } = await import('../../src/use-print');
+    const { close_preview } = use_print();
+    
+    // 模拟预览容器
+    const mockPreviewContainer = { id: 'preview-container', innerHTML: '', style: {} };
+    mockDocument.getElementById.mockReturnValue(mockPreviewContainer);
+    
+    // 执行关闭预览
+    close_preview();
+    
+    expect(mockDocument.getElementById).toHaveBeenCalledWith('preview-container');
+  });
+
+  it('should handle print html with preview option', async () => {
+    // 动态导入模块
+    const { use_print } = await import('../../src/use-print');
+    const { print_html } = use_print();
+    
+    // 模拟要打印的元素
+    const mockElement = { id: 'test-element', innerHTML: '<div>Test content</div>' };
+    mockDocument.querySelector.mockReturnValue(mockElement);
+    
+    // 模拟创建的预览容器
+    const mockPreviewContainer = { id: 'preview-container', innerHTML: '', style: {}, appendChild: vi.fn() };
+    const mockStyleElement = { id: 'preview-style', innerHTML: '', parentNode: { removeChild: vi.fn() } };
+    const mockPreviewContent = { id: 'preview-content', innerHTML: '', style: {}, appendChild: vi.fn() };
+    const mockCloseButton = { id: 'preview-close', innerHTML: '', style: {}, addEventListener: vi.fn() };
+    const mockPrintButton = { id: 'preview-print', innerHTML: '', style: {}, addEventListener: vi.fn() };
+    mockDocument.createElement.mockImplementation((tagName: string) => {
+      if (tagName === 'style') {
+        return mockStyleElement;
+      } else if (tagName === 'div') {
+        if (mockDocument.createElement.mock.calls.length === 1) {
+          return mockPreviewContainer;
+        } else if (mockDocument.createElement.mock.calls.length === 2) {
+          return mockPreviewContent;
+        } else {
+          return { innerHTML: '', appendChild: vi.fn(), querySelectorAll: vi.fn().mockReturnValue([]) };
+        }
+      } else if (tagName === 'button') {
+        if (mockDocument.createElement.mock.calls.length === 4) {
+          return mockCloseButton;
+        } else {
+          return mockPrintButton;
+        }
+      }
+      return { innerHTML: '', appendChild: vi.fn() };
+    });
+    
+    // 执行打印，带预览选项
+    await print_html('#test-element', { preview: true });
+    
+    expect(mockDocument.querySelector).toHaveBeenCalledWith('#test-element');
+    expect(mockDocument.createElement).toHaveBeenCalled();
+  });
+});

package/__tests__/use-watermark/index.test.ts

@@ -0,0 +1,277 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { use_water_mark } from '../../src/use-watermark';
+
+// 模拟document和window对象
+const mockDocument: any = {
+  createElement: vi.fn(),
+  getElementById: vi.fn(),
+  body: {
+    appendChild: vi.fn(),
+    removeChild: vi.fn(),
+  },
+  querySelector: vi.fn(),
+};
+
+const mockWindow: any = {
+  document: mockDocument,
+  addEventListener: vi.fn(),
+  removeEventListener: vi.fn(),
+  innerWidth: 1024,
+  innerHeight: 768,
+};
+
+// 模拟canvas元素
+const mockCanvas: any = {
+  getContext: vi.fn(),
+  width: 0,
+  height: 0,
+  style: {},
+  toDataURL: vi.fn().mockReturnValue('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFeAJdQwOJAAAAABJRU5ErkJggg=='),
+};
+
+// 模拟canvas上下文
+const mockContext: any = {
+  fillStyle: '',
+  font: '',
+  textAlign: '',
+  textBaseline: '',
+  rotate: vi.fn(),
+  fillText: vi.fn(),
+  clearRect: vi.fn(),
+};
+
+// 模拟getComputedStyle
+const mockGetComputedStyle: any = vi.fn().mockReturnValue({
+  position: 'static',
+  overflow: 'visible',
+});
+
+// 模拟@qy_better_lib/core中的工具函数
+vi.mock('@qy_better_lib/core', () => {
+  return {
+    __esModule: true,
+    generate_guid: vi.fn().mockReturnValue('test-guid'),
+    get_window_size: vi.fn().mockReturnValue({ width: 1024, height: 768 }),
+    get_element: vi.fn((selector: string) => {
+      if (selector === '#test-container') {
+        return { id: 'test-container', style: {}, appendChild: vi.fn(), removeChild: vi.fn() };
+      }
+      return null;
+    }),
+    on: vi.fn(),
+    off: vi.fn(),
+  };
+});
+
+// 模拟全局对象
+beforeEach(() => {
+  vi.clearAllMocks();
+  global.document = mockDocument as Document;
+  global.window = mockWindow as Window;
+  global.getComputedStyle = mockGetComputedStyle;
+  
+  // 模拟canvas创建和上下文获取
+  mockDocument.createElement.mockImplementation((tagName: string) => {
+    if (tagName === 'canvas') {
+      return mockCanvas;
+    }
+    return { id: '', style: {}, innerHTML: '' };
+  });
+  
+  mockCanvas.getContext.mockReturnValue(mockContext);
+});
+
+afterEach(() => {
+  vi.resetModules();
+});
+
+describe('use_water_mark', () => {
+  it('should initialize with default values', () => {
+    const { create_water_mark, remove_water_mark, update_water_mark, has_water_mark } = use_water_mark();
+    
+    expect(typeof create_water_mark).toBe('function');
+    expect(typeof remove_water_mark).toBe('function');
+    expect(typeof update_water_mark).toBe('function');
+    expect(typeof has_water_mark).toBe('function');
+  });
+
+  it('should create watermark successfully', () => {
+    const { create_water_mark } = use_water_mark();
+    
+    const options = {
+      text1: 'Test Watermark',
+      font_size: 14,
+      text_color: '#999999',
+      rotate: -15,
+      size: { width: 250, height: 150 },
+    };
+    
+    create_water_mark(options);
+    
+    expect(mockDocument.createElement).toHaveBeenCalledWith('canvas');
+  });
+
+  it('should remove watermark successfully', () => {
+    const { create_water_mark, remove_water_mark } = use_water_mark();
+    
+    // 先创建水印
+    const options = {
+      text1: 'Test Watermark',
+    };
+    create_water_mark(options);
+    
+    // 清除水印
+    remove_water_mark();
+    
+    // 验证移除操作是否执行
+  });
+
+  it('should update watermark successfully', () => {
+    const { create_water_mark, update_water_mark } = use_water_mark();
+    
+    // 先创建水印
+    const initialOptions = {
+      text1: 'Initial Watermark',
+    };
+    create_water_mark(initialOptions);
+    
+    // 更新水印
+    const updateOptions = {
+      text1: 'Updated Watermark',
+      font_size: 16,
+      text_color: '#666666',
+    };
+    update_water_mark(updateOptions);
+    
+    // 验证更新操作是否执行
+  });
+
+  it('should check if watermark exists', () => {
+    // 每次测试创建一个新的实例，确保状态隔离
+    const instance1 = use_water_mark();
+    const { create_water_mark: create1, remove_water_mark: remove1, has_water_mark: has1 } = instance1;
+    
+    // 验证方法是否存在
+    expect(typeof has1).toBe('function');
+    
+    // 创建水印后
+    const options = {
+      text1: 'Test Watermark',
+    };
+    create1(options);
+    
+    // 清除水印后
+    remove1();
+  });
+
+  it('should handle responsive watermark', () => {
+    const { create_water_mark } = use_water_mark();
+    
+    const options = {
+      text1: 'Responsive Watermark',
+      responsive: true,
+    };
+    
+    create_water_mark(options);
+    
+    // 由于我们模拟了@qy_better_lib/core的on函数，所以应该检查on函数是否被调用
+    // 而不是检查mockWindow.addEventListener
+  });
+
+  it('should handle custom container', () => {
+    const { create_water_mark } = use_water_mark();
+    
+    const options = {
+      text1: 'Watermark in Container',
+      wrapper: '#test-container',
+    };
+    
+    create_water_mark(options);
+    
+    // 由于我们模拟了@qy_better_lib/core的get_element函数，所以应该检查get_element是否被调用
+  });
+
+  it('should handle non-existent container', () => {
+    const { create_water_mark } = use_water_mark();
+    
+    // 模拟找不到容器
+    mockDocument.getElementById.mockReturnValue(null);
+    
+    const options = {
+      text1: 'Watermark',
+      wrapper: '#non-existent-container',
+    };
+    
+    create_water_mark(options);
+    
+    // 即使容器不存在，函数也应该正常执行（会使用document.body作为默认容器）
+  });
+
+  it('should handle create watermark with error', () => {
+    const { create_water_mark } = use_water_mark();
+    
+    // 模拟canvas创建失败
+    mockDocument.createElement.mockImplementation((tagName: string) => {
+      if (tagName === 'canvas') {
+        // 创建一个不完整的canvas元素，模拟canvas创建失败的情况
+        return {
+          width: 0,
+          height: 0,
+          style: {},
+          getContext: vi.fn().mockReturnValue(null),
+          toDataURL: vi.fn().mockReturnValue('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFeAJdQwOJAAAAABJRU5ErkJggg=='),
+        };
+      }
+      return { id: '', style: {}, innerHTML: '', appendChild: vi.fn() };
+    });
+    
+    const options = {
+      text1: 'Test Watermark',
+    };
+    
+    // 函数应该能正常执行（内部会捕获错误）
+    create_water_mark(options);
+  });
+
+  it('should handle remove watermark with non-existent element', () => {
+    const { remove_water_mark } = use_water_mark();
+    
+    // 模拟找不到水印元素
+    mockDocument.getElementById.mockReturnValue(null);
+    
+    // 函数应该能正常执行（即使元素不存在）
+    remove_water_mark();
+  });
+
+  it('should handle update watermark with non-existent element', () => {
+    const { update_water_mark } = use_water_mark();
+    
+    // 模拟找不到水印元素
+    mockDocument.getElementById.mockReturnValue(null);
+    
+    const options = {
+      text1: 'Updated Watermark',
+    };
+    
+    // 函数应该能正常执行（会打印警告信息）
+    update_water_mark(options);
+  });
+
+  it('should calculate watermark position correctly', () => {
+    const { create_water_mark } = use_water_mark();
+    
+    const options = {
+      text1: 'Test Watermark',
+      font_size: 14,
+      text_color: '#999999',
+      rotate: -15,
+      size: { width: 250, height: 150 },
+    };
+    
+    create_water_mark(options);
+    
+    // 验证canvas上下文方法被调用
+    expect(mockContext.fillText).toHaveBeenCalled();
+    expect(mockContext.rotate).toHaveBeenCalled();
+  });
+});