From bcc5d113bcdcbd43c6f08a1755db12559d760570 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sat, 16 Mar 2024 21:41:25 +0800 Subject: [PATCH] chore(deps): update dependency @types/react to v18.2.66 (#47798) * chore(deps): update dependency @types/react to v18.2.66 * Update package.json Signed-off-by: afc163 * fix: React LegacyRef * type: fix ref type * type: fix ref type * type: fix ref type * type: fix ref type * type: fix ref type * type: fix ref type * chore: fix lint errors --------- Signed-off-by: afc163 Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: afc163 --- components/_util/type.ts | 4 +- components/radio/__tests__/group.test.tsx | 66 ++++++------------- .../radio/__tests__/radio-button.test.tsx | 45 +++++-------- package.json | 2 +- 4 files changed, 42 insertions(+), 75 deletions(-) diff --git a/components/_util/type.ts b/components/_util/type.ts index 28d5099b85..b7a6e0411c 100644 --- a/components/_util/type.ts +++ b/components/_util/type.ts @@ -20,7 +20,9 @@ export type GetProp< PropName extends keyof GetProps, > = NonNullable[PropName]>; -type ReactRefComponent }> = (props: Props) => React.ReactNode; +type ReactRefComponent | string }> = ( + props: Props, +) => React.ReactNode; export type GetRef | React.Component> = T extends React.Component diff --git a/components/radio/__tests__/group.test.tsx b/components/radio/__tests__/group.test.tsx index 1f15bab5fe..d6174b1656 100644 --- a/components/radio/__tests__/group.test.tsx +++ b/components/radio/__tests__/group.test.tsx @@ -1,4 +1,3 @@ -import type { RefAttributes } from 'react'; import React from 'react'; import type { RadioGroupProps } from '..'; @@ -6,24 +5,22 @@ import Radio from '..'; import { fireEvent, render } from '../../../tests/utils'; describe('Radio Group', () => { - function createRadioGroup(props?: RadioGroupProps & RefAttributes) { - return ( - - A - B - C - - ); - } + const RadioGroupComponent: React.FC = (props) => ( + + A + B + C + + ); - function createRadioGroupByOption(props?: RadioGroupProps & RefAttributes) { + const RadioGroupByOptions = React.forwardRef((props, ref) => { const options = [ { label: 'A', value: 'A' }, { label: 'B', value: 'B' }, { label: 'C', value: 'C' }, ]; - return ; - } + return ; + }); it('responses hover events', () => { const onMouseEnter = jest.fn(); @@ -45,20 +42,11 @@ describe('Radio Group', () => { it('fire change events when value changes', () => { const onChange = jest.fn(); - const { container, rerender } = render( - createRadioGroup({ - onChange, - }), - ); + const { container, rerender } = render(); const radios = container.querySelectorAll('input'); // controlled component - rerender( - createRadioGroup({ - onChange, - value: 'A', - }), - ); + rerender(); fireEvent.click(radios[1]); expect(onChange.mock.calls.length).toBe(1); }); @@ -127,26 +115,17 @@ describe('Radio Group', () => { it("won't fire change events when value not changes", () => { const onChange = jest.fn(); - const { container, rerender } = render( - createRadioGroup({ - onChange, - }), - ); + const { container, rerender } = render(); const radios = container.querySelectorAll('input'); // controlled component - rerender( - createRadioGroup({ - onChange, - value: 'A', - }), - ); + rerender(); fireEvent.click(radios[0]); expect(onChange.mock.calls.length).toBe(0); }); it('optional should correct render', () => { - const { container } = render(createRadioGroupByOption()); + const { container } = render(); const radios = container.querySelectorAll('input'); expect(radios.length).toBe(3); @@ -154,7 +133,7 @@ describe('Radio Group', () => { it('all children should have a name property', () => { const GROUP_NAME = 'GROUP_NAME'; - const { container } = render(createRadioGroup({ name: GROUP_NAME })); + const { container } = render(); container.querySelectorAll('input[type="radio"]').forEach((el) => { expect(el.name).toEqual(GROUP_NAME); @@ -173,11 +152,11 @@ describe('Radio Group', () => { it('should forward ref', () => { let radioGroupRef: HTMLDivElement; const { container } = render( - createRadioGroupByOption({ - ref(ref: HTMLDivElement) { + { radioGroupRef = ref; - }, - }), + }} + />, ); expect(radioGroupRef!).toBe(container.querySelector('.ant-radio-group')); @@ -185,10 +164,7 @@ describe('Radio Group', () => { it('should support data-* or aria-* props', () => { const { container } = render( - createRadioGroup({ - 'data-radio-group-id': 'radio-group-id', - 'aria-label': 'radio-group', - } as RadioGroupProps), + , ); expect((container.firstChild as HTMLDivElement)?.getAttribute('data-radio-group-id')).toBe( 'radio-group-id', diff --git a/components/radio/__tests__/radio-button.test.tsx b/components/radio/__tests__/radio-button.test.tsx index 9c6c588a63..55aab9f7fe 100644 --- a/components/radio/__tests__/radio-button.test.tsx +++ b/components/radio/__tests__/radio-button.test.tsx @@ -1,4 +1,3 @@ -import type { RefAttributes } from 'react'; import React from 'react'; import type { RadioGroupProps } from '..'; import Radio, { Button } from '..'; @@ -36,15 +35,13 @@ describe('Radio Button', () => { }); describe('Radio Group', () => { - function createRadioGroup(props?: RadioGroupProps & RefAttributes) { - return ( - - - - - - ); - } + const RadioGroupComponent = React.forwardRef((props, ref) => ( + + A + B + C + + )); it('responses hover events', () => { const onMouseEnter = jest.fn(); @@ -66,12 +63,12 @@ describe('Radio Group', () => { it('fire change events when value changes', () => { const onChange = jest.fn(); - const { container, rerender } = render(createRadioGroup({ onChange })); + const { container, rerender } = render(); const radios = container.querySelectorAll('input'); // controlled component - rerender(createRadioGroup({ onChange, value: 'A' })); + rerender(); fireEvent.click(radios[1]); expect(onChange.mock.calls.length).toBe(1); }); @@ -137,23 +134,18 @@ describe('Radio Group', () => { it("won't fire change events when value not changes", () => { const onChange = jest.fn(); - const { container, rerender } = render( - createRadioGroup({ - onChange, - }), - ); + const { container, rerender } = render(); const radios = container.querySelectorAll('input'); // controlled component - rerender(createRadioGroup({ onChange, value: 'A' })); + rerender(); fireEvent.click(radios[0]); expect(onChange.mock.calls.length).toBe(0); }); it('all children should have a name property', () => { const GROUP_NAME = 'GROUP_NAME'; - const { container } = render(createRadioGroup({ name: GROUP_NAME })); - + const { container } = render(); container.querySelectorAll('input[type="radio"]').forEach((el) => { expect(el.name).toEqual(GROUP_NAME); }); @@ -171,11 +163,11 @@ describe('Radio Group', () => { it('should forward ref', () => { let radioGroupRef: HTMLDivElement; const { container } = render( - createRadioGroup({ - ref(ref: HTMLDivElement) { + { radioGroupRef = ref; - }, - }), + }} + />, ); expect(radioGroupRef!).toBe(container.querySelector('.ant-radio-group')); @@ -183,10 +175,7 @@ describe('Radio Group', () => { it('should support data-* or aria-* props', () => { const { container } = render( - createRadioGroup({ - 'data-radio-group-id': 'radio-group-id', - 'aria-label': 'radio-group', - } as RadioGroupProps), + , ); expect((container.firstChild as HTMLDivElement)?.getAttribute('data-radio-group-id')).toBe( 'radio-group-id', diff --git a/package.json b/package.json index db68f19288..8e08317288 100644 --- a/package.json +++ b/package.json @@ -208,7 +208,7 @@ "@types/prismjs": "^1.26.3", "@types/progress": "^2.0.7", "@types/qs": "^6.9.12", - "@types/react": "18.2.60", + "@types/react": "^18.2.66", "@types/react-copy-to-clipboard": "^5.0.7", "@types/react-dom": "^18.2.22", "@types/react-highlight-words": "^0.16.7",