imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Upgrade to latest compound-web package (#84)

Browse source 
* 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>
This commit is contained in:
R Midhun Suresh 2024-10-14 21:41:58 +05:30 • committed by GitHub
parent 3bc0439fd2
commit 91e84f7951
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
389 changed files with 1261 additions and 1084 deletions
Download patch file Download diff file Expand all files Collapse all files

2
test/components/views/spaces/AddExistingToSpaceDialog-test.tsx
View file

@ -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 { mocked } from "jest-mock";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import React from "react";

2
test/components/views/spaces/QuickSettingsButton-test.tsx
View file

@ -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 { mocked } from "jest-mock";

2
test/components/views/spaces/QuickThemeSwitcher-test.tsx
View file

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

2
test/components/views/spaces/SpacePanel-test.tsx
View file

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

2
test/components/views/spaces/SpaceSettingsVisibilityTab-test.tsx
View file

@ -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 { randomString } from "matrix-js-sdk/src/randomstring";
import { act, fireEvent, render, RenderResult } from "@testing-library/react";
import { act, fireEvent, render, RenderResult } from "jest-matrix-react";
import { EventType, MatrixClient, Room, GuestAccess, HistoryVisibility, JoinRule } from "matrix-js-sdk/src/matrix";
import _SpaceSettingsVisibilityTab from "../../../../src/components/views/spaces/SpaceSettingsVisibilityTab";

2
test/components/views/spaces/SpaceTreeLevel-test.tsx
View file

@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { fireEvent, getByTestId, render } from "@testing-library/react";
import { fireEvent, getByTestId, render } from "jest-matrix-react";
import { mkRoom, stubClient } from "../../../test-utils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";

12
test/components/views/spaces/ThreadsActivityCentre-test.tsx
View file

@ -7,7 +7,7 @@
*/
import React, { ComponentProps } from "react";
import { getByText, render, screen } from "@testing-library/react";
import { getByText, render, screen } from "jest-matrix-react";
import userEvent from "@testing-library/user-event";
import { NotificationCountType, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
@ -29,12 +29,12 @@ describe("ThreadsActivityCentre", () => {
return screen.getByRole("menu");
};
const getTACDescription = () => {
return screen.getByText("Threads");
const getTACDescription = (container: ReturnType<typeof render>["container"]) => {
return container.querySelector(".mx_ThreadsActivityCentreButton_Text");
};
const renderTAC = (props?: ComponentProps<typeof ThreadsActivityCentre>) => {
render(
return render(
<MatrixClientContext.Provider value={cli}>
<ThreadsActivityCentre {...props} />
</MatrixClientContext.Provider>,
@ -130,9 +130,9 @@ describe("ThreadsActivityCentre", () => {
});
it("should render the threads activity centre button and the display label", async () => {
renderTAC({ displayButtonLabel: true });
const { container } = renderTAC({ displayButtonLabel: true });
expect(getTACButton()).toBeInTheDocument();
expect(getTACDescription()).toBeInTheDocument();
expect(getTACDescription(container)).toBeInTheDocument();
});
it("should render the threads activity centre menu when the button is clicked", async () => {

5
test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
View file

@ -229,11 +229,12 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
class="mx_ThreadsActivityCentre_container"
>
<button
aria-controls="floating-ui-39"
aria-describedby="floating-ui-39"
aria-controls="floating-ui-40"
aria-describedby="floating-ui-40"
aria-expanded="true"
aria-haspopup="dialog"
aria-label="Threads"
aria-labelledby="floating-ui-33"
class="_icon-button_bh2qc_17 mx_ThreadsActivityCentreButton"
role="button"
style="--cpd-icon-button-size: 32px;"

145
test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
View file

@ -26,7 +26,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
class="mx_ThreadsActivityCentre_rows"
>
<button
class="mx_ThreadsActivityCentreRow _item_1gwvj_17 _interactive_1gwvj_36"
class="mx_ThreadsActivityCentreRow _item_8j2l6_17 _interactive_8j2l6_35"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@ -34,7 +34,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
tabindex="-1"
>
<div
class="_icon_1gwvj_44"
class="_icon_8j2l6_43"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
@ -48,13 +48,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
</span>
</div>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_8j2l6_52"
>
This is a real highlight
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
class="_nav-hint_8j2l6_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@ -74,7 +74,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
</div>
</button>
<button
class="mx_ThreadsActivityCentreRow _item_1gwvj_17 _interactive_1gwvj_36"
class="mx_ThreadsActivityCentreRow _item_8j2l6_17 _interactive_8j2l6_35"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@ -82,7 +82,7 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
tabindex="-1"
>
<div
class="_icon_1gwvj_44"
class="_icon_8j2l6_43"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
@ -96,13 +96,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
</span>
</div>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_8j2l6_52"
>
A notification
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
class="_nav-hint_8j2l6_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@ -150,6 +150,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
aria-expanded="true"
aria-haspopup="menu"
aria-label="Threads"
aria-labelledby="floating-ui-42"
class="_icon-button_bh2qc_17 mx_ThreadsActivityCentreButton"
data-state="open"
id="radix-2"
@ -178,6 +179,47 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
</button>
</div>
</div>
<div
aria-hidden="true"
data-aria-hidden="true"
data-floating-ui-portal=""
id="floating-ui-46"
>
<div
class="_tooltip_1pslb_17 _invisible_1pslb_30"
style="position: absolute; left: 0px; top: 0px; transform: translate(6px, 5px);"
tabindex="-1"
>
<svg
aria-hidden="true"
class="_arrow_1pslb_42"
height="10"
style="position: absolute; pointer-events: none; right: calc(100% - 0px); transform: rotate(90deg); top: -1px;"
viewBox="0 0 10 10"
width="10"
>
<path
d="M0,0 H10 L5,6 Q5,6 5,6 Z"
stroke="none"
/>
<clippath
id="floating-ui-47"
>
<rect
height="10"
width="10"
x="0"
y="0"
/>
</clippath>
</svg>
<span
id="floating-ui-42"
>
Threads
</span>
</div>
</div>
<div
data-radix-popper-content-wrapper=""
dir="ltr"
@ -285,7 +327,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
class="mx_ThreadsActivityCentre_rows"
>
<button
class="mx_ThreadsActivityCentreRow _item_1gwvj_17 _interactive_1gwvj_36"
class="mx_ThreadsActivityCentreRow _item_8j2l6_17 _interactive_8j2l6_35"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@ -293,7 +335,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
tabindex="-1"
>
<div
class="_icon_1gwvj_44"
class="_icon_8j2l6_43"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
@ -307,13 +349,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
</span>
</div>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_8j2l6_52"
>
This is a third real highlight
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
class="_nav-hint_8j2l6_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@ -333,7 +375,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
</div>
</button>
<button
class="mx_ThreadsActivityCentreRow _item_1gwvj_17 _interactive_1gwvj_36"
class="mx_ThreadsActivityCentreRow _item_8j2l6_17 _interactive_8j2l6_35"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@ -341,7 +383,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
tabindex="-1"
>
<div
class="_icon_1gwvj_44"
class="_icon_8j2l6_43"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
@ -355,13 +397,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
</span>
</div>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_8j2l6_52"
>
This is a real highlight
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
class="_nav-hint_8j2l6_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@ -381,7 +423,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
</div>
</button>
<button
class="mx_ThreadsActivityCentreRow _item_1gwvj_17 _interactive_1gwvj_36"
class="mx_ThreadsActivityCentreRow _item_8j2l6_17 _interactive_8j2l6_35"
data-kind="primary"
data-orientation="vertical"
data-radix-collection-item=""
@ -389,7 +431,7 @@ exports[`ThreadsActivityCentre should order the room with the same notification
tabindex="-1"
>
<div
class="_icon_1gwvj_44"
class="_icon_8j2l6_43"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
@ -403,13 +445,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
</span>
</div>
<span
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1gwvj_53"
class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_8j2l6_52"
>
This is a second real highlight
</span>
<svg
aria-hidden="true"
class="_nav-hint_1gwvj_60"
class="_nav-hint_8j2l6_59"
fill="currentColor"
height="24"
viewBox="8 0 8 24"
@ -441,11 +483,12 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
class="mx_ThreadsActivityCentre_container"
>
<button
aria-controls="floating-ui-6"
aria-describedby="floating-ui-6"
aria-controls="floating-ui-8"
aria-describedby="floating-ui-8"
aria-expanded="true"
aria-haspopup="dialog"
aria-label="Threads"
aria-labelledby="floating-ui-10"
class="_icon-button_bh2qc_17 mx_ThreadsActivityCentreButton"
role="button"
style="--cpd-icon-button-size: 32px;"
@ -477,7 +520,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
tabindex="0"
/>
<span
aria-owns="floating-ui-12"
aria-owns="floating-ui-15"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
/>
<span
@ -490,8 +533,48 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
</div>
</div>
<div
data-floating-ui-inert=""
data-floating-ui-portal=""
id="floating-ui-12"
id="floating-ui-14"
>
<div
class="_tooltip_1pslb_17 _invisible_1pslb_30"
style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
tabindex="-1"
>
<svg
aria-hidden="true"
class="_arrow_1pslb_42"
height="10"
style="position: absolute; pointer-events: none; right: calc(100% - 0px); transform: rotate(90deg);"
viewBox="0 0 10 10"
width="10"
>
<path
d="M0,0 H10 L5,6 Q5,6 5,6 Z"
stroke="none"
/>
<clippath
id="floating-ui-16"
>
<rect
height="10"
width="10"
x="0"
y="0"
/>
</clippath>
</svg>
<span
id="floating-ui-10"
>
Threads
</span>
</div>
</div>
<div
data-floating-ui-portal=""
id="floating-ui-15"
>
<span
data-floating-ui-focus-guard=""
@ -502,10 +585,10 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
tabindex="0"
/>
<div
aria-describedby="floating-ui-5"
aria-labelledby="floating-ui-4"
aria-describedby="floating-ui-7"
aria-labelledby="floating-ui-6"
class="_content_1oa1y_17"
id="floating-ui-6"
id="floating-ui-8"
role="dialog"
style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 0px);"
tabindex="-1"
@ -523,7 +606,7 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
stroke="none"
/>
<clippath
id="floating-ui-13"
id="floating-ui-17"
>
<rect
height="20"
@ -535,18 +618,18 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
</svg>
<h3
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 _header_1oa1y_46"
id="floating-ui-4"
id="floating-ui-6"
>
Threads Activity Centre
</h3>
<span
class="_typography_yh5dq_162 _font-body-sm-regular_yh5dq_40 _description_1oa1y_52"
id="floating-ui-5"
id="floating-ui-7"
>
Threads notifications have moved, find them here from now on.
</span>
<button
class="_button_zt6rp_17 _button_1oa1y_57"
class="_button_i91xf_17 _button_1oa1y_57"
data-kind="secondary"
data-size="sm"
role="button"

2
test/components/views/spaces/useUnreadThreadRooms-test.tsx
View file

@ -15,7 +15,7 @@ import {
PendingEventOrdering,
Room,
} from "matrix-js-sdk/src/matrix";
import { act } from "@testing-library/react";
import { act } from "jest-matrix-react";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import { stubClient } from "../../../test-utils";