diff --git a/src/components/ui/AlertDialog/tests/AlertDialog.controlledSwitch.test.tsx b/src/components/ui/AlertDialog/tests/AlertDialog.controlledSwitch.test.tsx new file mode 100644 index 000000000..877f04da4 --- /dev/null +++ b/src/components/ui/AlertDialog/tests/AlertDialog.controlledSwitch.test.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import AlertDialog from '../AlertDialog'; + +describe('AlertDialog controlled switch', () => { + const alertDialog = (rootProps: Partial>) => ( + + Open + + Title + Description + + + ); + + test('switches from uncontrolled defaultOpen to controlled open', async() => { + const user = userEvent.setup(); + const onOpenChange = jest.fn(); + + const { rerender } = render(alertDialog({ defaultOpen: true })); + + expect(screen.getByText('Description')).toBeInTheDocument(); + + rerender(alertDialog({ open: false, onOpenChange })); + + expect(screen.queryByText('Description')).not.toBeInTheDocument(); + + await user.click(screen.getByText('Open')); + expect(onOpenChange).toHaveBeenCalledWith(true); + }); + + test('switches from controlled open to uncontrolled defaultOpen', () => { + const { rerender } = render(alertDialog({ defaultOpen: true })); + + expect(screen.getByText('Description')).toBeInTheDocument(); + + rerender(alertDialog({ open: false })); + expect(screen.queryByText('Description')).not.toBeInTheDocument(); + + rerender(alertDialog({ defaultOpen: true })); + expect(screen.getByText('Description')).toBeInTheDocument(); + }); +});