272 lines
12 KiB
TypeScript
272 lines
12 KiB
TypeScript
/*
|
|
* Copyright 2026 Element Creations Ltd.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import React from "react";
|
|
import { render, screen, fireEvent, waitFor } from "@test-utils";
|
|
import { VirtuosoMockContext } from "react-virtuoso";
|
|
import { composeStories } from "@storybook/react-vite";
|
|
import { describe, it, expect, beforeEach } from "vitest";
|
|
import userEvent from "@testing-library/user-event";
|
|
|
|
import * as stories from "./VirtualizedRoomListView.stories";
|
|
import { KEYBOARD_DRAG_OFFSET } from "./VirtualizedRoomListView";
|
|
|
|
const { Default, Sections } = composeStories(stories);
|
|
|
|
const renderWithMockContext = (component: React.ReactElement): ReturnType<typeof render> => {
|
|
return render(component, {
|
|
wrapper: ({ children }) => (
|
|
<VirtuosoMockContext.Provider value={{ viewportHeight: 600, itemHeight: 52 }}>
|
|
{children}
|
|
</VirtuosoMockContext.Provider>
|
|
),
|
|
});
|
|
};
|
|
|
|
describe("<VirtualizedRoomListView />", () => {
|
|
it("renders Default story", () => {
|
|
const { container } = renderWithMockContext(<Default />);
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
it("should render the room list listbox", () => {
|
|
renderWithMockContext(<Default />);
|
|
expect(screen.getByRole("listbox", { name: "Room list" })).toBeInTheDocument();
|
|
});
|
|
|
|
it("should render room items", () => {
|
|
renderWithMockContext(<Default />);
|
|
const items = screen.getAllByRole("option");
|
|
expect(items.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it("should mark selected room with aria-selected true", () => {
|
|
renderWithMockContext(<Default />);
|
|
const items = screen.getAllByRole("option");
|
|
// The first item (index 0) should be selected based on Default story (activeRoomIndex: 0)
|
|
expect(items[0]).toHaveAttribute("aria-selected", "true");
|
|
});
|
|
|
|
it("should handle focus state correctly", () => {
|
|
renderWithMockContext(<Default />);
|
|
|
|
const listbox = screen.getByRole("listbox", { name: "Room list" });
|
|
fireEvent.focus(listbox);
|
|
|
|
const items = screen.getAllByRole("option");
|
|
// First item should have tabIndex 0 (focusable) when list is focused
|
|
expect(items[0]).toHaveAttribute("tabIndex", "0");
|
|
});
|
|
|
|
it("should call updateVisibleRooms on render", () => {
|
|
renderWithMockContext(<Default />);
|
|
expect(Default.args.updateVisibleRooms).toHaveBeenCalled();
|
|
});
|
|
|
|
describe("updateVisibleRooms range reporting", () => {
|
|
beforeEach(() => {
|
|
(Default.args.updateVisibleRooms as any).mockClear?.();
|
|
(Sections.args.updateVisibleRooms as any).mockClear?.();
|
|
});
|
|
|
|
it("reports an exclusive end bound in flat mode", () => {
|
|
renderWithMockContext(<Default />);
|
|
// 10 rooms, all rendered by the mock viewport: Virtuoso reports the inclusive
|
|
// range [0, 9], which must reach the view model as the exclusive window [0, 10).
|
|
expect(Default.args.updateVisibleRooms).toHaveBeenLastCalledWith(0, 10);
|
|
});
|
|
|
|
it("maps entry-space indices to room indices in grouped mode", () => {
|
|
renderWithMockContext(<Sections />);
|
|
// 13 entries (3 section headers + 10 rooms) are all rendered: Virtuoso reports the
|
|
// inclusive entry range [0, 12], which must map back to the room window [0, 10).
|
|
expect(Sections.args.updateVisibleRooms).toHaveBeenLastCalledWith(0, 10);
|
|
});
|
|
});
|
|
|
|
describe("drag and drop", () => {
|
|
beforeEach(() => {
|
|
// Storybook fn() spies are shared across tests; vi.clearAllMocks() may not
|
|
// reach them, so explicitly reset call history for the spies under test.
|
|
(Sections.args.changeRoomSection as any).mockClear?.();
|
|
(Sections.args.changeSectionOrder as any).mockClear?.();
|
|
(Sections.args.onSectionDragStart as any).mockClear?.();
|
|
(Sections.args.onSectionDragEnd as any).mockClear?.();
|
|
});
|
|
|
|
it("should call changeRoomSection when drag ends successfully", async () => {
|
|
// KeyboardSensor: Space=start, each ArrowDown moves the drag position by
|
|
// KEYBOARD_DRAG_OFFSET px, Space=drop. We need to travel ~150px down from "General"
|
|
// (room 0) so the drag position enters the target section header's droppable area;
|
|
// derive the keypress count from the offset so this stays correct if the offset changes.
|
|
const presses = Math.round(150 / KEYBOARD_DRAG_OFFSET);
|
|
const user = userEvent.setup();
|
|
renderWithMockContext(<Sections />);
|
|
|
|
const roomButton = await screen.findByRole("button", { name: "Open room General" });
|
|
roomButton.focus();
|
|
|
|
await user.keyboard(" "); // start drag
|
|
|
|
for (let i = 0; i < presses; i++) {
|
|
await user.keyboard("{ArrowDown}");
|
|
}
|
|
|
|
await user.keyboard(" "); // drop onto current target
|
|
|
|
await waitFor(() => {
|
|
expect(Sections.args.changeRoomSection).toHaveBeenCalledWith("!room0:server", "low-priority");
|
|
});
|
|
});
|
|
|
|
it("does not reflect aria-pressed onto draggable room items or section headers", async () => {
|
|
// dnd-kit's built-in Accessibility plugin reflects aria-pressed onto the draggable
|
|
// <button>, which VoiceOver reads as "selected" when a keyboard drag starts. We drop
|
|
// that plugin, so the attribute must never appear (before or during a drag).
|
|
const user = userEvent.setup();
|
|
renderWithMockContext(<Sections />);
|
|
|
|
const roomButton = await screen.findByRole("button", { name: "Open room General" });
|
|
const sectionHeader = await screen.findByLabelText("Toggle Favourites section");
|
|
expect(roomButton).not.toHaveAttribute("aria-pressed");
|
|
expect(sectionHeader).not.toHaveAttribute("aria-pressed");
|
|
|
|
roomButton.focus();
|
|
await user.keyboard(" "); // start drag
|
|
expect(roomButton).not.toHaveAttribute("aria-pressed");
|
|
await user.keyboard("{Escape}"); // cancel drag
|
|
});
|
|
|
|
it("announces drag progress in a live region", async () => {
|
|
const user = userEvent.setup();
|
|
renderWithMockContext(<Sections />);
|
|
|
|
const status = screen.getByRole("status");
|
|
expect(status).toHaveTextContent("");
|
|
|
|
const roomButton = await screen.findByRole("button", { name: "Open room General" });
|
|
roomButton.focus();
|
|
|
|
await user.keyboard(" "); // start drag
|
|
await waitFor(() => expect(status).toHaveTextContent("Dragging General"));
|
|
|
|
await user.keyboard("{Escape}"); // cancel
|
|
});
|
|
|
|
it("exposes keyboard drag instructions referenced by draggable items", async () => {
|
|
renderWithMockContext(<Sections />);
|
|
|
|
// The plugin creates a hidden instructions element and wires draggables to it.
|
|
const instructions = screen.getByText(
|
|
"Press space to start or to stop dragging, arrow keys to move, and escape to cancel.",
|
|
);
|
|
const roomButton = await screen.findByRole("button", { name: "Open room General" });
|
|
await waitFor(() => expect(roomButton).toHaveAttribute("aria-describedby", instructions.id));
|
|
});
|
|
|
|
it("should reorder sections via keyboard", async () => {
|
|
// KeyboardSensor: Space=start, each ArrowDown moves the drag position by
|
|
// KEYBOARD_DRAG_OFFSET px, Space=drop. We need to travel ~200px down from the
|
|
// "Favourites" section header to land on the "low-priority" section header — a valid
|
|
// section reorder; derive the keypress count from the offset so this stays correct
|
|
// if the offset changes.
|
|
const presses = Math.round(200 / KEYBOARD_DRAG_OFFSET);
|
|
const user = userEvent.setup();
|
|
renderWithMockContext(<Sections />);
|
|
|
|
const favouritesHeader = await screen.findByLabelText("Toggle Favourites section");
|
|
favouritesHeader.focus();
|
|
|
|
await user.keyboard(" "); // start drag
|
|
|
|
for (let i = 0; i < presses; i++) {
|
|
await user.keyboard("{ArrowDown}");
|
|
}
|
|
|
|
await user.keyboard(" "); // drop
|
|
|
|
await waitFor(() => {
|
|
expect(Sections.args.changeSectionOrder).toHaveBeenCalledWith("favourites", "low-priority");
|
|
});
|
|
expect(Sections.args.onSectionDragStart).toHaveBeenCalled();
|
|
expect(Sections.args.onSectionDragEnd).toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("pointer drag activation", () => {
|
|
beforeEach(() => {
|
|
(Sections.args.changeRoomSection as any).mockClear?.();
|
|
});
|
|
|
|
it("does not start a drag when a finger moves (touch scrolling the list)", async () => {
|
|
// For touch, dragging only activates after a 250ms hold; moving the finger first aborts
|
|
// it so the list scrolls instead of dragging a room. Simulate a finger press that moves
|
|
// immediately (as when scrolling) and assert no drag ever starts.
|
|
const user = userEvent.setup();
|
|
renderWithMockContext(<Sections />);
|
|
|
|
const status = screen.getByRole("status");
|
|
const roomButton = await screen.findByRole("button", { name: "Open room General" });
|
|
|
|
await user.pointer([
|
|
{ keys: "[TouchA>]", target: roomButton, coords: { x: 20, y: 20 } },
|
|
{ pointerName: "TouchA", coords: { x: 20, y: 140 } },
|
|
{ keys: "[/TouchA]" },
|
|
]);
|
|
|
|
expect(status).toHaveTextContent("");
|
|
expect(Sections.args.changeRoomSection).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("starts a drag when the mouse moves past the activation distance", async () => {
|
|
// For mouse, dragging activates as soon as the pointer moves past 5px, so the same
|
|
// press-and-move gesture that scrolls on touch drags the room into another section.
|
|
const user = userEvent.setup();
|
|
renderWithMockContext(<Sections />);
|
|
|
|
const status = screen.getByRole("status");
|
|
const roomButton = await screen.findByRole("button", { name: "Open room General" });
|
|
|
|
await user.pointer([
|
|
{ keys: "[MouseLeft>]", target: roomButton, coords: { x: 20, y: 20 } },
|
|
{ coords: { x: 20, y: 140 } },
|
|
]);
|
|
|
|
// The drag has activated: the live region reflects the ongoing drag.
|
|
await waitFor(() => expect(status).toHaveTextContent("General"));
|
|
|
|
await user.pointer({ keys: "[/MouseLeft]" }); // release to drop
|
|
|
|
await waitFor(() => expect(Sections.args.changeRoomSection).toHaveBeenCalled());
|
|
});
|
|
});
|
|
|
|
describe("scrollToSectionTag", () => {
|
|
it("skips scroll when scrollToSectionTag does not match any section", () => {
|
|
const roomListState = {
|
|
activeRoomIndex: 0,
|
|
spaceId: "!space:server",
|
|
scrollToSectionTag: "nonexistent",
|
|
};
|
|
renderWithMockContext(<Sections roomListState={roomListState} />);
|
|
expect(screen.getByRole("treegrid", { name: "Room list" })).toBeInTheDocument();
|
|
});
|
|
|
|
it("scrolls to the section when scrollToSectionTag matches", () => {
|
|
// sections: favourites(3 rooms), chats(1 room), low-priority(6 rooms)
|
|
// flat index for "chats" = 3 rooms + 1 header = 4
|
|
const roomListState = {
|
|
activeRoomIndex: 0,
|
|
spaceId: "!space:server",
|
|
scrollToSectionTag: "chats",
|
|
};
|
|
renderWithMockContext(<Sections roomListState={roomListState} />);
|
|
expect(screen.getByRole("treegrid", { name: "Room list" })).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|