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 }); + }); +});