test: test

Author: linxianxi

components/color-picker/__tests__/index.test.tsx

@@ -79,12 +79,14 @@ describe('ColorPicker', () => {
     expect(container.querySelector('.ant-color-picker')).toBeFalsy();
   });
 
-  it('Should allowClear work', async () => {
-    const { container } = render(<ColorPicker allowClear />);
+  it('Should allowClear and onClear work', async () => {
+    const onClear = jest.fn();
+    const { container } = render(<ColorPicker allowClear onClear={onClear} />);
     fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
     await waitFakeTimer();
     expect(container.querySelector('.ant-color-picker-clear')).toBeTruthy();
     fireEvent.click(container.querySelector('.ant-color-picker-clear')!);
+    expect(onClear).toHaveBeenCalledTimes(1);
 
     await waitFakeTimer();
     expect(

components/color-picker/demo/allowClear.md

@@ -1,7 +1,7 @@
 ## zh-CN
 
-清除已选择的颜色。
+清除已选择的颜色。可以使用受控 open 和 onClear 控制清除时关闭弹窗。
 
 ## en-US
 
-Clear Color.
+Clear Color. You can use the controlled open and onClear controls to close popovers when clearing.

components/color-picker/demo/allowClear.tsx

@@ -1,4 +1,16 @@
 import { ColorPicker } from 'antd';
-import React from 'react';
+import React, { useState } from 'react';
 
-export default () => <ColorPicker allowClear />;
+export default () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <ColorPicker
+      open={open}
+      allowClear
+      onOpenChange={setOpen}
+      onClear={() => {
+        setOpen(false);
+      }}
+    />
+  );
+};