Switch away from nesting React trees and mangling the DOM (#29586)

* Switch away from nesting React trees and mangling the DOM By parsing HTML events and manipulating the AST before passing it to React Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Use MatrixClientContext in Pill now that we are in the main React tree Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add missing import Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Break import cycles Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Minimise Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Docs Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-11-05 22:25:36 +00:00 · 2025-03-26 20:25:03 +00:00
parent 89e22e00fb
commit 3f47487472
37 changed files with 1488 additions and 1134 deletions
@@ -0,0 +1,47 @@
+/*
+Copyright 2024-2025 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { screen, fireEvent, render, type RenderResult } from "jest-matrix-react";
+import parse from "html-react-parser";
+
+import { ambiguousLinkTooltipRenderer, combineRenderers } from "../../../src/renderer";
+import PlatformPeg from "../../../src/PlatformPeg";
+import type BasePlatform from "../../../src/BasePlatform";
+
+describe("link-tooltip", () => {
+    jest.spyOn(PlatformPeg, "get").mockReturnValue({ needsUrlTooltips: () => true } as unknown as BasePlatform);
+
+    function renderTooltips(input: string): RenderResult {
+        return render(
+            <>
+                {parse(input, {
+                    replace: combineRenderers(ambiguousLinkTooltipRenderer)({ isHtml: true }),
+                })}
+            </>,
+        );
+    }
+
+    it("does nothing for empty element", () => {
+        const { asFragment } = renderTooltips("<div></div>");
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("wraps single anchor", () => {
+        const { container, asFragment } = renderTooltips(`
+            <div>
+                <a href="/foo">click</a>
+            </div>
+        `);
+        expect(asFragment()).toMatchSnapshot();
+        const anchor = container.querySelector("a")!;
+        expect(anchor.getAttribute("href")).toEqual("/foo");
+        fireEvent.focus(anchor.parentElement!);
+        expect(screen.getByLabelText("http://localhost/foo")).toBe(anchor.parentElement!);
+    });
+});