From ac9903b06be8d289469b86c50c9fbe0b4fa91ee4 Mon Sep 17 00:00:00 2001
From: Pranay Kothapalli <pranaykothapalli@gmail.com>
Date: Wed, 24 Jun 2026 10:45:02 +0530
Subject: [PATCH] test(Dialog,DropdownMenu): RTL overlay interaction (#1813)

---
 .../ui/Dialog/tests/Dialog.rtl.test.tsx       | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 src/components/ui/Dialog/tests/Dialog.rtl.test.tsx

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(
+            <div dir="rtl">
+                <Theme>
+                    <Dialog.Root>
+                        <Dialog.Trigger>Open</Dialog.Trigger>
+                        <Dialog.Content>RTL dialog</Dialog.Content>
+                    </Dialog.Root>
+                </Theme>
+            </div>
+        );
+
+        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(
+            <div dir="rtl">
+                <Theme>
+                    <DropdownMenu.Root>
+                        <DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>
+                        <DropdownMenu.Portal>
+                            <DropdownMenu.Content>
+                                <DropdownMenu.Item label="Profile">Profile</DropdownMenu.Item>
+                            </DropdownMenu.Content>
+                        </DropdownMenu.Portal>
+                    </DropdownMenu.Root>
+                </Theme>
+            </div>
+        );
+
+        const trigger = screen.getByText('Menu');
+        expect(trigger.closest('[dir="rtl"]')).not.toBeNull();
+
+        await user.click(trigger);
+        expect(screen.getByText('Profile')).toBeInTheDocument();
+    });
+});