Upgrade to latest compound-web package (#84)

* Upgrade to latest compound-web package

* Use a custom render function for jest tests

This way we don't need to manually wrap our components with
<TooltipProvider>

* Pin wrap-ansi to fix broken yarn install

* Add playwright helper to find tooltip from element

and use it in the failing test

* Exclude floating-ui divs/spans from axe testing

This is rendered outside .MatrixChat by compound and contains all the
tooltips.

* Wrap outermost components with TooltipProvider

* Remove onChange and use onSelect for toggle

* Fix jest tests and update snapshots

* Use vector-im/matrix-wysiwig

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

test/components/views/elements/AccessibleButton-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { fireEvent, getByText, render } from "@testing-library/react";
+import { fireEvent, getByText, render } from "jest-matrix-react";
 import React from "react";
 
 import AccessibleButton from "../../../../src/components/views/elements/AccessibleButton";

test/components/views/elements/AppTile-test.tsx

@@ -11,7 +11,7 @@ import { jest } from "@jest/globals";
 import { Room, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { ClientWidgetApi, IWidget, MatrixWidgetType } from "matrix-widget-api";
 import { Optional } from "matrix-events-sdk";
-import { act, render, RenderResult } from "@testing-library/react";
+import { act, render, RenderResult } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { SpiedFunction } from "jest-mock";
 import {

test/components/views/elements/DesktopCapturerSourcePicker-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import DesktopCapturerSourcePicker from "../../../../src/components/views/elements/DesktopCapturerSourcePicker";

test/components/views/elements/EffectsOverlay-test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from "react";
-import { render, waitFor } from "@testing-library/react";
+import { render, waitFor } from "jest-matrix-react";
 
 import dis from "../../../../src/dispatcher/dispatcher";
 import EffectsOverlay from "../../../../src/components/views/elements/EffectsOverlay.tsx";

test/components/views/elements/EventListSummary-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { ComponentProps } from "react";
-import { render, RenderResult } from "@testing-library/react";
+import { render, RenderResult } from "jest-matrix-react";
 import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
 import { KnownMembership, Membership } from "matrix-js-sdk/src/types";
 

test/components/views/elements/ExternalLink-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import React from "react";
 
 import ExternalLink from "../../../../src/components/views/elements/ExternalLink";

test/components/views/elements/FacePile-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import React from "react";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 

test/components/views/elements/Field-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "jest-matrix-react";
 
 import Field from "../../../../src/components/views/elements/Field";
 

test/components/views/elements/FilterDropdown-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { act, fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "jest-matrix-react";
 import React from "react";
 
 import { FilterDropdown } from "../../../../src/components/views/elements/FilterDropdown";

test/components/views/elements/FilterTabGroup-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render } from "jest-matrix-react";
 
 import { FilterTabGroup } from "../../../../src/components/views/elements/FilterTabGroup";
 

test/components/views/elements/ImageView-test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 
 import ImageView from "../../../../src/components/views/elements/ImageView";
 

test/components/views/elements/InfoTooltip-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import userEvent from "@testing-library/user-event";
-import { render, waitFor } from "@testing-library/react";
+import { render, waitFor } from "jest-matrix-react";
 
 import InfoTooltip from "../../../../src/components/views/elements/InfoTooltip";
 

test/components/views/elements/LabelledCheckbox-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "jest-matrix-react";
 import React from "react";
 
 import LabelledCheckbox from "../../../../src/components/views/elements/LabelledCheckbox";

test/components/views/elements/LearnMore-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render } from "jest-matrix-react";
 
 import LearnMore from "../../../../src/components/views/elements/LearnMore";
 import Modal from "../../../../src/Modal";

test/components/views/elements/Pill-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { act, render, RenderResult, screen } from "@testing-library/react";
+import { act, render, RenderResult, screen } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { mocked, Mocked } from "jest-mock";
 import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";

test/components/views/elements/PollCreateDialog-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, RenderResult } from "@testing-library/react";
+import { fireEvent, render, RenderResult } from "jest-matrix-react";
 import {
     Room,
     MatrixEvent,

test/components/views/elements/PowerSelector-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "jest-matrix-react";
 import { defer } from "matrix-js-sdk/src/utils";
 
 import PowerSelector from "../../../../src/components/views/elements/PowerSelector";

test/components/views/elements/ProgressBar-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { act, render } from "@testing-library/react";
+import { act, render } from "jest-matrix-react";
 
 import ProgressBar from "../../../../src/components/views/elements/ProgressBar";
 

test/components/views/elements/QRCode-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render, waitFor, cleanup } from "@testing-library/react";
+import { render, waitFor, cleanup } from "jest-matrix-react";
 import React from "react";
 
 import QRCode from "../../../../src/components/views/elements/QRCode";

test/components/views/elements/RoomFacePile-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import React from "react";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 

test/components/views/elements/RoomTopic-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import { mkEvent, stubClient } from "../../../test-utils";

test/components/views/elements/SearchWarning-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import React from "react";
 
 import SdkConfig from "../../../../src/SdkConfig";

test/components/views/elements/SpellCheckLanguagesDropdown-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, screen, waitForElementToBeRemoved } from "@testing-library/react";
+import { render, screen, waitForElementToBeRemoved } from "jest-matrix-react";
 
 import SpellCheckLanguagesDropdown from "../../../../src/components/views/elements/SpellCheckLanguagesDropdown";
 import PlatformPeg from "../../../../src/PlatformPeg";

test/components/views/elements/StyledRadioGroup-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, RenderResult } from "@testing-library/react";
+import { fireEvent, render, RenderResult } from "jest-matrix-react";
 
 import StyledRadioGroup from "../../../../src/components/views/elements/StyledRadioGroup";
 

test/components/views/elements/SyntaxHighlight-test.tsx

@@ -5,7 +5,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 // Please see LICENSE files in the repository root for full details.
 
-import { render, waitFor } from "@testing-library/react";
+import { render, waitFor } from "jest-matrix-react";
 import hljs, { type HighlightOptions } from "highlight.js";
 import React from "react";
 

test/components/views/elements/__snapshots__/AppTile-test.tsx.snap

@@ -30,6 +30,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
           />
         </div>
         <button
+          aria-labelledby="floating-ui-1"
           class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
           data-testid="base-card-close-button"
           role="button"
@@ -301,6 +302,8 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
             <span>
               Using this widget may share data 
               <div
+                aria-describedby="floating-ui-87"
+                aria-labelledby="floating-ui-86"
                 class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
               >
                 <div

test/components/views/elements/__snapshots__/FacePile-test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`<FacePile /> renders with a tooltip 1`] = `
 <DocumentFragment>
   <div
+    aria-labelledby="floating-ui-1"
     class="mx_AccessibleButton mx_FacePile"
     role="button"
     tabindex="0"

test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap

@@ -3,6 +3,8 @@
 exports[`<RoomFacePile /> renders 1`] = `
 <DocumentFragment>
   <div
+    aria-describedby="floating-ui-2"
+    aria-labelledby="floating-ui-1"
     class="mx_AccessibleButton mx_FacePile"
     role="button"
     tabindex="0"

test/components/views/elements/crypto/VerificationQRCode-test.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import { cleanup, render, waitFor } from "@testing-library/react";
+import { cleanup, render, waitFor } from "jest-matrix-react";
 import React from "react";
 
 import VerificationQRCode from "../../../../../src/components/views/elements/crypto/VerificationQRCode";