element-web/test/components/views/elements/InteractiveTooltip-test.ts

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 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 { Direction, mouseWithinRegion } from "../../../../src/components/views/elements/InteractiveTooltip";

describe("InteractiveTooltip", () => {
    describe("mouseWithinRegion", () => {
        it("direction=left", () => {
            const targetRect = {
                width: 20,
                height: 20,
                top: 300,
                right: 370,
                bottom: 320,
                left: 350,
            } as DOMRect;

            const contentRect = {
                width: 100,
                height: 400,
                top: 100,
                right: 200,
                bottom: 500,
                left: 100,
            } as DOMRect;

            // just within top left corner of contentRect
            expect(mouseWithinRegion(101, 101, Direction.Left, targetRect, contentRect)).toBe(true);
            // just outside top left corner of contentRect, within buffer
            expect(mouseWithinRegion(101, 90, Direction.Left, targetRect, contentRect)).toBe(true);
            // just within top right corner of targetRect
            expect(mouseWithinRegion(369, 301, Direction.Left, targetRect, contentRect)).toBe(true);
            // within the top triangular portion of the trapezoid
            expect(mouseWithinRegion(300, 200, Direction.Left, targetRect, contentRect)).toBe(true);
            // within the bottom triangular portion of the trapezoid
            expect(mouseWithinRegion(300, 350, Direction.Left, targetRect, contentRect)).toBe(true);
            // outside the top triangular portion of the trapezoid
            expect(mouseWithinRegion(300, 140, Direction.Left, targetRect, contentRect)).toBe(false);
            // outside the bottom triangular portion of the trapezoid
            expect(mouseWithinRegion(300, 460, Direction.Left, targetRect, contentRect)).toBe(false);
        });

        it("direction=right", () => {
            const targetRect = {
                width: 20,
                height: 20,
                top: 300,
                right: 370,
                bottom: 320,
                left: 350,
            } as DOMRect;

            const contentRect = {
                width: 100,
                height: 400,
                top: 100,
                right: 620,
                bottom: 500,
                left: 520,
            } as DOMRect;

            // just within top right corner of contentRect
            expect(mouseWithinRegion(619, 101, Direction.Right, targetRect, contentRect)).toBe(true);
            // just outside top right corner of contentRect, within buffer
            expect(mouseWithinRegion(619, 90, Direction.Right, targetRect, contentRect)).toBe(true);
            // just within top left corner of targetRect
            expect(mouseWithinRegion(351, 301, Direction.Right, targetRect, contentRect)).toBe(true);
            // within the top triangular portion of the trapezoid
            expect(mouseWithinRegion(420, 200, Direction.Right, targetRect, contentRect)).toBe(true);
            // within the bottom triangular portion of the trapezoid
            expect(mouseWithinRegion(420, 350, Direction.Right, targetRect, contentRect)).toBe(true);
            // outside the top triangular portion of the trapezoid
            expect(mouseWithinRegion(420, 140, Direction.Right, targetRect, contentRect)).toBe(false);
            // outside the bottom triangular portion of the trapezoid
            expect(mouseWithinRegion(420, 460, Direction.Right, targetRect, contentRect)).toBe(false);
        });

        it("direction=top", () => {
            const targetRect = {
                width: 20,
                height: 20,
                top: 300,
                right: 370,
                bottom: 320,
                left: 350,
            } as DOMRect;

            const contentRect = {
                width: 400,
                height: 100,
                top: 100,
                right: 550,
                bottom: 200,
                left: 150,
            } as DOMRect;

            // just within top right corner of contentRect
            expect(mouseWithinRegion(549, 101, Direction.Top, targetRect, contentRect)).toBe(true);
            // just outside top right corner of contentRect, within buffer
            expect(mouseWithinRegion(549, 99, Direction.Top, targetRect, contentRect)).toBe(true);
            // just within bottom left corner of targetRect
            expect(mouseWithinRegion(351, 319, Direction.Top, targetRect, contentRect)).toBe(true);
            // within the left triangular portion of the trapezoid
            expect(mouseWithinRegion(240, 260, Direction.Top, targetRect, contentRect)).toBe(true);
            // within the right triangular portion of the trapezoid
            expect(mouseWithinRegion(480, 260, Direction.Top, targetRect, contentRect)).toBe(true);
            // outside the left triangular portion of the trapezoid
            expect(mouseWithinRegion(220, 260, Direction.Top, targetRect, contentRect)).toBe(false);
            // outside the right triangular portion of the trapezoid
            expect(mouseWithinRegion(500, 260, Direction.Top, targetRect, contentRect)).toBe(false);
        });

        it("direction=bottom", () => {
            const targetRect = {
                width: 20,
                height: 20,
                top: 300,
                right: 370,
                bottom: 320,
                left: 350,
            } as DOMRect;

            const contentRect = {
                width: 400,
                height: 100,
                top: 420,
                right: 550,
                bottom: 520,
                left: 150,
            } as DOMRect;

            // just within bottom left corner of contentRect
            expect(mouseWithinRegion(101, 519, Direction.Bottom, targetRect, contentRect)).toBe(true);
            // just outside bottom left corner of contentRect, within buffer
            expect(mouseWithinRegion(101, 521, Direction.Bottom, targetRect, contentRect)).toBe(true);
            // just within top left corner of targetRect
            expect(mouseWithinRegion(351, 301, Direction.Bottom, targetRect, contentRect)).toBe(true);
            // within the left triangular portion of the trapezoid
            expect(mouseWithinRegion(240, 360, Direction.Bottom, targetRect, contentRect)).toBe(true);
            // within the right triangular portion of the trapezoid
            expect(mouseWithinRegion(480, 360, Direction.Bottom, targetRect, contentRect)).toBe(true);
            // outside the left triangular portion of the trapezoid
            expect(mouseWithinRegion(220, 360, Direction.Bottom, targetRect, contentRect)).toBe(false);
            // outside the right triangular portion of the trapezoid
            expect(mouseWithinRegion(500, 360, Direction.Bottom, targetRect, contentRect)).toBe(false);
        });
    });
});