diff --git a/packages/react/radio-group/src/radio-group.test.tsx b/packages/react/radio-group/src/radio-group.test.tsx index f7bfd0906..568a6ca75 100644 --- a/packages/react/radio-group/src/radio-group.test.tsx +++ b/packages/react/radio-group/src/radio-group.test.tsx @@ -209,6 +209,50 @@ describe('RadioGroup', () => { }); }); + describe('given a controlled RadioGroup that is reset to `null`', () => { + function ResettableRadioGroup() { + const [value, setValue] = React.useState('2'); + return ( +
+ + {VALUES.map((v) => ( + + + + ))} + + +
+ ); + } + + beforeEach(() => { + render(); + }); + + it('should uncheck every item and hide indicators when value becomes `null`', async () => { + const radios = screen.getAllByRole(RADIO_ROLE); + expect(radios[1]).toHaveAttribute('aria-checked', 'true'); + expect(screen.queryByTestId(`${INDICATOR_TEST_ID}-2`)).toBeVisible(); + + await act(async () => fireEvent.click(screen.getByText('Reset'))); + + radios.forEach((radio) => expect(radio).toHaveAttribute('aria-checked', 'false')); + expect(screen.queryByTestId(`${INDICATOR_TEST_ID}-2`)).not.toBeInTheDocument(); + }); + + it('should allow selecting a new value after being reset', async () => { + const radios = screen.getAllByRole(RADIO_ROLE); + await act(async () => fireEvent.click(screen.getByText('Reset'))); + await act(async () => fireEvent.click(radios[0]!)); + + expect(radios[0]).toHaveAttribute('aria-checked', 'true'); + expect(screen.queryByTestId(`${INDICATOR_TEST_ID}-1`)).toBeVisible(); + }); + }); + describe('keyboard navigation', () => { it('should check an item that receives focus while an arrow key is pressed', async () => { render();