diff --git a/src/color-picker/__tests__/color-picker.test.tsx b/src/color-picker/__tests__/color-picker.test.tsx
index 58c9e860fe..e76a0ff9ef 100644
--- a/src/color-picker/__tests__/color-picker.test.tsx
+++ b/src/color-picker/__tests__/color-picker.test.tsx
@@ -1,17 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
import { render, fireEvent } from '@test/utils';
import ColorPickerPanel from '../ColorPickerPanel';
import ColorPicker from '../ColorPicker';
describe('ColorPicker 组件测试', () => {
- test('ColorPickerPanel 测试', () => {
- const { queryByText } = render();
- expect(queryByText('最近使用颜色')).toBeInTheDocument();
- });
-
test('ColorPicker Trigger 测试', () => {
const { container } = render();
- expect(container.querySelector('.t-input__inner').value).toBe('#0052d9');
+ expect(container.querySelector('.t-input__inner')).toHaveValue('#0052d9');
});
test('ColorPicker 线性渐变 测试', () => {
@@ -27,3 +22,32 @@ describe('ColorPicker 组件测试', () => {
expect(document.querySelector('.t-color-picker__gradient')).toBeInTheDocument();
});
});
+
+describe('ColorPickerPanel 组件测试', () => {
+ test('ColorPickerPanel 测试', () => {
+ const { queryByText } = render();
+ expect(queryByText('最近使用颜色')).toBeInTheDocument();
+ });
+
+ test('enableAlpha 开启透明通道', () => {
+ const btnText = 'changeAlpha';
+ const [defaultValue, changeValue] = ['rgba(0, 82, 217, 1)', 'rgba(0, 82, 217, 0.32)'];
+ const TestComponent = () => {
+ const [value, setValue] = useState(defaultValue);
+ const onClick = () => {
+ setValue(changeValue);
+ };
+ return (
+ <>
+
+
+ >
+ );
+ };
+ const { container, getByText } = render();
+ expect(container.querySelector('.t-color-picker__alpha')).toBeInTheDocument();
+ expect(container.querySelector('.t-color-picker__sliders-preview-inner')).toHaveStyle({ background: defaultValue });
+ fireEvent.click(getByText(btnText));
+ expect(container.querySelector('.t-color-picker__sliders-preview-inner')).toHaveStyle({ background: changeValue });
+ });
+});