Absorb the matrix-react-sdk repository (#28192)

Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com> Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Florian Duros <florian.duros@ormaz.fr> Co-authored-by: Kim Brose <kim.brose@nordeck.net> Co-authored-by: Florian Duros <florianduros@element.io> Co-authored-by: R Midhun Suresh <hi@midhun.dev> Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com> Co-authored-by: ElementRobot <releases@riot.im> Co-authored-by: dbkr <dbkr@users.noreply.github.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Co-authored-by: David Langley <davidl@element.io> Co-authored-by: Michael Weimann <michaelw@matrix.org> Co-authored-by: Timshel <Timshel@users.noreply.github.com> Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com> Co-authored-by: Will Hunt <will@half-shot.uk> Co-authored-by: Hubert Chathi <hubert@uhoreg.ca> Co-authored-by: Andrew Ferrazzutti <andrewf@element.io> Co-authored-by: Robin <robin@robin.town> Co-authored-by: Tulir Asokan <tulir@maunium.net>
2026-11-03 06:55:44 +00:00 · 2024-10-16 13:31:55 +01:00
parent 2b99496025
commit c05c429803
3280 changed files with 586617 additions and 905 deletions
@@ -0,0 +1,193 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { render } from "jest-matrix-react";
+
+import ContextMenu, { ChevronFace } from "../../../../../src/components/structures/ContextMenu";
+import UIStore from "../../../../../src/stores/UIStore";
+import Modal from "../../../../../src/Modal";
+import BaseDialog from "../../../../../src/components/views/dialogs/BaseDialog";
+
+describe("<ContextMenu />", () => {
+    // Hardcode window and menu dimensions
+    const windowSize = 300;
+    const menuSize = 200;
+    jest.spyOn(UIStore, "instance", "get").mockImplementation(
+        () =>
+            ({
+                windowWidth: windowSize,
+                windowHeight: windowSize,
+            }) as unknown as UIStore,
+    );
+    window.Element.prototype.getBoundingClientRect = jest.fn().mockReturnValue({
+        width: menuSize,
+        height: menuSize,
+    });
+
+    const targetChevronOffset = 25;
+
+    it("near top edge of window", () => {
+        const targetY = -50;
+        const onFinished = jest.fn();
+
+        render(
+            <ContextMenu
+                bottom={windowSize - targetY - menuSize}
+                right={menuSize}
+                onFinished={onFinished}
+                chevronFace={ChevronFace.Left}
+                chevronOffset={targetChevronOffset}
+            >
+                <React.Fragment />
+            </ContextMenu>,
+        );
+        const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_left")!;
+
+        const bottomStyle = parseInt(
+            document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("bottom"),
+        );
+        const actualY = windowSize - bottomStyle - menuSize;
+        const actualChevronOffset = parseInt(chevron.style.getPropertyValue("top"));
+
+        // stays within the window
+        expect(actualY).toBeGreaterThanOrEqual(0);
+        // positions the chevron correctly
+        expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
+    });
+
+    it("near right edge of window", () => {
+        const targetX = windowSize - menuSize + 50;
+        const onFinished = jest.fn();
+
+        render(
+            <ContextMenu
+                bottom={0}
+                onFinished={onFinished}
+                left={targetX}
+                chevronFace={ChevronFace.Top}
+                chevronOffset={targetChevronOffset}
+            >
+                <React.Fragment />
+            </ContextMenu>,
+        );
+        const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_top")!;
+
+        const actualX = parseInt(
+            document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("left"),
+        );
+        const actualChevronOffset = parseInt(chevron.style.getPropertyValue("left"));
+
+        // stays within the window
+        expect(actualX + menuSize).toBeLessThanOrEqual(windowSize);
+        // positions the chevron correctly
+        expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
+    });
+
+    it("near bottom edge of window", () => {
+        const targetY = windowSize - menuSize + 50;
+        const onFinished = jest.fn();
+
+        render(
+            <ContextMenu
+                top={targetY}
+                left={0}
+                onFinished={onFinished}
+                chevronFace={ChevronFace.Right}
+                chevronOffset={targetChevronOffset}
+            >
+                <React.Fragment />
+            </ContextMenu>,
+        );
+        const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_right")!;
+
+        const actualY = parseInt(
+            document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("top"),
+        );
+        const actualChevronOffset = parseInt(chevron.style.getPropertyValue("top"));
+
+        // stays within the window
+        expect(actualY + menuSize).toBeLessThanOrEqual(windowSize);
+        // positions the chevron correctly
+        expect(actualChevronOffset).toEqual(targetChevronOffset + targetY - actualY);
+    });
+
+    it("near left edge of window", () => {
+        const targetX = -50;
+        const onFinished = jest.fn();
+
+        render(
+            <ContextMenu
+                top={0}
+                right={windowSize - targetX - menuSize}
+                chevronFace={ChevronFace.Bottom}
+                onFinished={onFinished}
+                chevronOffset={targetChevronOffset}
+            >
+                <React.Fragment />
+            </ContextMenu>,
+        );
+        const chevron = document.querySelector<HTMLElement>(".mx_ContextualMenu_chevron_bottom")!;
+
+        const rightStyle = parseInt(
+            document.querySelector<HTMLElement>(".mx_ContextualMenu_wrapper")!.style.getPropertyValue("right"),
+        );
+        const actualX = windowSize - rightStyle - menuSize;
+        const actualChevronOffset = parseInt(chevron.style.getPropertyValue("left"));
+
+        // stays within the window
+        expect(actualX).toBeGreaterThanOrEqual(0);
+        // positions the chevron correctly
+        expect(actualChevronOffset).toEqual(targetChevronOffset + targetX - actualX);
+    });
+
+    it("should automatically close when a modal is opened", () => {
+        const targetX = -50;
+        const onFinished = jest.fn();
+
+        render(
+            <ContextMenu
+                top={0}
+                right={windowSize - targetX - menuSize}
+                chevronFace={ChevronFace.Bottom}
+                onFinished={onFinished}
+                chevronOffset={targetChevronOffset}
+            >
+                <React.Fragment />
+            </ContextMenu>,
+        );
+
+        expect(onFinished).not.toHaveBeenCalled();
+        Modal.createDialog(BaseDialog);
+        expect(onFinished).toHaveBeenCalled();
+    });
+
+    it("should not automatically close when a modal is opened under the existing one", () => {
+        const targetX = -50;
+        const onFinished = jest.fn();
+
+        Modal.createDialog(BaseDialog);
+        render(
+            <ContextMenu
+                top={0}
+                right={windowSize - targetX - menuSize}
+                chevronFace={ChevronFace.Bottom}
+                onFinished={onFinished}
+                chevronOffset={targetChevronOffset}
+            >
+                <React.Fragment />
+            </ContextMenu>,
+        );
+
+        expect(onFinished).not.toHaveBeenCalled();
+        Modal.createDialog(BaseDialog, {}, "", false, true);
+        expect(onFinished).not.toHaveBeenCalled();
+        Modal.appendDialog(BaseDialog);
+        expect(onFinished).not.toHaveBeenCalled();
+    });
+});