nikrozman/element-web
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Avoid excessive re-render of room list and member list (#31131)

Browse Source 
* fix(list view): avoid re-create `onFocus` function at each render of the child items

* fix(room list): update `onFocus` signature

* fix(member list): update `onFocus` signature

* fix(room list): avoid re-render at the beginning and end of the scroll

* test(room list): remove scrolling test and props

* test(member list): update member tile view tests

* test(room list): update `ListView` focus test

* test(member list): add `onFocus` test for member list tile
This commit is contained in:
Florian Duros
2025-10-30 15:55:15 +01:00
committed by GitHub
parent f297282bf6
commit 299d7baf8b
9 changed files with 97 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
test/unit-tests/components/views/rooms/RoomListPanel/RoomListItemView-test.tsx
View File

@@ -129,7 +129,6 @@ describe("<RoomListItemView />", () => {
onFocus={jest.fn()}
roomIndex={0}
roomCount={1}
listIsScrolling={false}
/>,
);
@@ -193,26 +192,4 @@ describe("<RoomListItemView />", () => {
await user.keyboard("{Escape}");
expect(screen.queryByRole("menu")).toBeNull();
});
test("should not render context menu when list is scrolling", async () => {
const user = userEvent.setup();
mocked(useRoomListItemViewModel).mockReturnValue({
...defaultValue,
showContextMenu: true,
});
renderRoomListItem({
listIsScrolling: true,
});
const button = screen.getByRole("option", { name: `Open room ${room.name}` });
await user.pointer([{ target: button }, { keys: "[MouseRight]", target: button }]);
// Context menu should not appear when scrolling
expect(screen.queryByRole("menu")).toBeNull();
// But the room item itself should still be rendered
expect(button).toBeInTheDocument();
});
});

55
test/unit-tests/components/views/rooms/memberlist/MemberTileView-test.tsx
View File

@@ -17,13 +17,16 @@ import * as TestUtils from "../../../../../test-utils";
import { type RoomMember } from "../../../../../../src/models/rooms/RoomMember";
import {
getPending3PidInvites,
type MemberWithSeparator,
sdkRoomMemberToRoomMember,
} from "../../../../../../src/components/viewmodels/memberlist/MemberListViewModel";
import { RoomMemberTileView } from "../../../../../../src/components/views/rooms/MemberList/tiles/RoomMemberTileView";
import { ThreePidInviteTileView } from "../../../../../../src/components/views/rooms/MemberList/tiles/ThreePidInviteTileView";
import { type ThreePIDInvite } from "../../../../../../src/models/rooms/ThreePIDInvite";
describe("MemberTileView", () => {
describe("RoomMemberTileView", () => {
const item = {} as { member: RoomMember };
let matrixClient: MatrixClient;
let member: RoomMember;
@@ -32,11 +35,12 @@ describe("MemberTileView", () => {
mocked(matrixClient.isRoomEncrypted).mockReturnValue(true);
const sdkMember = new SdkRoomMember("roomId", matrixClient.getUserId()!);
member = sdkRoomMemberToRoomMember(sdkMember)!.member!;
item.member = member;
});
it("should not display an E2EIcon when the e2E status = normal", () => {
const { container } = render(
<RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
<RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
);
const e2eIcon = container.querySelector(".mx_E2EIconView");
expect(e2eIcon).toBeNull();
@@ -50,7 +54,7 @@ describe("MemberTileView", () => {
} as unknown as UserVerificationStatus);
const { container } = render(
<RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
<RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
);
await waitFor(async () => {
await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
@@ -73,7 +77,7 @@ describe("MemberTileView", () => {
} as DeviceVerificationStatus);
const { container } = render(
<RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
<RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
);
await waitFor(async () => {
@@ -88,33 +92,46 @@ describe("MemberTileView", () => {
it("renders user labels correctly", async () => {
member.powerLevel = 50;
const { container: container1 } = render(
<RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
<RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
);
expect(container1).toHaveTextContent("Moderator");
member.powerLevel = 100;
const { container: container2 } = render(
<RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
<RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
);
expect(container2).toHaveTextContent("Admin");
member.powerLevel = Infinity;
const { container: container3 } = render(
<RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
<RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
);
expect(container3).toHaveTextContent("Owner");
member.isInvite = true;
const { container: container4 } = render(
<RoomMemberTileView member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
<RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={jest.fn()} />,
);
expect(container4).toHaveTextContent("Invited");
});
it("should call onFocus handler when focused", async () => {
const user = userEvent.setup();
const onFocus = jest.fn();
render(<RoomMemberTileView item={item} member={member} index={0} memberCount={1} onFocus={onFocus} />);
const button = screen.getByRole("option", { name: member.userId });
await user.click(button);
expect(onFocus).toHaveBeenCalledWith(item, expect.anything());
});
});
describe("ThreePidInviteTileView", () => {
const member = {} as MemberWithSeparator;
let cli: MatrixClient;
let room: Room;
let threePidInvite: ThreePIDInvite;
beforeEach(() => {
cli = TestUtils.stubClient();
@@ -123,13 +140,14 @@ describe("MemberTileView", () => {
TestUtils.mkThirdPartyInviteEvent(cli.getSafeUserId(), "Foobar", room.roomId),
{ toStartOfTimeline: false, addToState: true },
);
threePidInvite = getPending3PidInvites(room)[0].threePidInvite!;
});
it("renders ThreePidInvite correctly", async () => {
const [{ threePidInvite }] = getPending3PidInvites(room);
const { container } = render(
<ThreePidInviteTileView
threePidInvite={threePidInvite!}
item={member}
threePidInvite={threePidInvite}
memberIndex={0}
memberCount={1}
onFocus={jest.fn()}
@@ -137,5 +155,24 @@ describe("MemberTileView", () => {
);
expect(container).toMatchSnapshot();
});
it("should call onFocus handler when focused", async () => {
const user = userEvent.setup();
const onFocus = jest.fn();
render(
<ThreePidInviteTileView
item={member}
threePidInvite={threePidInvite}
memberIndex={0}
memberCount={1}
onFocus={onFocus}
/>,
);
const button = screen.getByRole("option", { name: threePidInvite.event.getContent().display_name });
await user.click(button);
expect(onFocus).toHaveBeenCalledWith(member, expect.anything());
});
});
});

9
test/unit-tests/components/views/utils/ListView-test.tsx
View File

@@ -363,7 +363,12 @@ describe("ListView", () => {
const mockOnClick = jest.fn();
mockGetItemComponent.mockImplementation(
(index: number, item: TestItemWithSeparator, context: any, onFocus: (e: React.FocusEvent) => void) => {
(
index: number,
item: TestItemWithSeparator,
context: any,
onFocus: (item: TestItemWithSeparator, e: React.FocusEvent) => void,
) => {
const itemKey = typeof item === "string" ? item : item.id;
const isFocused = context.tabIndexKey === itemKey;
return (
@@ -372,7 +377,7 @@ describe("ListView", () => {
data-testid={`row-${index}`}
tabIndex={isFocused ? 0 : -1}
onClick={() => mockOnClick(item)}
onFocus={onFocus}
onFocus={(e) => onFocus(item, e)}
>
{item === SEPARATOR_ITEM ? "---" : (item as TestItem).name}
</div>