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

test(room list): wait for the row role to be removed, update a11y role and add tests to role observer

Browse Source
This commit is contained in:
Florian Duros
2025-03-06 09:42:07 +01:00
parent 61d01dd17b
commit d8151d6b01
2 changed files with 46 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx
View File

@@ -34,19 +34,38 @@ describe("<RoomList />", () => {
jest.spyOn(DMRoomMap.shared(), "getUserIdForRoomId").mockReturnValue(null);
});
it("should render a room list", () => {
const { asFragment } = render(<RoomList vm={vm} />);
async function renderList() {
const renderResult = render(<RoomList vm={vm} />);
// Wait for the row role to be removed
await waitFor(() => expect(screen.queryByRole("row")).toBeNull());
return renderResult;
}
it("should render a room list", async () => {
const { asFragment } = await renderList();
expect(asFragment()).toMatchSnapshot();
expect(screen.getByRole("listbox").getAttribute("aria-setsize")).toBe(`${vm.rooms.length}`);
});
it("should open the room", async () => {
const user = userEvent.setup();
render(<RoomList vm={vm} />);
await renderList();
await waitFor(async () => {
expect(screen.getByRole("gridcell", { name: "Open room room9" })).toBeVisible();
await user.click(screen.getByRole("gridcell", { name: "Open room room9" }));
expect(screen.getByRole("option", { name: "Open room room9" })).toBeVisible();
await user.click(screen.getByRole("option", { name: "Open room room9" }));
});
expect(vm.openRoom).toHaveBeenCalledWith(vm.rooms[9].roomId);
});
it("should remove the role attribute", async () => {
await renderList();
const rowElement = screen.getByRole("listbox").children.item(0)!;
expect(rowElement).not.toHaveAttribute("role");
rowElement.setAttribute("role", "row");
await waitFor(() => expect(rowElement).not.toHaveAttribute("role"));
});
});

34
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
View File

@@ -12,20 +12,21 @@ exports[`<RoomList /> should render a room list 1`] = `
<div
aria-label="Room list"
aria-readonly="true"
aria-setsize="10"
class="ReactVirtualized__Grid ReactVirtualized__List mx_RoomList_List"
role="grid"
role="listbox"
style="box-sizing: border-box; direction: ltr; height: 1500px; position: relative; width: 1500px; will-change: transform; overflow-x: hidden; overflow-y: hidden;"
tabindex="0"
>
<div
class="ReactVirtualized__Grid__innerScrollContainer"
role="row"
style="width: auto; height: 480px; max-width: 1500px; max-height: 480px; overflow: hidden; position: relative;"
>
<button
aria-label="Open room room0"
aria-selected="false"
class="mx_RoomListCell"
role="gridcell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 0px; width: 100%;"
type="button"
>
@@ -70,8 +71,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room1"
aria-selected="false"
class="mx_RoomListCell"
role="gridcell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 48px; width: 100%;"
type="button"
>
@@ -116,8 +118,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room2"
aria-selected="false"
class="mx_RoomListCell"
role="gridcell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 96px; width: 100%;"
type="button"
>
@@ -162,8 +165,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room3"
aria-selected="false"
class="mx_RoomListCell"
role="gridcell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 144px; width: 100%;"
type="button"
>
@@ -208,8 +212,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room4"
aria-selected="false"
class="mx_RoomListCell"
role="gridcell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 192px; width: 100%;"
type="button"
>
@@ -254,8 +259,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room5"
aria-selected="false"
class="mx_RoomListCell"
role="gridcell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 240px; width: 100%;"
type="button"
>
@@ -300,8 +306,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room6"
aria-selected="false"
class="mx_RoomListCell"
role="gridcell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 288px; width: 100%;"
type="button"
>
@@ -346,8 +353,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room7"
aria-selected="false"
class="mx_RoomListCell"
role="gridcell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 336px; width: 100%;"
type="button"
>
@@ -392,8 +400,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room8"
aria-selected="false"
class="mx_RoomListCell"
role="gridcell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 384px; width: 100%;"
type="button"
>
@@ -438,8 +447,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room9"
aria-selected="false"
class="mx_RoomListCell"
role="gridcell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 432px; width: 100%;"
type="button"
>