diff --git a/src/components/ui/Dialog/tests/Dialog.rtl.test.tsx b/src/components/ui/Dialog/tests/Dialog.rtl.test.tsx new file mode 100644 index 000000000..5712cb4ca --- /dev/null +++ b/src/components/ui/Dialog/tests/Dialog.rtl.test.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import Dialog from '../Dialog'; +import DropdownMenu from '../../DropdownMenu/DropdownMenu'; +import Theme from '~/components/ui/Theme/Theme'; + +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('RTL overlay components', () => { + beforeEach(() => mockMatchMedia()); + + test('Dialog opens in rtl', async() => { + const user = userEvent.setup(); + + render( +
+ + + Open + RTL dialog + + +
+ ); + + const trigger = screen.getByText('Open'); + expect(trigger.closest('[dir="rtl"]')).not.toBeNull(); + + await user.click(trigger); + expect(screen.getByText('RTL dialog')).toBeInTheDocument(); + }); + + test('DropdownMenu opens in rtl', async() => { + const user = userEvent.setup(); + + render( +
+ + + Menu + + + Profile + + + + +
+ ); + + const trigger = screen.getByText('Menu'); + expect(trigger.closest('[dir="rtl"]')).not.toBeNull(); + + await user.click(trigger); + expect(screen.getByText('Profile')).toBeInTheDocument(); + }); +});