web: Update context_menu_position test

Add cases where the direction of the context menu is different.

Author: kjarosh

web/packages/selfhosted/test/integration_tests/context_menu_position/test.ts

@@ -10,6 +10,20 @@ async function getViewportWidth(): Promise<number> {
     });
 }
 
+async function setDirection(
+    element: ChainablePromiseElement,
+    direction: string,
+) {
+    await browser.execute(
+        (element, direction) => {
+            const el = element as unknown as HTMLElement;
+            el.dir = direction;
+        },
+        element,
+        direction,
+    );
+}
+
 describe("Context Menu", () => {
     it("load the test", async () => {
         await openTest(browser, "integration_tests/context_menu_position");
@@ -67,7 +81,6 @@ describe("Context Menu", () => {
 
         const menu = await player.$("#context-menu");
         const menuLocation = await menu.getLocation();
-
         expect(menuLocation.x).to.equal(viewportWidth - 500);
         expect(menuLocation.y).to.equal(500);
 
@@ -89,4 +102,52 @@ describe("Context Menu", () => {
         // Dismiss the menu
         await player.click({ x: -10, y: -10 });
     });
+
+    it("switch context menu LTR -> RTL", async () => {
+        // Note: normally we should change the preferred user language
+        //   (navigator.language), but that's not easy without creating
+        //   a new browser instance.
+
+        const player = await browser.$("#objectElement");
+        const menu = await player.$("#context-menu");
+        await setDirection(menu, "rtl");
+    });
+
+    it("open RTL context menu in the middle RTL", async () => {
+        const player = await browser.$("#objectElement");
+        const viewportWidth = await getViewportWidth();
+
+        await player.click({ x: 0, y: 0, button: "right" });
+
+        const menu = await player.$("#context-menu");
+        const menuLocation = await menu.getLocation();
+        const menuSize = await menu.getSize();
+        expect(menuLocation.x).to.approximately(
+            viewportWidth - 500 - menuSize.width,
+            0.6,
+        );
+        expect(menuLocation.y).to.equal(500);
+
+        // Dismiss the menu
+        await player.click({ x: -10, y: -10 });
+    });
+
+    it("open RTL context menu in the corner RTL", async () => {
+        const player = await browser.$("#objectElement");
+        const viewportWidth = await getViewportWidth();
+
+        await player.click({ x: -150, y: 150, button: "right" });
+
+        const menu = await player.$("#context-menu");
+        const menuLocation = await menu.getLocation();
+        const menuSize = await menu.getSize();
+        expect(menuLocation.x).to.approximately(
+            viewportWidth - 650 - menuSize.width,
+            0.6,
+        );
+        expect(menuLocation.y).to.equal(650);
+
+        // Dismiss the menu
+        await player.click({ x: -10, y: -10 });
+    });
 });