@ray-js/lamp-bead-strip 1.1.1-beta-1 → 1.1.1-beta-2

package/lib/components/index.rjs.test.js

@@ -0,0 +1,372 @@
+/**
+ * @fileoverview index.rjs 测试用例 - 测试 Render 类的功能
+ */
+
+/// <reference types="jest" />
+
+// Mock dependencies
+jest.mock('./utils', () => ({
+  topList: [0, 2.81, 2.29, 1.76, 1.2, 0.63, 0.06, -0.52, -1.12, -1.72, -2.1, -2.04, -1.58, -0.96, -0.37, 0.2, 0.78, 1.34, 1.9, 2.45]
+}));
+jest.mock('./mode/index', () => ({
+  1: jest.fn(() => ({
+    colorList: [['rgb(255, 0, 0)', 'rgb(0, 255, 0)'], ['rgb(0, 255, 0)', 'rgb(0, 0, 255)']],
+    length: 2
+  }))
+}));
+
+// Mock getCanvasById
+global.getCanvasById = jest.fn(() => {
+  const mockCanvas = {
+    width: 570,
+    height: 48,
+    clientWidth: 570,
+    clientHeight: 48,
+    getContext: jest.fn(type => {
+      if (type === '2d') {
+        return {
+          canvas: mockCanvas,
+          scale: jest.fn(),
+          clearRect: jest.fn(),
+          beginPath: jest.fn(),
+          arc: jest.fn(),
+          fill: jest.fn(),
+          fillStyle: '',
+          globalCompositeOperation: 'source-over'
+        };
+      }
+      return null;
+    })
+  };
+  return Promise.resolve(mockCanvas);
+});
+
+// Import after mocks
+const RenderClass = require('./index.rjs').default;
+describe('index.rjs Render Class', () => {
+  let renderInstance;
+  let mockComponent;
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+
+    // Mock component instance
+    mockComponent = {
+      data: {
+        prop: {}
+      }
+    };
+
+    // Create Render instance
+    renderInstance = new RenderClass(mockComponent);
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+    if (renderInstance && renderInstance.timer) {
+      clearInterval(renderInstance.timer);
+    }
+  });
+  describe('renderLight', () => {
+    test('应该在没有 canvasId 时返回并打印日志', async () => {
+      const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
+      await renderInstance.renderLight({});
+      expect(consoleSpy).toHaveBeenCalledWith('canvasId 是必传项！');
+      consoleSpy.mockRestore();
+    });
+    test('应该初始化 canvas context', async () => {
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
+        mode: 1,
+        ready: true,
+        speed: 50,
+        contentValue: {}
+      });
+      expect(global.getCanvasById).toHaveBeenCalledWith('ray-lamp-bead-strip-canvasId-test-123');
+      expect(renderInstance.ctx).toBeDefined();
+      expect(renderInstance.ctx.scale).toHaveBeenCalledWith(1, 1);
+    });
+    test('应该处理自定义动画列表', async () => {
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        customAnimationList: [['rgb(255, 0, 0)', 'rgb(0, 255, 0)'], ['rgb(0, 255, 0)', 'rgb(0, 0, 255)']],
+        customAnimationChangeTime: 200,
+        ready: true
+      });
+      expect(renderInstance.preCustom).toBeDefined();
+      expect(renderInstance.timer).toBeDefined();
+    });
+    test('应该调用 errorCheck 并处理错误情况', async () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: [],
+        mode: 1,
+        contentValue: {}
+      });
+      expect(consoleErrorSpy).toHaveBeenCalledWith('未传入颜色列表！');
+      consoleErrorSpy.mockRestore();
+    });
+    test('应该验证颜色格式', async () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['invalid-color'],
+        mode: 1,
+        contentValue: {}
+      });
+      expect(consoleErrorSpy).toHaveBeenCalledWith('颜色必须是rgb！');
+      consoleErrorSpy.mockRestore();
+    });
+    test('应该验证 speed 范围', async () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)'],
+        mode: 1,
+        speed: 150,
+        // 超出范围
+        contentValue: {}
+      });
+      expect(consoleErrorSpy).toHaveBeenCalledWith('错误的speed值，其范围为1～100！');
+      consoleErrorSpy.mockRestore();
+    });
+  });
+  describe('startLight', () => {
+    test('应该在 init 为 true 时重置 offset', async () => {
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
+        mode: 1,
+        ready: true,
+        speed: 50,
+        contentValue: {}
+      });
+      renderInstance.offset = 5;
+      renderInstance.startLight(true);
+
+      // startLight 中，如果 init 为 true，offset 会被重置为 0
+      // 然后 draw() 会被调用，将 offset 变为 1
+      // 所以最终 offset 应该是 1
+      expect(renderInstance.offset).toBe(1);
+    });
+    test('应该启动定时器', async () => {
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
+        mode: 1,
+        ready: true,
+        speed: 50,
+        contentValue: {}
+      });
+      // Clear previous timer
+      await renderInstance.stopLight();
+      const setIntervalSpy = jest.spyOn(global, 'setInterval');
+      renderInstance.startLight(false);
+      expect(renderInstance.timer).toBeDefined();
+      expect(setIntervalSpy).toHaveBeenCalled();
+      setIntervalSpy.mockRestore();
+    });
+    test('应该在 ready 为 false 时不启动定时器', async () => {
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
+        mode: 1,
+        ready: false,
+        speed: 50,
+        contentValue: {}
+      });
+      renderInstance.startLight(false);
+      expect(renderInstance.timer).toBeNull();
+    });
+  });
+  describe('stopLight', () => {
+    test('应该清除定时器', async () => {
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
+        mode: 1,
+        ready: true,
+        speed: 50,
+        contentValue: {}
+      });
+      renderInstance.startLight(false);
+      expect(renderInstance.timer).toBeDefined();
+      await renderInstance.stopLight();
+      expect(renderInstance.timer).toBeNull();
+    });
+    test('应该在定时器不存在时不报错', async () => {
+      await expect(renderInstance.stopLight()).resolves.not.toThrow();
+    });
+  });
+  describe('draw', () => {
+    test('应该调用 drawPoint 并更新 offset', async () => {
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
+        mode: 1,
+        ready: true,
+        speed: 50,
+        contentValue: {}
+      });
+      renderInstance.offset = 0;
+      renderInstance.draw();
+      expect(renderInstance.ctx.beginPath).toHaveBeenCalled();
+      expect(renderInstance.offset).toBe(1);
+    });
+    test('应该在 offset 达到 length 时重置为 0', async () => {
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
+        mode: 1,
+        ready: true,
+        speed: 50,
+        contentValue: {}
+      });
+      renderInstance.offset = 1; // length is 2
+      renderInstance.draw();
+      expect(renderInstance.offset).toBe(0);
+    });
+  });
+  describe('drawPoint', () => {
+    test('应该在 colorList 为空时返回', async () => {
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
+        mode: 1,
+        ready: true,
+        speed: 50,
+        contentValue: {}
+      });
+      // Clear previous calls
+      renderInstance.ctx.clearRect.mockClear();
+      renderInstance.drawPoint(null);
+      expect(renderInstance.ctx.clearRect).not.toHaveBeenCalled();
+    });
+    test('应该绘制所有颜色点', async () => {
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
+        mode: 1,
+        ready: true,
+        speed: 50,
+        contentValue: {}
+      });
+      // Clear previous calls from renderLight
+      renderInstance.ctx.beginPath.mockClear();
+      renderInstance.ctx.arc.mockClear();
+      renderInstance.ctx.fill.mockClear();
+      renderInstance.ctx.clearRect.mockClear();
+      renderInstance.drawPoint(['rgb(255, 0, 0)', 'rgb(0, 255, 0)']);
+      expect(renderInstance.ctx.clearRect).toHaveBeenCalled();
+      expect(renderInstance.ctx.beginPath).toHaveBeenCalledTimes(2);
+      expect(renderInstance.ctx.arc).toHaveBeenCalledTimes(2);
+      expect(renderInstance.ctx.fill).toHaveBeenCalledTimes(2);
+    });
+  });
+  describe('checkCustomAnimation', () => {
+    test('应该处理自定义动画', async () => {
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        customAnimationList: [['rgb(255, 0, 0)', 'rgb(0, 255, 0)'], ['rgb(0, 255, 0)', 'rgb(0, 0, 255)']],
+        customAnimationChangeTime: 200,
+        ready: true
+      });
+      expect(renderInstance.preCustom).toBeDefined();
+      expect(renderInstance.timer).toBeDefined();
+    });
+    test('应该在内容相同时不重置 offset', async () => {
+      const props = {
+        canvasId: 'test-123',
+        customAnimationList: [['rgb(255, 0, 0)', 'rgb(0, 255, 0)']],
+        customAnimationChangeTime: 200,
+        ready: true
+      };
+      await renderInstance.renderLight(props);
+      const oldOffset = renderInstance.offset;
+
+      // 再次调用相同的内容
+      await renderInstance.renderLight(props);
+
+      // offset 不应该被重置（因为内容相同）
+      expect(renderInstance.offset).toBe(oldOffset);
+    });
+  });
+  describe('drawCustom', () => {
+    test('应该绘制自定义动画并更新 offset', async () => {
+      const props = {
+        canvasId: 'test-123',
+        customAnimationList: [['rgb(255, 0, 0)', 'rgb(0, 255, 0)'], ['rgb(0, 255, 0)', 'rgb(0, 0, 255)']],
+        customAnimationChangeTime: 200,
+        ready: true
+      };
+      await renderInstance.renderLight(props);
+      renderInstance.offset = 0;
+      renderInstance.drawCustom(props.customAnimationList);
+      expect(renderInstance.ctx.beginPath).toHaveBeenCalled();
+      expect(renderInstance.offset).toBe(1);
+    });
+    test('应该在 offset 达到数组长度时重置为 0', async () => {
+      const props = {
+        canvasId: 'test-123',
+        customAnimationList: [['rgb(255, 0, 0)']],
+        customAnimationChangeTime: 200,
+        ready: true
+      };
+      await renderInstance.renderLight(props);
+      renderInstance.offset = 0;
+      renderInstance.drawCustom(props.customAnimationList);
+      expect(renderInstance.offset).toBe(0); // 重置为 0
+    });
+  });
+  describe('errorCheck', () => {
+    test('应该检查 mode 是否存在', async () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)'],
+        mode: 999,
+        // 不存在的 mode
+        contentValue: {}
+      });
+      expect(consoleErrorSpy).toHaveBeenCalledWith('错误的动画mode类型！');
+      consoleErrorSpy.mockRestore();
+    });
+    test('应该检查 colors 数组是否为空', async () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: [],
+        mode: 1,
+        contentValue: {}
+      });
+      expect(consoleErrorSpy).toHaveBeenCalledWith('未传入颜色列表！');
+      consoleErrorSpy.mockRestore();
+    });
+    test('应该检查颜色格式', async () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['#ff0000'],
+        // 不是 rgb 格式
+        mode: 1,
+        contentValue: {}
+      });
+      expect(consoleErrorSpy).toHaveBeenCalledWith('颜色必须是rgb！');
+      consoleErrorSpy.mockRestore();
+    });
+    test('应该检查 speed 范围', async () => {
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+      await renderInstance.renderLight({
+        canvasId: 'test-123',
+        colors: ['rgb(255, 0, 0)'],
+        mode: 1,
+        speed: 0,
+        // 小于 1
+        contentValue: {}
+      });
+      expect(consoleErrorSpy).toHaveBeenCalledWith('错误的speed值，其范围为1～100！');
+      consoleErrorSpy.mockRestore();
+    });
+  });
+});

package/lib/components/mode/mode.test.js

@@ -0,0 +1,550 @@
+/**
+ * @fileoverview mode 模块测试用例
+ */
+
+import modeOption from './index';
+import mode1 from './mode1';
+import mode2 from './mode2';
+import mode3 from './mode3';
+import mode4 from './mode4';
+import mode5 from './mode5';
+import mode6 from './mode6';
+import mode7 from './mode7';
+import mode8 from './mode8';
+import mode9 from './mode9';
+import mode10 from './mode10';
+import mode11 from './mode11';
+import mode12 from './mode12';
+import mode13 from './mode13';
+import mode14 from './mode14';
+import mode15 from './mode15';
+import mode16 from './mode16';
+describe('mode 模块测试', () => {
+  const defaultColors = ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'];
+  const defaultCloseRgb = 'rgb(58,58,58)';
+  test('应该导出所有模式', () => {
+    expect(modeOption).toBeDefined();
+    expect(modeOption[1]).toBeDefined();
+    expect(modeOption[2]).toBeDefined();
+    expect(modeOption[16]).toBeDefined();
+  });
+  test('mode1 应该是一个函数', () => {
+    expect(typeof mode1).toBe('function');
+  });
+  describe('mode1 - 渐变模式', () => {
+    test('应该生成渐变颜色列表', () => {
+      const result = mode1(['rgb(255, 0, 0)', 'rgb(0, 255, 0)'], {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(Array.isArray(result.colorList)).toBe(true);
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('segmented 为 false 时应该返回正确的结构', () => {
+      const result = mode1(['rgb(255, 0, 0)', 'rgb(0, 255, 0)'], {
+        segmented: 0
+      }, defaultCloseRgb);
+      expect(result.colorList).toBeDefined();
+      expect(result.length).toBeGreaterThan(0);
+      if (result.colorList.length > 0) {
+        expect(Array.isArray(result.colorList[0])).toBe(true);
+      }
+    });
+    test('segmented 为 true 时应该返回分段结构', () => {
+      const result = mode1(['rgb(255, 0, 0)', 'rgb(0, 255, 0)'], {
+        segmented: 1
+      }, defaultCloseRgb);
+      expect(result.colorList).toBeDefined();
+      expect(result.length).toBeGreaterThan(0);
+      if (result.colorList.length > 0) {
+        expect(Array.isArray(result.colorList[0])).toBe(true);
+        expect(result.colorList[0].length).toBe(20);
+      }
+    });
+  });
+  describe('mode2 - 跳变模式', () => {
+    test('segmented 为 false 时应该返回正确的结构', () => {
+      const result = mode2(defaultColors, {
+        segmented: 0
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('segmented 为 true 时应该返回分段结构', () => {
+      const result = mode2(defaultColors, {
+        segmented: 1
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+    test('应该处理不同长度的颜色数组', () => {
+      const testCases = [{
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)']
+      }, {
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)']
+      }, {
+        colors: Array(4).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(5).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(6).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(7).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(8).fill('rgb(255, 0, 0)')
+      }];
+      testCases.forEach(_ref => {
+        let {
+          colors
+        } = _ref;
+        const result = mode2(colors, {
+          segmented: 1
+        }, defaultCloseRgb);
+        expect(result).toHaveProperty('colorList');
+        expect(result).toHaveProperty('length');
+      });
+    });
+  });
+  describe('mode3 - 呼吸模式', () => {
+    test('segmented 为 false 时应该返回正确的结构', () => {
+      const result = mode3(defaultColors, {
+        segmented: 0
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('segmented 为 true 时应该返回分段结构', () => {
+      const result = mode3(defaultColors, {
+        segmented: 1
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      if (result.colorList.length > 0) {
+        expect(result.colorList[0].length).toBe(20);
+      }
+    });
+  });
+  describe('mode4 - 闪烁模式', () => {
+    test('segmented 为 false 时应该返回正确的结构', () => {
+      const result = mode4(defaultColors, {
+        segmented: 0
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('segmented 为 true 时应该返回分段结构', () => {
+      const result = mode4(defaultColors, {
+        segmented: 1
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+    test('应该处理不同长度的颜色数组', () => {
+      const result = mode4(['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'], {
+        segmented: 1
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+  });
+  describe('mode5 - 流星模式', () => {
+    test('expand 为 undefined 时应该返回流星效果', () => {
+      const result = mode5(defaultColors, {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('expand 为 1 时应该返回流星雨效果', () => {
+      const result = mode5(defaultColors, {
+        expand: 1
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+    test('expand 为 2 时应该返回幻彩流星效果', () => {
+      const result = mode5(['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'], {
+        expand: 2
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+    test('应该处理 direction 参数', () => {
+      const result1 = mode5(defaultColors, {
+        direction: 0
+      }, defaultCloseRgb);
+      const result2 = mode5(defaultColors, {
+        direction: 1
+      }, defaultCloseRgb);
+      expect(result1).toHaveProperty('colorList');
+      expect(result2).toHaveProperty('colorList');
+      // direction 应该影响列表顺序
+      if (result1.colorList.length > 0 && result2.colorList.length > 0) {
+        expect(result1.colorList[0]).not.toEqual(result2.colorList[0]);
+      }
+    });
+  });
+  describe('mode8 - 追光模式', () => {
+    test('应该返回正确的结构', () => {
+      const result = mode8(defaultColors, {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('direction 参数应该影响列表顺序', () => {
+      const colors = ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'];
+      const result1 = mode8(colors, {
+        direction: 0
+      }, defaultCloseRgb);
+      const result2 = mode8(colors, {
+        direction: 1
+      }, defaultCloseRgb);
+      expect(result1).toHaveProperty('colorList');
+      expect(result2).toHaveProperty('colorList');
+      // direction 应该影响列表顺序，检查最后一个元素
+      if (result1.colorList.length > 1 && result2.colorList.length > 1) {
+        const last1 = result1.colorList[result1.colorList.length - 1];
+        const last2 = result2.colorList[result2.colorList.length - 1];
+        // 如果 direction 不同，最后一个元素应该不同（除非是循环的）
+        expect(Array.isArray(last1)).toBe(true);
+        expect(Array.isArray(last2)).toBe(true);
+      }
+    });
+  });
+  describe('mode6 - 堆积模式', () => {
+    test('segmented 为 false 时应该返回正确的结构', () => {
+      const result = mode6(defaultColors, {
+        segmented: 0
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('segmented 为 true 时应该返回分段结构', () => {
+      const result = mode6(defaultColors, {
+        segmented: 1
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+    test('应该处理 direction 参数', () => {
+      const result1 = mode6(defaultColors, {
+        direction: 0
+      }, defaultCloseRgb);
+      const result2 = mode6(defaultColors, {
+        direction: 1
+      }, defaultCloseRgb);
+      expect(result1).toHaveProperty('colorList');
+      expect(result2).toHaveProperty('colorList');
+    });
+  });
+  describe('mode7 - 飘落模式', () => {
+    test('segmented 为 false 时应该返回正确的结构', () => {
+      const result = mode7(defaultColors, {
+        segmented: 0
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('segmented 为 true 时应该返回分段结构', () => {
+      const result = mode7(defaultColors, {
+        segmented: 1
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+    test('应该处理 direction 参数', () => {
+      const result1 = mode7(defaultColors, {
+        direction: 0
+      }, defaultCloseRgb);
+      const result2 = mode7(defaultColors, {
+        direction: 1
+      }, defaultCloseRgb);
+      expect(result1).toHaveProperty('colorList');
+      expect(result2).toHaveProperty('colorList');
+    });
+    test('应该处理长度为5的颜色数组', () => {
+      const colors = Array(5).fill('rgb(255, 0, 0)');
+      const result = mode7(colors, {
+        segmented: 1
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+  });
+  describe('mode9 - 飘动模式', () => {
+    test('应该返回正确的结构', () => {
+      const result = mode9(defaultColors, {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('应该处理 direction 参数', () => {
+      const result1 = mode9(defaultColors, {
+        direction: 0
+      }, defaultCloseRgb);
+      const result2 = mode9(defaultColors, {
+        direction: 1
+      }, defaultCloseRgb);
+      expect(result1).toHaveProperty('colorList');
+      expect(result2).toHaveProperty('colorList');
+    });
+  });
+  describe('mode10 - 流水模式', () => {
+    test('应该返回正确的结构', () => {
+      const result = mode10(defaultColors, {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('应该处理不同长度的颜色数组', () => {
+      const testCases = [{
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)']
+      }, {
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)']
+      }, {
+        colors: Array(4).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(5).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(6).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(7).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(8).fill('rgb(255, 0, 0)')
+      }];
+      testCases.forEach(_ref2 => {
+        let {
+          colors
+        } = _ref2;
+        const result = mode10(colors, {}, defaultCloseRgb);
+        expect(result).toHaveProperty('colorList');
+        expect(result).toHaveProperty('length');
+      });
+    });
+    test('应该处理 direction 参数', () => {
+      const result1 = mode10(defaultColors, {
+        direction: 0
+      }, defaultCloseRgb);
+      const result2 = mode10(defaultColors, {
+        direction: 1
+      }, defaultCloseRgb);
+      expect(result1).toHaveProperty('colorList');
+      expect(result2).toHaveProperty('colorList');
+    });
+  });
+  describe('mode11 - 彩虹模式', () => {
+    test('应该返回正确的结构', () => {
+      const result = mode11(defaultColors, {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('应该处理不同长度的颜色数组', () => {
+      const testCases = [{
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)']
+      }, {
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)']
+      }, {
+        colors: Array(4).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(5).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(6).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(7).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(8).fill('rgb(255, 0, 0)')
+      }];
+      testCases.forEach(_ref3 => {
+        let {
+          colors
+        } = _ref3;
+        const result = mode11(colors, {}, defaultCloseRgb);
+        expect(result).toHaveProperty('colorList');
+        expect(result).toHaveProperty('length');
+      });
+    });
+    test('应该处理 direction 参数', () => {
+      const result1 = mode11(defaultColors, {
+        direction: 0
+      }, defaultCloseRgb);
+      const result2 = mode11(defaultColors, {
+        direction: 1
+      }, defaultCloseRgb);
+      expect(result1).toHaveProperty('colorList');
+      expect(result2).toHaveProperty('colorList');
+    });
+  });
+  describe('mode12 - 闪现模式', () => {
+    test('segmented 为 false 时应该返回正确的结构', () => {
+      const result = mode12(defaultColors, {
+        segmented: 0
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('segmented 为 true 时应该返回分段结构', () => {
+      const result = mode12(defaultColors, {
+        segmented: 1
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+    test('应该处理不同长度的颜色数组', () => {
+      const testCases = [{
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)']
+      }, {
+        colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)']
+      }, {
+        colors: Array(4).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(5).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(6).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(7).fill('rgb(255, 0, 0)')
+      }, {
+        colors: Array(8).fill('rgb(255, 0, 0)')
+      }];
+      testCases.forEach(_ref4 => {
+        let {
+          colors
+        } = _ref4;
+        const result1 = mode12(colors, {
+          segmented: 0
+        }, defaultCloseRgb);
+        const result2 = mode12(colors, {
+          segmented: 1
+        }, defaultCloseRgb);
+        expect(result1).toHaveProperty('colorList');
+        expect(result2).toHaveProperty('colorList');
+      });
+    });
+  });
+  describe('mode13 - 反弹模式', () => {
+    test('expand 为 undefined 时应该返回正确的结构', () => {
+      const result = mode13(defaultColors, {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('expand 为 1 时应该返回渐变效果', () => {
+      const result = mode13(defaultColors, {
+        expand: 1
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+    test('应该处理奇数长度的颜色数组', () => {
+      const result = mode13(['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'], {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+  });
+  describe('mode14 - 穿梭模式', () => {
+    test('应该返回正确的结构', () => {
+      const result = mode14(defaultColors, {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('应该处理多个颜色', () => {
+      const result = mode14(['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'], {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+  });
+  describe('mode15 - 乱闪模式', () => {
+    test('应该返回正确的结构', () => {
+      const result = mode15(defaultColors, {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('应该处理多个颜色', () => {
+      const result = mode15(['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'], {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+  });
+  describe('mode16 - 开合模式', () => {
+    test('expand 为 undefined 时应该返回正确的结构', () => {
+      const result = mode16(defaultColors, {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+      expect(result.length).toBeGreaterThan(0);
+    });
+    test('expand 为 1 时应该返回扩展效果', () => {
+      const result = mode16(defaultColors, {
+        expand: 1
+      }, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+    test('应该处理多个颜色', () => {
+      const result = mode16(['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'], {}, defaultCloseRgb);
+      expect(result).toHaveProperty('colorList');
+      expect(result).toHaveProperty('length');
+    });
+  });
+  describe('modeOption 导出测试', () => {
+    test('应该包含所有16种模式', () => {
+      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].forEach(mode => {
+        expect(modeOption[mode]).toBeDefined();
+        expect(typeof modeOption[mode]).toBe('function');
+      });
+    });
+    test('每个模式函数应该接受三个参数并返回正确结构', () => {
+      const colors = ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'];
+      const contentValue = {};
+      // 测试所有模式
+      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].forEach(mode => {
+        const result = modeOption[mode](colors, contentValue, 'rgb(58,58,58)');
+        expect(result).toHaveProperty('colorList');
+        expect(result).toHaveProperty('length');
+        expect(Array.isArray(result.colorList)).toBe(true);
+        expect(typeof result.length).toBe('number');
+        expect(result.length).toBeGreaterThan(0);
+      });
+    });
+    test('应该处理不同参数组合', () => {
+      const colors = ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'];
+
+      // 测试不同 contentValue 参数
+      const testCases = [{}, {
+        segmented: 0
+      }, {
+        segmented: 1
+      }, {
+        direction: 0
+      }, {
+        direction: 1
+      }, {
+        expand: 0
+      }, {
+        expand: 1
+      }, {
+        expand: 2
+      }, {
+        segmented: 1,
+        direction: 1
+      }, {
+        segmented: 1,
+        expand: 1
+      }];
+
+      // 测试几个主要模式
+      [1, 2, 3, 4, 5, 8, 10].forEach(mode => {
+        testCases.forEach(contentValue => {
+          const result = modeOption[mode](colors, contentValue, defaultCloseRgb);
+          expect(result).toHaveProperty('colorList');
+          expect(result).toHaveProperty('length');
+        });
+      });
+    });
+  });
+});

package/lib/components/utils.test.js

@@ -0,0 +1,197 @@
+/**
+ * @fileoverview utils 工具函数测试用例
+ */
+
+import { generateGradientColors, topList, getListByIndex, splitNumber, arrayFill, splitLight, splitArray, averageRGBColors, findOverlapIndices } from './utils';
+describe('utils 工具函数测试', () => {
+  describe('generateGradientColors', () => {
+    test('应该生成两个颜色之间的渐变色', () => {
+      const result = generateGradientColors(['rgb(255, 0, 0)', 'rgb(0, 255, 0)'], 5);
+      expect(result).toHaveLength(5);
+      expect(result[0]).toBe('rgb(255, 0, 0)');
+      expect(result[4]).toBe('rgb(0, 255, 0)');
+    });
+    test('应该生成多个颜色之间的渐变色', () => {
+      const result = generateGradientColors(['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'], 10);
+      expect(result).toHaveLength(10);
+      expect(result[0]).toBe('rgb(255, 0, 0)');
+      expect(result[9]).toBe('rgb(0, 0, 255)');
+    });
+    test('应该处理 rgba 格式的颜色', () => {
+      const result = generateGradientColors(['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)'], 3);
+      expect(result).toHaveLength(3);
+      expect(result[0]).toContain('rgb(255, 0, 0)');
+    });
+    test('颜色数组长度小于2时应该抛出错误', () => {
+      expect(() => {
+        generateGradientColors(['rgb(255, 0, 0)'], 5);
+      }).toThrow('颜色数组长度必须为2至8之间');
+    });
+    test('颜色数组长度大于8时应该抛出错误', () => {
+      const colors = Array(9).fill('rgb(255, 0, 0)');
+      expect(() => {
+        generateGradientColors(colors, 5);
+      }).toThrow('颜色数组长度必须为2至8之间');
+    });
+    test('步骤数小于等于0时应该抛出错误', () => {
+      expect(() => {
+        generateGradientColors(['rgb(255, 0, 0)', 'rgb(0, 255, 0)'], 0);
+      }).toThrow('步骤数必须大于0');
+      expect(() => {
+        generateGradientColors(['rgb(255, 0, 0)', 'rgb(0, 255, 0)'], -1);
+      }).toThrow('步骤数必须大于0');
+    });
+  });
+  describe('getListByIndex', () => {
+    test('应该返回指定索引的值', () => {
+      const list = [1, 2, 3, 4, 5];
+      expect(getListByIndex(list, 0)).toBe(1);
+      expect(getListByIndex(list, 2)).toBe(3);
+      expect(getListByIndex(list, 4)).toBe(5);
+    });
+    test('索引超出范围时应该循环返回', () => {
+      const list = [1, 2, 3];
+      expect(getListByIndex(list, 3)).toBe(1); // 3 % 3 = 0, list[0] = 1
+      expect(getListByIndex(list, 5)).toBe(3); // 5 % 3 = 2, list[2] = 3
+      expect(getListByIndex(list, 10)).toBe(2); // 10 % 3 = 1, list[1] = 2
+    });
+    test('应该使用 topList 常量', () => {
+      expect(getListByIndex(topList, 0)).toBe(0);
+      expect(getListByIndex(topList, 1)).toBe(2.81);
+    });
+  });
+  describe('splitNumber', () => {
+    test('应该将数字分割成指定数量的部分', () => {
+      expect(splitNumber(10, 2)).toEqual([5, 5]);
+      expect(splitNumber(10, 3)).toEqual([4, 3, 3]);
+      expect(splitNumber(20, 4)).toEqual([5, 5, 5, 5]);
+    });
+    test('有余数时应该均匀分配', () => {
+      expect(splitNumber(10, 3)).toEqual([4, 3, 3]);
+      expect(splitNumber(11, 3)).toEqual([4, 4, 3]);
+      expect(splitNumber(13, 4)).toEqual([4, 3, 3, 3]);
+    });
+    test('parts 小于2时应该抛出错误', () => {
+      expect(() => {
+        splitNumber(10, 1);
+      }).toThrow('Parts must be between 2 and 8');
+    });
+    test('parts 大于8时应该抛出错误', () => {
+      expect(() => {
+        splitNumber(10, 9);
+      }).toThrow('Parts must be between 2 and 8');
+    });
+  });
+  describe('arrayFill', () => {
+    test('应该创建指定长度的数组并填充值', () => {
+      expect(arrayFill(3, 'test')).toEqual(['test', 'test', 'test']);
+      expect(arrayFill(5, 0)).toEqual([0, 0, 0, 0, 0]);
+    });
+    test('number 小于等于0时应该返回空数组', () => {
+      expect(arrayFill(0, 'test')).toEqual([]);
+      expect(arrayFill(-1, 'test')).toEqual([]);
+    });
+  });
+  describe('splitArray', () => {
+    test('应该将数组按指定间隔分割', () => {
+      expect(splitArray([1, 2, 3, 4, 5, 6, 7, 8], 4)).toEqual([[1, 2, 3, 4], [5, 6, 7, 8]]);
+    });
+    test('数组长度不能被间隔整除时应该保留剩余元素', () => {
+      expect(splitArray([1, 2, 3, 4, 5], 2)).toEqual([[1, 2], [3, 4], [5]]);
+    });
+    test('默认间隔为4', () => {
+      expect(splitArray([1, 2, 3, 4, 5, 6, 7, 8])).toEqual([[1, 2, 3, 4], [5, 6, 7, 8]]);
+    });
+  });
+  describe('splitLight', () => {
+    test('颜色数组长度为2时应该返回正确的分割', () => {
+      const result = splitLight(['rgb(255, 0, 0)', 'rgb(0, 255, 0)']);
+      expect(result.arr).toEqual([10, 10]);
+      // splitArray 将2个颜色按间隔2分割，得到1组（每组2个元素）
+      expect(result.color).toHaveLength(1);
+      expect(result.color[0]).toHaveLength(2);
+    });
+    test('颜色数组长度为3时应该返回正确的分割', () => {
+      const result = splitLight(['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)']);
+      expect(result.arr).toEqual([6, 7, 7]);
+      // splitArray 将3个颜色按间隔3分割，得到1组（每组3个元素）
+      expect(result.color).toHaveLength(1);
+      expect(result.color[0]).toHaveLength(3);
+    });
+    test('颜色数组长度为5时应该扩展为4倍', () => {
+      const result = splitLight(['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)', 'rgb(255, 255, 0)', 'rgb(255, 0, 255)']);
+      expect(result.arr).toEqual([5, 5, 5, 5]);
+      // arrayFill(4, colors).flat(1) 会创建 4 * 5 = 20 个元素，然后按间隔4分割
+      expect(result.color).toHaveLength(5);
+      expect(result.color[0]).toHaveLength(4);
+    });
+    test('颜色数组长度为6时应该扩展为2倍', () => {
+      const colors = Array(6).fill('rgb(255, 0, 0)');
+      const result = splitLight(colors);
+      expect(result.arr).toEqual([5, 5, 5, 5]);
+      // arrayFill(2, colors).flat(1) 会创建 2 * 6 = 12 个元素，然后按间隔4分割
+      expect(result.color).toHaveLength(3);
+      expect(result.color[0]).toHaveLength(4);
+    });
+    test('颜色数组长度为7时应该扩展为4倍', () => {
+      const colors = Array(7).fill('rgb(255, 0, 0)');
+      const result = splitLight(colors);
+      expect(result.arr).toEqual([5, 5, 5, 5]);
+      // arrayFill(4, colors).flat(1) 会创建 4 * 7 = 28 个元素，然后按间隔4分割
+      expect(result.color).toHaveLength(7);
+      expect(result.color[0]).toHaveLength(4);
+    });
+  });
+  describe('averageRGBColors', () => {
+    test('应该计算多个RGB颜色的平均值', () => {
+      const result = averageRGBColors(['rgb(100, 0, 0)', 'rgb(200, 0, 0)']);
+      expect(result).toBe('rgb(150, 0, 0)');
+    });
+    test('应该处理三个颜色分量', () => {
+      const result = averageRGBColors(['rgb(100, 50, 0)', 'rgb(200, 100, 50)']);
+      expect(result).toBe('rgb(150, 75, 25)');
+    });
+    test('应该处理多个颜色', () => {
+      const result = averageRGBColors(['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)']);
+      expect(result).toBe('rgb(85, 85, 85)');
+    });
+    test('应该处理 rgba 格式', () => {
+      const result = averageRGBColors(['rgba(100, 0, 0, 1)', 'rgba(200, 0, 0, 1)']);
+      expect(result).toBe('rgb(150, 0, 0)');
+    });
+    test('空数组应该抛出错误', () => {
+      expect(() => {
+        averageRGBColors([]);
+      }).toThrow('The input array is empty');
+    });
+    test('结果应该限制在0-255范围内', () => {
+      const result = averageRGBColors(['rgb(300, 0, 0)', 'rgb(400, 0, 0)']);
+      expect(result).toBe('rgb(255, 0, 0)');
+    });
+  });
+  describe('findOverlapIndices', () => {
+    test('应该找到两个范围的重叠索引', () => {
+      expect(findOverlapIndices([0, 5], [3, 8])).toEqual([3, 4, 5]);
+      expect(findOverlapIndices([2, 6], [4, 10])).toEqual([4, 5, 6]);
+    });
+    test('没有重叠时应该返回空数组', () => {
+      expect(findOverlapIndices([0, 2], [3, 5])).toEqual([]);
+      expect(findOverlapIndices([5, 10], [0, 4])).toEqual([]);
+    });
+    test('完全重叠时应该返回完整范围', () => {
+      expect(findOverlapIndices([2, 5], [2, 5])).toEqual([2, 3, 4, 5]);
+    });
+    test('一个范围包含另一个范围时应该返回较小的范围', () => {
+      expect(findOverlapIndices([0, 10], [3, 7])).toEqual([3, 4, 5, 6, 7]);
+    });
+    test('负数索引应该被处理为0', () => {
+      expect(findOverlapIndices([-1, 3], [1, 5])).toEqual([1, 2, 3]);
+      expect(findOverlapIndices([0, 3], [-2, 2])).toEqual([0, 1, 2]);
+    });
+    test('负数范围会被处理为0，可能产生交集', () => {
+      // [-5, -2] 被处理为 [0, 0]，[0, 3] 被处理为 [0, 3]
+      // 重叠部分是 [0, 0]，所以返回 [0]
+      expect(findOverlapIndices([-5, -2], [0, 3])).toEqual([0]);
+    });
+  });
+});

package/lib/index.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @fileoverview 组件测试用例 - 从入口文件 index.tsx 开始测试
+ * @jest-environment jsdom
+ */
+import '@testing-library/jest-dom';

package/lib/index.test.js

@@ -0,0 +1,166 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _extends from "@babel/runtime/helpers/esm/extends";
+/**
+ * @fileoverview 组件测试用例 - 从入口文件 index.tsx 开始测试
+ * @jest-environment jsdom
+ */
+
+/// <reference types="jest" />
+
+// Mock must be before imports
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render } from '@testing-library/react';
+import LampBeadStrip from './index';
+import { defaultProps } from './props';
+jest.mock('./utils', () => ({
+  getSystemInfoRes: jest.fn(() => ({
+    windowWidth: 375
+  }))
+}));
+jest.mock('./components', () => {
+  return jest.fn(props => {
+    var _props$prop;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "lamp-bead-strip-component",
+      "data-props": JSON.stringify(props)
+    }, /*#__PURE__*/React.createElement("canvas", {
+      "data-testid": "lamp-canvas",
+      "data-canvas-id": (_props$prop = props.prop) === null || _props$prop === void 0 ? void 0 : _props$prop.canvasId
+    }));
+  });
+});
+describe('LampBeadStrip Component', () => {
+  const defaultTestProps = {
+    canvasId: 'test-canvas-123',
+    colors: ['rgb(255, 0, 0)', 'rgb(0, 255, 0)'],
+    mode: 1,
+    ready: true,
+    speed: 50
+  };
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  test('应该正确渲染组件', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/React.createElement(LampBeadStrip, defaultTestProps));
+    const component = getByTestId('lamp-bead-strip-component');
+    expect(component).toBeInTheDocument();
+  });
+  test('应该传递正确的 props 给子组件', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/React.createElement(LampBeadStrip, defaultTestProps));
+    const component = getByTestId('lamp-bead-strip-component');
+    const props = JSON.parse(component.getAttribute('data-props') || '{}');
+    expect(props.prop.canvasId).toBe(defaultTestProps.canvasId);
+    expect(props.prop.colors).toEqual(defaultTestProps.colors);
+    expect(props.prop.mode).toBe(defaultTestProps.mode);
+    expect(props.prop.ready).toBe(defaultTestProps.ready);
+    expect(props.prop.speed).toBe(defaultTestProps.speed);
+  });
+  test('应该计算并传递 scale 属性', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/React.createElement(LampBeadStrip, defaultTestProps));
+    const component = getByTestId('lamp-bead-strip-component');
+    const props = JSON.parse(component.getAttribute('data-props') || '{}');
+
+    // windowWidth = 375, standardScale = 1 (default)
+    // scale = (375 / 375) * 1 = 1
+    expect(props.prop.scale).toBe(1);
+  });
+  test('应该使用 standardScale 计算缩放', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/React.createElement(LampBeadStrip, _extends({}, defaultTestProps, {
+      standardScale: 2
+    })));
+    const component = getByTestId('lamp-bead-strip-component');
+    const props = JSON.parse(component.getAttribute('data-props') || '{}');
+
+    // windowWidth = 375, standardScale = 2
+    // scale = (375 / 375) * 2 = 2
+    expect(props.prop.scale).toBe(2);
+  });
+  test('应该优先使用传入的 scale 属性', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/React.createElement(LampBeadStrip, _extends({}, defaultTestProps, {
+      scale: 3,
+      standardScale: 2
+    })));
+    const component = getByTestId('lamp-bead-strip-component');
+    const props = JSON.parse(component.getAttribute('data-props') || '{}');
+
+    // 如果传入了 scale，应该使用传入的值
+    expect(props.prop.scale).toBe(3);
+  });
+  test('应该传递所有其他 props', () => {
+    const customProps = _objectSpread(_objectSpread({}, defaultTestProps), {}, {
+      className: 'custom-class',
+      containerStyle: 'width: 100px;',
+      canvasStyle: 'height: 50px;',
+      closeColor: 'rgb(58,58,58)',
+      contentValue: {
+        expand: 1,
+        direction: 0,
+        segmented: 1
+      }
+    });
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/React.createElement(LampBeadStrip, customProps));
+    const component = getByTestId('lamp-bead-strip-component');
+    const props = JSON.parse(component.getAttribute('data-props') || '{}');
+    expect(props.prop.className).toBe(customProps.className);
+    expect(props.prop.containerStyle).toBe(customProps.containerStyle);
+    expect(props.prop.canvasStyle).toBe(customProps.canvasStyle);
+    expect(props.prop.closeColor).toBe(customProps.closeColor);
+    expect(props.prop.contentValue).toEqual(customProps.contentValue);
+  });
+  test('应该使用 defaultProps', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/React.createElement(LampBeadStrip, {
+      canvasId: 'test-canvas',
+      colors: ['rgb(255, 0, 0)']
+    }));
+    const component = getByTestId('lamp-bead-strip-component');
+    const props = JSON.parse(component.getAttribute('data-props') || '{}');
+
+    // 应该使用 defaultProps 中的默认值
+    expect(props.prop.mode).toBe(defaultProps.mode);
+    expect(props.prop.ready).toBe(defaultProps.ready);
+    expect(props.prop.speed).toBe(defaultProps.speed);
+    expect(props.prop.closeColor).toBe(defaultProps.closeColor);
+  });
+  test('应该处理不同的 windowWidth', () => {
+    // 由于 getSystemInfoRes 在模块顶层被调用，我们需要重新 mock
+    // 这个测试验证了默认的 windowWidth = 375 的情况
+    // 如果要测试不同的 windowWidth，需要在模块加载前设置 mock
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/React.createElement(LampBeadStrip, defaultTestProps));
+    const component = getByTestId('lamp-bead-strip-component');
+    const props = JSON.parse(component.getAttribute('data-props') || '{}');
+
+    // windowWidth = 375 (from mock), standardScale = 1
+    // scale = (375 / 375) * 1 = 1
+    expect(props.prop.scale).toBe(1);
+  });
+  test('应该支持自定义动画列表', () => {
+    const customAnimationList = [['rgb(255, 0, 0)', 'rgb(0, 255, 0)'], ['rgb(0, 255, 0)', 'rgb(0, 0, 255)']];
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/React.createElement(LampBeadStrip, _extends({}, defaultTestProps, {
+      customAnimationList: customAnimationList,
+      customAnimationChangeTime: 200
+    })));
+    const component = getByTestId('lamp-bead-strip-component');
+    const props = JSON.parse(component.getAttribute('data-props') || '{}');
+    expect(props.prop.customAnimationList).toEqual(customAnimationList);
+    expect(props.prop.customAnimationChangeTime).toBe(200);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-bead-strip",
-  "version": "1.1.1-beta-1",
+  "version": "1.1.1-beta-2",
   "description": "动画灯珠条带",
   "main": "lib/index",
   "files": [
@@ -17,6 +17,9 @@
   ],
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "build": "patch-package && ray build --type=component",
     "watch": "ray start --type=component --output ./example/src/lib",
     "build:tuya": "ray build ./example",
@@ -35,17 +38,29 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@ray-js/cli": "^1.4.9",
     "@ray-js/panel-sdk": "^1.12.1",
     "@ray-js/ray": "^1.4.9",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
+    "babel-jest": "^30.2.0",
     "core-js": "^3.19.1",
     "eslint-config-tuya-panel": "^0.4.2",
     "husky": "^1.2.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
     "lint-staged": "^10.2.11",
     "patch-package": "^8.0.0",
-    "standard-version": "9.3.2"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "standard-version": "9.3.2",
+    "ts-jest": "^29.4.5"
   },
   "resolutions": {
     "@ray-js/builder-mp": "1.4.15"
@@ -65,5 +80,6 @@
       "prettier --write",
       "git add"
     ]
-  }
+  },
+  "author": "潇齐（马佳辉）"
 }