80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
import React from "react";
|
|
|
|
import { Excalidraw } from "../index";
|
|
import {
|
|
act,
|
|
fireEvent,
|
|
getByText,
|
|
render,
|
|
waitFor,
|
|
} from "../tests/test-utils";
|
|
|
|
import type { Collaborator, SocketId } from "../types";
|
|
|
|
const socketId = (id: string) => id as SocketId;
|
|
|
|
describe("UserList", () => {
|
|
it("retains the local dropdown when the same account has multiple clients", async () => {
|
|
const { container } = await render(
|
|
<Excalidraw
|
|
currentUserControls={<button type="button">Spotlight me</button>}
|
|
/>,
|
|
);
|
|
const currentSocketId = socketId("current");
|
|
const otherSocketId = socketId("other");
|
|
|
|
act(() => {
|
|
window.h.app.updateScene({
|
|
collaborators: new Map<SocketId, Collaborator>([
|
|
[
|
|
otherSocketId,
|
|
{
|
|
id: "user",
|
|
socketId: otherSocketId,
|
|
username: "Ada",
|
|
isCurrentUser: false,
|
|
},
|
|
],
|
|
[
|
|
currentSocketId,
|
|
{
|
|
id: "user",
|
|
socketId: currentSocketId,
|
|
username: "Ada",
|
|
isCurrentUser: true,
|
|
},
|
|
],
|
|
]),
|
|
});
|
|
});
|
|
|
|
await waitFor(() => {
|
|
expect(container.querySelectorAll(".UserList__pill")).toHaveLength(1);
|
|
});
|
|
|
|
const currentUserPill =
|
|
container.querySelector<HTMLElement>(".UserList__pill");
|
|
expect(currentUserPill).not.toBeNull();
|
|
|
|
// Radix Popover measures its content when opened.
|
|
(global as any).ResizeObserver = class ResizeObserver {
|
|
observe() {}
|
|
unobserve() {}
|
|
disconnect() {}
|
|
};
|
|
fireEvent.click(currentUserPill!);
|
|
|
|
await waitFor(() => {
|
|
const dropdown = document.querySelector(".UserList__collaborators");
|
|
const dropdownCollaborators = dropdown?.querySelectorAll(
|
|
".UserList__collaborator",
|
|
);
|
|
expect(dropdownCollaborators).toHaveLength(2);
|
|
expect(
|
|
dropdown?.querySelectorAll(".UserList__collaborator.is-current-user"),
|
|
).toHaveLength(1);
|
|
expect(getByText(document.body, "Spotlight me")).toBeVisible();
|
|
});
|
|
});
|
|
});
|