enhance: New Picker no need needConfirm when multiple (#47275)

* docs: more and more * chore: bump rc-picker * test: update snapshot * chore: multiple style * chore: fix removeIcon * test: update snapshot * test: update testcase * test: update snapshot * chore: cleanup
ant-design · Feb 1, 2024 · cbf2242 · cbf2242
1 parent cbea5a5
commit cbf2242
Show file tree

Hide file tree

Showing 16 changed files with 3,259 additions and 470 deletions.
diff --git a/components/date-picker/__tests__/DatePicker.test.tsx b/components/date-picker/__tests__/DatePicker.test.tsx
@@ -5,17 +5,16 @@ import 'dayjs/locale/mk'; // to test local in 'prop locale should works' test ca
 
 import React from 'react';
 import { CloseCircleFilled } from '@ant-design/icons';
-import userEvent from '@testing-library/user-event';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import MockDate from 'mockdate';
 import dayJsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 
 import DatePicker from '..';
 import { resetWarned } from '../../_util/warning';
 import focusTest from '../../../tests/shared/focusTest';
-import { fireEvent, render, screen, waitFor } from '../../../tests/utils';
+import { fireEvent, render } from '../../../tests/utils';
 import type { PickerLocale } from '../generatePicker';
-import { closeCircleByRole, expectCloseCircle } from './utils';
+import { getClearButton } from './utils';
 
 dayjs.extend(customParseFormat);
 
@@ -423,29 +422,26 @@ describe('DatePicker', () => {
   });
 
   it('allows or prohibits clearing as applicable', async () => {
-    const somepoint = dayjs('2023-08-01');
-    const { rerender } = render(<DatePicker value={somepoint} />);
+    const somePoint = dayjs('2023-08-01');
+    const { rerender, container } = render(<DatePicker value={somePoint} />);
+    expect(getClearButton()).toBeTruthy();
 
-    const { role, options } = closeCircleByRole;
-    await userEvent.hover(screen.getByRole(role, options));
-    await waitFor(() => expectCloseCircle(true));
+    rerender(<DatePicker value={somePoint} allowClear={false} />);
+    expect(getClearButton()).toBeFalsy();
 
-    rerender(<DatePicker value={somepoint} allowClear={false} />);
-    await waitFor(() => expectCloseCircle(false));
-
-    rerender(<DatePicker value={somepoint} allowClear={{ clearIcon: <CloseCircleFilled /> }} />);
-    await waitFor(() => expectCloseCircle(true));
+    rerender(<DatePicker value={somePoint} allowClear={{ clearIcon: <CloseCircleFilled /> }} />);
+    expect(getClearButton()).toBeTruthy();
 
     rerender(
       <DatePicker
-        value={somepoint}
+        value={somePoint}
         allowClear={{ clearIcon: <div data-testid="custom-clear" /> }}
       />,
     );
-    await waitFor(() => expectCloseCircle(false));
-    await userEvent.hover(screen.getByTestId('custom-clear'));
+    expect(getClearButton()).toBeTruthy();
+    expect(container.querySelector('[data-testid="custom-clear"]')).toBeTruthy();
 
-    rerender(<DatePicker value={somepoint} allowClear={{}} />);
-    await waitFor(() => expectCloseCircle(true));
+    rerender(<DatePicker value={somePoint} allowClear={{}} />);
+    expect(getClearButton()).toBeTruthy();
   });
 });
diff --git a/components/date-picker/__tests__/RangePicker.test.tsx b/components/date-picker/__tests__/RangePicker.test.tsx
@@ -1,15 +1,14 @@
 import React, { useState } from 'react';
 import { CloseCircleFilled } from '@ant-design/icons';
-import userEvent from '@testing-library/user-event';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 
 import DatePicker from '..';
 import { resetWarned } from '../../_util/warning';
 import focusTest from '../../../tests/shared/focusTest';
-import { render, resetMockDate, screen, setMockDate, waitFor } from '../../../tests/utils';
+import { render, resetMockDate, setMockDate } from '../../../tests/utils';
 import enUS from '../locale/en_US';
-import { closeCircleByRole, closePicker, expectCloseCircle, openPicker, selectCell } from './utils';
+import { closePicker, getClearButton, openPicker, selectCell } from './utils';
 
 dayjs.extend(customParseFormat);
 
@@ -163,36 +162,35 @@ describe('RangePicker', () => {
   });
 
   it('allows or prohibits clearing as applicable', async () => {
-    const somepoint = dayjs('2023-08-01');
-    const { rerender } = render(<RangePicker locale={enUS} value={[somepoint, somepoint]} />);
-
-    const { role, options } = closeCircleByRole;
-    await userEvent.hover(screen.getByRole(role, options));
-    await waitFor(() => expectCloseCircle(true));
+    const somePoint = dayjs('2023-08-01');
+    const { rerender, container } = render(
+      <RangePicker locale={enUS} value={[somePoint, somePoint]} />,
+    );
+    expect(getClearButton()).toBeTruthy();
 
-    rerender(<RangePicker locale={enUS} value={[somepoint, somepoint]} allowClear={false} />);
-    await waitFor(() => expectCloseCircle(false));
+    rerender(<RangePicker locale={enUS} value={[somePoint, somePoint]} allowClear={false} />);
+    expect(getClearButton()).toBeFalsy();
 
     rerender(
       <RangePicker
         locale={enUS}
-        value={[somepoint, somepoint]}
+        value={[somePoint, somePoint]}
         allowClear={{ clearIcon: <CloseCircleFilled /> }}
       />,
     );
-    await waitFor(() => expectCloseCircle(true));
+    expect(getClearButton()).toBeTruthy();
 
     rerender(
       <RangePicker
         locale={enUS}
-        value={[somepoint, somepoint]}
+        value={[somePoint, somePoint]}
         allowClear={{ clearIcon: <div data-testid="custom-clear" /> }}
       />,
     );
-    await waitFor(() => expectCloseCircle(false));
-    await userEvent.hover(screen.getByTestId('custom-clear'));
+    expect(getClearButton()).toBeTruthy();
+    expect(container.querySelector('[data-testid="custom-clear"]')).toBeTruthy();
 
-    rerender(<RangePicker locale={enUS} value={[somepoint, somepoint]} allowClear={{}} />);
-    await waitFor(() => expectCloseCircle(true));
+    rerender(<RangePicker locale={enUS} value={[somePoint, somePoint]} allowClear={{}} />);
+    expect(getClearButton()).toBeTruthy();
   });
 });