Update dependency @vector-im/compound-web to v2 (#12133)

* Update dependency @vector-im/compound-web to v2 * Update Tooltip props Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Include TooltipProvider in MatrixChat Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix pillify & tooltipify Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests to use TooltipProvider where necessary Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tooltips in Modals, ContextMenus, PersistedElements, Spoiler, HtmlExport Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tooltips in HTMLExport Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Don't pass mountAsChild to DOM Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * prettier Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Stabilise test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2024-01-11 19:56:36 +00:00
parent 54b71140b8
commit 56d8ef3640
51 changed files with 293 additions and 221 deletions
--- a/test/components/structures/MessagePanel-test.tsx
+++ b/test/components/structures/MessagePanel-test.tsx
@@ -19,6 +19,7 @@ import React from "react";
 import { EventEmitter } from "events";
 import { MatrixEvent, Room, RoomMember, Thread, ReceiptType } from "matrix-js-sdk/src/matrix";
 import { render } from "@testing-library/react";
+import { TooltipProvider } from "@vector-im/compound-web";

 import MessagePanel, { shouldFormContinuation } from "../../../src/components/structures/MessagePanel";
 import SettingsStore from "../../../src/settings/SettingsStore";
@@ -97,9 +98,10 @@ describe("MessagePanel", function () {
    const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => (
        <MatrixClientContext.Provider value={client}>
            <RoomContext.Provider value={{ ...defaultRoomContext, ...roomContext }}>
-                <MessagePanel {...defaultProps} {...props} />
+                <TooltipProvider>
+                    <MessagePanel {...defaultProps} {...props} />
+                </TooltipProvider>
            </RoomContext.Provider>
-            );
        </MatrixClientContext.Provider>
    );

--- a/test/components/structures/RightPanel-test.tsx
+++ b/test/components/structures/RightPanel-test.tsx
@@ -19,6 +19,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { jest } from "@jest/globals";
 import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { TooltipProvider } from "@vector-im/compound-web";

 import _RightPanel from "../../../src/components/structures/RightPanel";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
@@ -122,6 +123,7 @@ describe("RightPanel", () => {
                resizeNotifier={resizeNotifier}
                permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
            />,
+            { wrapper: TooltipProvider },
        );
        // Wait for RPS room 1 updates to fire
        const rpsUpdated = waitForRpsUpdate();
--- a/test/components/structures/RoomView-test.tsx
+++ b/test/components/structures/RoomView-test.tsx
@@ -32,6 +32,7 @@ import {
 import { MEGOLM_ALGORITHM } from "matrix-js-sdk/src/crypto/olmlib";
 import { fireEvent, render, screen, RenderResult, waitForElementToBeRemoved, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { TooltipProvider } from "@vector-im/compound-web";

 import {
    stubClient,
@@ -143,6 +144,7 @@ describe("RoomView", () => {
                    wrappedRef={ref as any}
                />
            </SDKContext.Provider>,
+            { wrapper: TooltipProvider },
        );
        await flushPromises();
        return roomView;
@@ -180,6 +182,7 @@ describe("RoomView", () => {
                    onRegistered={jest.fn()}
                />
            </SDKContext.Provider>,
+            { wrapper: TooltipProvider },
        );
        await flushPromises();
        return roomView;
--- a/test/components/structures/SpaceHierarchy-test.tsx
+++ b/test/components/structures/SpaceHierarchy-test.tsx
@@ -19,6 +19,7 @@ import { mocked } from "jest-mock";
 import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
 import { MatrixClient, Room, HierarchyRoom } from "matrix-js-sdk/src/matrix";
 import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
+import { TooltipProvider } from "@vector-im/compound-web";

 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import { mkStubRoom, stubClient } from "../../test-utils";
@@ -262,7 +263,9 @@ describe("SpaceHierarchy", () => {
        };
        const getComponent = (props = {}): React.ReactElement => (
            <MatrixClientContext.Provider value={client}>
-                <SpaceHierarchy {...defaultProps} {...props} />;
+                <TooltipProvider>
+                    <SpaceHierarchy {...defaultProps} {...props} />
+                </TooltipProvider>
            </MatrixClientContext.Provider>
        );

--- a/test/components/structures/ThreadPanel-test.tsx
+++ b/test/components/structures/ThreadPanel-test.tsx
@@ -25,6 +25,7 @@ import {
    FeatureSupport,
    Thread,
 } from "matrix-js-sdk/src/matrix";
+import { TooltipProvider } from "@vector-im/compound-web";

 import ThreadPanel, { ThreadFilterType, ThreadPanelHeader } from "../../../src/components/structures/ThreadPanel";
 import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
@@ -58,6 +59,7 @@ describe("ThreadPanel", () => {
                    filterOption={ThreadFilterType.My}
                    setFilterOption={() => undefined}
                />,
+                { wrapper: TooltipProvider },
            );
            expect(asFragment()).toMatchSnapshot();
        });
@@ -69,6 +71,7 @@ describe("ThreadPanel", () => {
                    filterOption={ThreadFilterType.All}
                    setFilterOption={() => undefined}
                />,
+                { wrapper: TooltipProvider },
            );
            const found = container.querySelector(".mx_ThreadPanel_dropdown");
            expect(found).toBeTruthy();
@@ -84,6 +87,7 @@ describe("ThreadPanel", () => {
                    filterOption={ThreadFilterType.All}
                    setFilterOption={() => undefined}
                />,
+                { wrapper: TooltipProvider },
            );
            fireEvent.click(container.querySelector(".mx_ThreadPanel_dropdown")!);
            const found = screen.queryAllByRole("menuitemradio");
@@ -207,7 +211,7 @@ describe("ThreadPanel", () => {
            myThreads!.addLiveEvent(ownThread.rootEvent);

            let events: EventData[] = [];
-            const renderResult = render(<TestThreadPanel />);
+            const renderResult = render(<TestThreadPanel />, { wrapper: TooltipProvider });
            await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy());
            await waitFor(() => {
                events = findEvents(renderResult.container);
@@ -253,7 +257,7 @@ describe("ThreadPanel", () => {
            allThreads!.addLiveEvent(otherThread.rootEvent);

            let events: EventData[] = [];
-            const renderResult = render(<TestThreadPanel />);
+            const renderResult = render(<TestThreadPanel />, { wrapper: TooltipProvider });
            await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy());
            await waitFor(() => {
                events = findEvents(renderResult.container);
--- a/test/components/structures/TimelinePanel-test.tsx
+++ b/test/components/structures/TimelinePanel-test.tsx
@@ -38,6 +38,7 @@ import {
 import React, { createRef } from "react";
 import { Mocked, mocked } from "jest-mock";
 import { forEachRight } from "lodash";
+import { TooltipProvider } from "@vector-im/compound-web";

 import TimelinePanel from "../../../src/components/structures/TimelinePanel";
 import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
@@ -210,6 +211,7 @@ describe("TimelinePanel", () => {
                    manageReadReceipts={true}
                    ref={ref}
                />,
+                { wrapper: TooltipProvider },
            );
            await flushPromises();
            timelinePanel = ref.current!;
@@ -389,7 +391,7 @@ describe("TimelinePanel", () => {
            onEventScrolledIntoView: jest.fn(),
        };

-        const { rerender } = render(<TimelinePanel {...props} />);
+        const { rerender } = render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });
        expect(props.onEventScrolledIntoView).toHaveBeenCalledWith(undefined);
        props.eventId = events[1].getId();
        rerender(<TimelinePanel {...props} />);
@@ -406,7 +408,9 @@ describe("TimelinePanel", () => {
        setupPagination(client, timeline, eventsPage1, null);

        await withScrollPanelMountSpy(async (mountSpy) => {
-            const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />);
+            const { container } = render(<TimelinePanel {...getProps(room, events)} timelineSet={timelineSet} />, {
+                wrapper: TooltipProvider,
+            });

            await waitFor(() => expectEvents(container, [events[1]]));

@@ -423,7 +427,7 @@ describe("TimelinePanel", () => {
        const [, room, events] = setupTestData();

        await withScrollPanelMountSpy(async (mountSpy) => {
-            const { container } = render(<TimelinePanel {...getProps(room, events)} />);
+            const { container } = render(<TimelinePanel {...getProps(room, events)} />, { wrapper: TooltipProvider });

            await waitFor(() => expectEvents(container, [events[0], events[1]]));

@@ -450,7 +454,7 @@ describe("TimelinePanel", () => {

            const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();

-            render(<TimelinePanel {...props} />);
+            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });

            const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
            const data = { timeline: otherTimeline, liveEvent: true };
@@ -466,7 +470,7 @@ describe("TimelinePanel", () => {

            const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();

-            render(<TimelinePanel {...props} />);
+            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });

            const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
            const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
@@ -482,7 +486,7 @@ describe("TimelinePanel", () => {

            const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();

-            render(<TimelinePanel {...props} />);
+            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });

            const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
            const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: false };
@@ -499,7 +503,7 @@ describe("TimelinePanel", () => {

            const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();

-            render(<TimelinePanel {...props} />);
+            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });

            const event = new MatrixEvent({ type: RoomEvent.Timeline, origin_server_ts: 0 });
            const data = { timeline: props.timelineSet.getLiveTimeline(), liveEvent: true };
@@ -522,7 +526,7 @@ describe("TimelinePanel", () => {

            const paginateSpy = jest.spyOn(TimelineWindow.prototype, "paginate").mockClear();

-            render(<TimelinePanel {...props} />);
+            render(<TimelinePanel {...props} />, { wrapper: TooltipProvider });

            await flushPromises();

@@ -563,6 +567,7 @@ describe("TimelinePanel", () => {
                    overlayTimelineSet={overlayTimelineSet}
                    overlayTimelineSetFilter={isCallEvent}
                />,
+                { wrapper: TooltipProvider },
            );
            await waitFor(() =>
                expectEvents(container, [
@@ -602,6 +607,7 @@ describe("TimelinePanel", () => {

            const { container } = render(
                <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
+                { wrapper: TooltipProvider },
            );

            await waitFor(() =>
@@ -633,6 +639,7 @@ describe("TimelinePanel", () => {

            const { container } = render(
                <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
+                { wrapper: TooltipProvider },
            );

            await waitFor(() =>
@@ -664,6 +671,7 @@ describe("TimelinePanel", () => {

            const { container } = render(
                <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
+                { wrapper: TooltipProvider },
            );

            await waitFor(() =>
@@ -698,6 +706,7 @@ describe("TimelinePanel", () => {
                        timelineSet={timelineSet}
                        overlayTimelineSet={overlayTimelineSet}
                    />,
+                    { wrapper: TooltipProvider },
                );

                await waitFor(() => expectEvents(container, [overlayEvents[0], events[0]]));
@@ -771,6 +780,7 @@ describe("TimelinePanel", () => {
            await withScrollPanelMountSpy(async (mountSpy) => {
                const { container } = render(
                    <TimelinePanel {...getProps(room, events)} overlayTimelineSet={overlayTimelineSet} />,
+                    { wrapper: TooltipProvider },
                );

                await waitFor(() =>
@@ -883,6 +893,7 @@ describe("TimelinePanel", () => {
                <MatrixClientContext.Provider value={client}>
                    <TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />
                </MatrixClientContext.Provider>,
+                { wrapper: TooltipProvider },
            );
            await dom.findByText("RootEvent");
            await dom.findByText("ReplyEvent1");
@@ -936,6 +947,7 @@ describe("TimelinePanel", () => {
                <MatrixClientContext.Provider value={client}>
                    <TimelinePanel timelineSet={allThreads} manageReadReceipts sendReadReceiptOnLoad />
                </MatrixClientContext.Provider>,
+                { wrapper: TooltipProvider },
            );
            await dom.findByText("RootEvent");
            await dom.findByText("ReplyEvent1");
@@ -1004,6 +1016,7 @@ describe("TimelinePanel", () => {
            <MatrixClientContext.Provider value={client}>
                <TimelinePanel timelineSet={timelineSet} manageReadReceipts={true} sendReadReceiptOnLoad={true} />
            </MatrixClientContext.Provider>,
+            { wrapper: TooltipProvider },
        );

        await waitFor(() => expect(screen.queryByRole("progressbar")).toBeNull());
--- a/test/components/structures/snapshots/MessagePanel-test.tsx.snap
+++ b/test/components/structures/snapshots/MessagePanel-test.tsx.snap
@@ -16,7 +16,6 @@ exports[`MessagePanel should handle large numbers of hidden events quickly 1`] =
      />
    </div>
  </div>
-  );
 </DocumentFragment>
 `;

@@ -119,7 +118,6 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
      </ol>
    </div>
  </div>
-  );
 </DocumentFragment>
 `;

@@ -139,6 +137,5 @@ exports[`MessagePanel should handle lots of room creation events quickly 1`] = `
      />
    </div>
  </div>
-  );
 </DocumentFragment>
 `;
--- a/test/components/structures/snapshots/SpaceHierarchy-test.tsx.snap
+++ b/test/components/structures/snapshots/SpaceHierarchy-test.tsx.snap
@@ -351,6 +351,5 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
      </div>
    </li>
  </ul>
-  ;
 </DocumentFragment>
 `;
--- a/test/components/structures/auth/ForgotPassword-test.tsx
+++ b/test/components/structures/auth/ForgotPassword-test.tsx
@@ -19,6 +19,7 @@ import { mocked } from "jest-mock";
 import { act, render, RenderResult, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MatrixClient, createClient } from "matrix-js-sdk/src/matrix";
+import { TooltipProvider } from "@vector-im/compound-web";

 import ForgotPassword from "../../../../src/components/structures/auth/ForgotPassword";
 import { ValidatedServerConfig } from "../../../../src/utils/ValidatedServerConfig";
@@ -102,6 +103,7 @@ describe("<ForgotPassword>", () => {
        beforeEach(() => {
            renderResult = render(
                <ForgotPassword serverConfig={serverConfig} onComplete={onComplete} onLoginClick={onLoginClick} />,
+                { wrapper: TooltipProvider },
            );
        });