diff --git a/src/components/ui/AlertDialog/tests/AlertDialog.lazyMount.test.tsx b/src/components/ui/AlertDialog/tests/AlertDialog.lazyMount.test.tsx new file mode 100644 index 000000000..5323ed293 --- /dev/null +++ b/src/components/ui/AlertDialog/tests/AlertDialog.lazyMount.test.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import Theme from '~/components/ui/Theme/Theme'; +import AlertDialog from '../AlertDialog'; + +const mockMatchMedia = () => { + if ('matchMedia' in window && typeof window.matchMedia === 'function') return; + Object.defineProperty(window, 'matchMedia', { + writable: true, + value: jest.fn().mockImplementation(() => ({ + matches: false, + addEventListener: jest.fn(), + removeEventListener: jest.fn() + })) + }); +}; + +describe('AlertDialog lazy mount', () => { + beforeEach(() => mockMatchMedia()); + + test('does not mount dialog content until opened', () => { + render( + + + Open + + + Title + Description + + + + + ); + + expect(screen.queryByTestId('alert-content')).not.toBeInTheDocument(); + }); + + test('mounts content when open', () => { + render( + + + Open + + + Title + Description + + + + + ); + + expect(screen.getByText('Description')).toBeInTheDocument(); + }); +});