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/dialogs/AccessSecretStorageDialog-test.tsx

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

test/components/views/dialogs/AppDownloadDialog-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 { AppDownloadDialog } from "../../../../src/components/views/dialogs/AppDownloadDialog";
 import SdkConfig, { ConfigOptions } from "../../../../src/SdkConfig";

test/components/views/dialogs/AskInviteAnywayDialog-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 { getByText, render, RenderResult } from "@testing-library/react";
+import { getByText, render, RenderResult } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 

test/components/views/dialogs/ChangelogDialog-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import fetchMock from "fetch-mock-jest";
-import { render, screen, waitForElementToBeRemoved } from "@testing-library/react";
+import { render, screen, waitForElementToBeRemoved } from "jest-matrix-react";
 
 import ChangelogDialog from "../../../../src/components/views/dialogs/ChangelogDialog";
 

test/components/views/dialogs/ConfirmRedactDialog-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { Feature, ServerSupport } from "matrix-js-sdk/src/feature";
 import { MatrixClient, MatrixEvent, RelationType } from "matrix-js-sdk/src/matrix";
-import { screen } from "@testing-library/react";
+import { screen } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 
 import { flushPromises, mkEvent, stubClient } from "../../../test-utils";

test/components/views/dialogs/ConfirmUserActionDialog-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 { KnownMembership } from "matrix-js-sdk/src/types";
 
 import ConfirmUserActionDialog from "../../../../src/components/views/dialogs/ConfirmUserActionDialog";

test/components/views/dialogs/CreateRoomDialog-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, within } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "jest-matrix-react";
 import { JoinRule, MatrixError, Preset, Visibility } from "matrix-js-sdk/src/matrix";
 
 import CreateRoomDialog from "../../../../src/components/views/dialogs/CreateRoomDialog";

test/components/views/dialogs/DevtoolsDialog-test.tsx

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

test/components/views/dialogs/ExportDialog-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, waitFor } from "@testing-library/react";
+import { fireEvent, render, RenderResult, waitFor } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import { Room } from "matrix-js-sdk/src/matrix";
 

test/components/views/dialogs/FeedbackDialog-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 SdkConfig from "../../../../src/SdkConfig";
 import FeedbackDialog from "../../../../src/components/views/dialogs/FeedbackDialog";

test/components/views/dialogs/ForwardDialog-test.tsx

@@ -16,7 +16,7 @@ import {
     M_TIMESTAMP,
     M_TEXT,
 } from "matrix-js-sdk/src/matrix";
-import { act, fireEvent, getByTestId, render, RenderResult, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, getByTestId, render, RenderResult, screen, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { sleep } from "matrix-js-sdk/src/utils";
 

test/components/views/dialogs/IncomingSasDialog-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, render } from "@testing-library/react";
+import { act, render } from "jest-matrix-react";
 import React from "react";
 import { Mocked } from "jest-mock";
 import {

test/components/views/dialogs/InteractiveAuthDialog-test.tsx

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

test/components/views/dialogs/InviteDialog-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 userEvent from "@testing-library/user-event";
 import { RoomType, MatrixClient, MatrixError, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";

test/components/views/dialogs/LogoutDialog-test.tsx

@@ -10,7 +10,7 @@ import React from "react";
 import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { CryptoApi, KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
-import { render, RenderResult } from "@testing-library/react";
+import { render, RenderResult } from "jest-matrix-react";
 
 import { filterConsole, getMockClientWithEventEmitter, mockClientMethodsCrypto } from "../../../test-utils";
 import LogoutDialog from "../../../../src/components/views/dialogs/LogoutDialog";

test/components/views/dialogs/ManageRestrictedJoinRuleDialog-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 { Room } from "matrix-js-sdk/src/matrix";
 
 import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";

test/components/views/dialogs/ManualDeviceKeyVerificationDialog-test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 import { Device, MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { stubClient } from "../../../test-utils";

test/components/views/dialogs/MessageEditHistoryDialog-test.tsx

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

test/components/views/dialogs/RoomSettingsDialog-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, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "jest-matrix-react";
 import {
     EventTimeline,
     EventType,

test/components/views/dialogs/ServerPickerDialog-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 fetchMock from "fetch-mock-jest";
 
 import ServerPickerDialog from "../../../../src/components/views/dialogs/ServerPickerDialog";

test/components/views/dialogs/ShareDialog-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { EventTimeline, MatrixEvent, Room, RoomMember } from "matrix-js-sdk/src/matrix";
-import { render, RenderOptions } from "@testing-library/react";
+import { render, RenderOptions } from "jest-matrix-react";
 
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import SettingsStore from "../../../../src/settings/SettingsStore";

test/components/views/dialogs/SpotlightDialog-test.tsx

@@ -19,7 +19,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import sanitizeHtml from "sanitize-html";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "jest-matrix-react";
 
 import SpotlightDialog from "../../../../src/components/views/dialogs/spotlight/SpotlightDialog";
 import { Filter } from "../../../../src/components/views/dialogs/spotlight/Filter";

test/components/views/dialogs/UnpinAllDialog-test.tsx

@@ -7,7 +7,7 @@
  */
 
 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 { EventType } from "matrix-js-sdk/src/matrix";
 

test/components/views/dialogs/UserSettingsDialog-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { ReactElement } from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen } from "jest-matrix-react";
 import { mocked, MockedObject } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 

test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap

@@ -50,6 +50,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
           class="mx_StyledRadioButton_content"
         >
           <span
+            aria-labelledby="floating-ui-1"
             class="mx_Login_underlinedServerName"
             tabindex="0"
           >

test/components/views/dialogs/__snapshots__/UnpinAllDialog-test.tsx.snap

@@ -32,7 +32,7 @@ exports[`<UnpinAllDialog /> should render 1`] = `
       class="mx_UnpinAllDialog_buttons"
     >
       <button
-        class="_button_zt6rp_17 _destructive_zt6rp_111"
+        class="_button_i91xf_17 _destructive_i91xf_116"
         data-kind="primary"
         data-size="lg"
         role="button"
@@ -41,7 +41,7 @@ exports[`<UnpinAllDialog /> should render 1`] = `
         Continue
       </button>
       <button
-        class="_button_zt6rp_17"
+        class="_button_i91xf_17"
         data-kind="tertiary"
         data-size="lg"
         role="button"

test/components/views/dialogs/devtools/Event-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 { Room, PendingEventOrdering } from "matrix-js-sdk/src/matrix";
 
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";

test/components/views/dialogs/devtools/RoomNotifications-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 { Room, PendingEventOrdering } from "matrix-js-sdk/src/matrix";
 
 import RoomNotifications from "../../../../../src/components/views/dialogs/devtools/RoomNotifications";

test/components/views/dialogs/security/CreateKeyBackupDialog-test.tsx

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

test/components/views/dialogs/security/CreateSecretStorageDialog-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, RenderResult, screen } from "@testing-library/react";
+import { render, RenderResult, screen } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { mocked, MockedObject } from "jest-mock";

test/components/views/dialogs/security/ExportE2eKeysDialog-test.tsx

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

test/components/views/dialogs/security/ImportE2eKeysDialog-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 userEvent from "@testing-library/user-event";
 import { Crypto } from "matrix-js-sdk/src/matrix";
 

test/components/views/dialogs/security/RestoreKeyBackupDialog-test.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from "react";
-import { screen, render, waitFor } from "@testing-library/react";
+import { screen, render, waitFor } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 // Needed to be able to mock decodeRecoveryKey
 // eslint-disable-next-line no-restricted-imports

test/components/views/dialogs/spotlight/PublicRoomResultDetails-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 { IPublicRoomsChunkRoom } from "matrix-js-sdk/src/matrix";
 
 import { PublicRoomResultDetails } from "../../../../../src/components/views/dialogs/spotlight/PublicRoomResultDetails";

test/components/views/dialogs/spotlight/RoomResultContextMenus-test.tsx

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