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/messages/CallEvent-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, screen, act, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { render, screen, act, cleanup, fireEvent, waitFor } from "jest-matrix-react";
 import { mocked, Mocked } from "jest-mock";
 import { Room, RoomStateEvent, MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/matrix";
 import { ClientWidgetApi, Widget } from "matrix-widget-api";

test/components/views/messages/DateSeparator-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "jest-matrix-react";
 import { TimestampToEventResponse, ConnectionError, HTTPError, MatrixError } from "matrix-js-sdk/src/matrix";
 
 import dispatcher from "../../../../src/dispatcher/dispatcher";

test/components/views/messages/DecryptionFailureBody-test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { mkDecryptionFailureMatrixEvent } from "matrix-js-sdk/src/testing";
 import { DecryptionFailureCode } from "matrix-js-sdk/src/crypto-api";

test/components/views/messages/DownloadActionButton-test.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { mocked } from "jest-mock";
 import fetchMockJest from "fetch-mock-jest";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "jest-matrix-react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { stubClient } from "../../../test-utils";

test/components/views/messages/EncryptionEvent-test.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { mocked } from "jest-mock";
 import { MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 
 import EncryptionEvent from "../../../../src/components/views/messages/EncryptionEvent";
 import { createTestClient, mkMessage } from "../../../test-utils";

test/components/views/messages/JumpToDatePicker-test.tsx

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

test/components/views/messages/LegacyCallEvent-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 { CallErrorCode, CallState } from "matrix-js-sdk/src/webrtc/call";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 

test/components/views/messages/MBeaconBody-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { ComponentProps } from "react";
-import { act, fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "jest-matrix-react";
 import * as maplibregl from "maplibre-gl";
 import {
     BeaconEvent,

test/components/views/messages/MImageBody-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, waitForElementToBeRemoved } from "@testing-library/react";
+import { fireEvent, render, screen, waitForElementToBeRemoved } from "jest-matrix-react";
 import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import fetchMock from "fetch-mock-jest";
 import encrypt from "matrix-encrypt-attachment";

test/components/views/messages/MKeyVerificationRequest-test.tsx

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

test/components/views/messages/MLocationBody-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, waitFor } from "@testing-library/react";
+import { fireEvent, render, waitFor } from "jest-matrix-react";
 import { LocationAssetType, ClientEvent, RoomMember, SyncState } from "matrix-js-sdk/src/matrix";
 import * as maplibregl from "maplibre-gl";
 import { logger } from "matrix-js-sdk/src/logger";

test/components/views/messages/MPollBody-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 {
     MatrixEvent,
     Relations,

test/components/views/messages/MPollEndBody-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, waitFor } from "@testing-library/react";
+import { render, waitFor } from "jest-matrix-react";
 import { EventTimeline, MatrixEvent, Room, M_TEXT } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 

test/components/views/messages/MStickerBody-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 { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import fetchMock from "fetch-mock-jest";
 import userEvent from "@testing-library/user-event";

test/components/views/messages/MVideoBody-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { EventType, getHttpUriForMxc, IContent, MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { render, RenderResult } from "@testing-library/react";
+import { render, RenderResult } from "jest-matrix-react";
 import fetchMock from "fetch-mock-jest";
 
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";

test/components/views/messages/MessageActionBar-test.tsx

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

test/components/views/messages/MessageEvent-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, RenderResult } from "@testing-library/react";
+import { render, RenderResult } from "jest-matrix-react";
 import { MatrixClient, MatrixEvent, EventType, Room, MsgType } from "matrix-js-sdk/src/matrix";
 import fetchMock from "fetch-mock-jest";
 import fs from "fs";

test/components/views/messages/MessageTimestamp-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 MessageTimestamp from "../../../../src/components/views/messages/MessageTimestamp";

test/components/views/messages/PinnedMessageBadge-test.tsx

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

test/components/views/messages/ReactionsRowButton-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { IContent, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { getMockClientWithEventEmitter } from "../../../test-utils";

test/components/views/messages/RoomPredecessorTile-test.tsx

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

test/components/views/messages/TextualBody-test.tsx

@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { mocked, MockedObject } from "jest-mock";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";
 
 import { getMockClientWithEventEmitter, mkEvent, mkMessage, mkStubRoom } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";

test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap

@@ -34,6 +34,7 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
     class="mx_MLocationBody"
   >
     <div
+      aria-labelledby="floating-ui-18"
       class="mx_MLocationBody_map"
     >
       <div
@@ -66,6 +67,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
     class="mx_MLocationBody"
   >
     <div
+      aria-labelledby="floating-ui-30"
       class="mx_MLocationBody_map"
     >
       <div

test/components/views/messages/shared/MediaProcessingError-test.tsx

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