snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/hooks/useMemberList.spec.ts

@@ -0,0 +1,403 @@
+import { UserStatus } from '@rocket.chat/core-typings';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { useStream } from '@rocket.chat/ui-contexts';
+import { renderHook, act, waitFor } from '@testing-library/react';
+
+import type { RoomMember } from './useMembersList';
+import { useMembersList } from './useMembersList';
+
+type MembersPage = {
+	offset: number;
+	count: number;
+	total: number;
+	members: Array<{
+		_id: string;
+		username: string;
+		roles: string[];
+		status?: UserStatus;
+	}>;
+};
+
+jest.mock('@rocket.chat/ui-contexts', () => {
+	const originalModule = jest.requireActual('@rocket.chat/ui-contexts');
+
+	return {
+		__esModule: true,
+		...originalModule,
+		useStream: jest.fn(),
+	};
+});
+
+const mockUseStream = useStream as jest.MockedFunction<typeof useStream>;
+const mockDMMembersEndpoint = jest.fn();
+const mockRoomMembersEndpoint = jest.fn();
+
+describe('useMembersList', () => {
+	let fakeMembersPage1: MembersPage;
+	let fakeMembersPage2: MembersPage;
+
+	const wrapper = mockAppRoot()
+		.withJohnDoe()
+		.withSetting('UI_Use_Real_Name', false)
+		.withEndpoint('GET', '/v1/im.members', (_params) => {
+			mockDMMembersEndpoint();
+			return fakeMembersPage1 as any;
+		})
+		.withEndpoint('GET', '/v1/rooms.membersOrderedByRole', (_params) => {
+			mockRoomMembersEndpoint();
+			return fakeMembersPage1 as any;
+		});
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+
+		fakeMembersPage1 = {
+			offset: 0,
+			count: 3,
+			total: 5,
+			members: [
+				{ _id: 'user1', username: 'alex', roles: ['owner'], status: UserStatus.ONLINE },
+				{ _id: 'user2', username: 'bob', roles: ['leader'], status: UserStatus.OFFLINE },
+				{ _id: 'user3', username: 'john', roles: ['moderator'], status: UserStatus.OFFLINE },
+			],
+		};
+
+		fakeMembersPage2 = {
+			offset: 3,
+			count: 2,
+			total: 5,
+			members: [
+				{ _id: 'user4', username: 'chris', roles: [], status: UserStatus.ONLINE },
+				{ _id: 'user5', username: 'zoe', roles: [], status: UserStatus.OFFLINE },
+			],
+		};
+
+		mockUseStream.mockReturnValue(() => () => undefined);
+	});
+
+	it('fetches members using the correct endpoint for roomType c', async () => {
+		const { result } = renderHook(
+			() =>
+				useMembersList({
+					rid: 'room123',
+					type: 'all',
+					limit: 3,
+					debouncedText: '',
+					roomType: 'c',
+				}),
+			{ wrapper: wrapper.build() },
+		);
+
+		await expect(result.current.isLoading).toBe(true);
+
+		await waitFor(() => expect(result.current.isLoading).toBe(false));
+		expect(mockDMMembersEndpoint).not.toHaveBeenCalled();
+		expect(mockRoomMembersEndpoint).toHaveBeenCalled();
+
+		expect(result.current.data?.pages[0].members).toHaveLength(fakeMembersPage1.members.length);
+	});
+
+	it('fetches members using the correct endpoint for roomType p', async () => {
+		const { result } = renderHook(
+			() =>
+				useMembersList({
+					rid: 'room123',
+					type: 'all',
+					limit: 3,
+					debouncedText: '',
+					roomType: 'p',
+				}),
+			{ wrapper: wrapper.build() },
+		);
+
+		expect(result.current.isLoading).toBe(true);
+
+		await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+		expect(mockRoomMembersEndpoint).toHaveBeenCalled();
+		expect(mockDMMembersEndpoint).not.toHaveBeenCalled();
+
+		expect(result.current.data?.pages[0].members).toHaveLength(fakeMembersPage1.members.length);
+	});
+
+	it('fetches from /v1/im.members if roomType is d', async () => {
+		const { result } = renderHook(
+			() =>
+				useMembersList({
+					rid: 'directRoomId',
+					type: 'all',
+					limit: 3,
+					debouncedText: '',
+					roomType: 'd',
+				}),
+			{ wrapper: wrapper.build() },
+		);
+
+		await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+		expect(mockDMMembersEndpoint).toHaveBeenCalled();
+		expect(mockRoomMembersEndpoint).not.toHaveBeenCalled();
+
+		expect(result.current.data?.pages[0].members).toHaveLength(fakeMembersPage1.members.length);
+	});
+
+	it('applies pagination with fetchNextPage', async () => {
+		const { result } = renderHook(
+			() =>
+				useMembersList({
+					rid: 'room123',
+					type: 'all',
+					limit: 3,
+					debouncedText: '',
+					roomType: 'c',
+				}),
+			{
+				wrapper: wrapper
+					.withEndpoint('GET', '/v1/rooms.membersOrderedByRole', ({ offset }) => {
+						if (offset === 0) {
+							return fakeMembersPage1 as any;
+						}
+						if (offset === 3) {
+							return fakeMembersPage2 as any;
+						}
+						return {
+							members: [],
+							offset,
+							count: 0,
+							total: 5,
+						};
+					})
+					.build(),
+			},
+		);
+
+		await waitFor(() => expect(result.current.isLoading).toBe(false));
+		expect(result.current.data?.pages[0].members).toHaveLength(3);
+
+		await act(async () => {
+			await result.current.fetchNextPage();
+		});
+
+		await waitFor(() => expect(result.current.isFetchingNextPage).toBe(false));
+		await waitFor(() => expect(result.current.data?.pages).toHaveLength(2));
+		expect(result.current.data?.pages[1].members).toHaveLength(2);
+	});
+
+	it('subscribes to "roles-change" and unsubscribes on unmount', async () => {
+		const unsubscribeMock = jest.fn();
+		const subscribeMock = jest.fn().mockReturnValue(unsubscribeMock);
+
+		mockUseStream.mockReturnValue(subscribeMock);
+
+		const { unmount } = renderHook(
+			() =>
+				useMembersList({
+					rid: 'room123',
+					type: 'all',
+					limit: 3,
+					debouncedText: '',
+					roomType: 'c',
+				}),
+			{ wrapper: wrapper.build() },
+		);
+
+		await waitFor(() => expect(subscribeMock).toHaveBeenCalledWith('roles-change', expect.any(Function)));
+
+		unmount();
+		expect(unsubscribeMock).toHaveBeenCalled();
+	});
+
+	it('updates member roles in the cache on roles-change', async () => {
+		const subscribeMock = jest.fn();
+		let rolesChangeCallback: ((payload: any) => void) | undefined = undefined;
+
+		subscribeMock.mockImplementation((eventName, cb) => {
+			if (eventName === 'roles-change') {
+				rolesChangeCallback = cb;
+			}
+			return () => undefined; // unsubscribe mock
+		});
+		mockUseStream.mockReturnValue(subscribeMock);
+
+		const { result } = renderHook(
+			() =>
+				useMembersList({
+					rid: 'room123',
+					type: 'all',
+					limit: 3,
+					debouncedText: '',
+					roomType: 'c',
+				}),
+			{ wrapper: wrapper.build() },
+		);
+
+		await waitFor(() => expect(result.current.isLoading).toBe(false));
+		let user2 = result.current.data?.pages[0].members.find((m) => m._id === 'user2') as RoomMember;
+		expect(user2?.roles).toEqual(['leader']);
+
+		// Simulate a roles-change event "added" for user2 -> 'owner'
+		await act(async () => {
+			rolesChangeCallback?.({
+				type: 'added',
+				scope: 'room123',
+				u: { _id: 'user2' },
+				_id: 'owner',
+			});
+		});
+
+		user2 = result.current.data?.pages[0].members.find((m) => m._id === 'user2') as RoomMember;
+
+		await waitFor(() => expect(user2?.roles).toContain('owner'));
+		await waitFor(() => expect(user2?.roles).toContain('leader'));
+	});
+
+	it('sorts members list cache by "roles > status > username/name" logic on roles-change', async () => {
+		const customPage = {
+			offset: 0,
+			count: 6,
+			total: 6,
+			members: [
+				{ _id: 'u1', username: 'mark', roles: ['owner'], status: UserStatus.OFFLINE },
+				{ _id: 'u2', username: 'michael', roles: ['leader'], status: UserStatus.OFFLINE },
+				{ _id: 'u3', username: 'karl', roles: ['moderator'], status: UserStatus.ONLINE },
+				{ _id: 'u4', username: 'bob', roles: ['moderator'], status: UserStatus.OFFLINE },
+				{ _id: 'u5', username: 'alex', roles: [], status: UserStatus.OFFLINE },
+				{ _id: 'u6', username: 'john', roles: [], status: UserStatus.ONLINE },
+			],
+		};
+
+		let rolesChangeCallback: ((payload: any) => void) | undefined;
+		mockUseStream.mockReturnValue((eventName, cb) => {
+			if (eventName === 'roles-change') {
+				rolesChangeCallback = cb as any;
+			}
+			return () => undefined;
+		});
+
+		const { result } = renderHook(
+			() =>
+				useMembersList({
+					rid: 'room123',
+					type: 'all',
+					limit: 5,
+					debouncedText: '',
+					roomType: 'c',
+				}),
+			{
+				wrapper: wrapper.withEndpoint('GET', '/v1/rooms.membersOrderedByRole', (_params) => customPage as any).build(),
+			},
+		);
+
+		await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+		let memberIds = result.current.data?.pages[0].members.map((m) => m._id);
+		expect(memberIds).toEqual(['u1', 'u2', 'u3', 'u4', 'u5', 'u6']);
+
+		// Simulate giving user 'alex/u5' the "moderator" role.
+		// That should push 'alex/u5' to the third of the sorted list -
+		// after mark/u1 and michael/u2 (since owner), after karl/u3 (since online) and before bob/u4 (since sort by username).
+		act(() => {
+			rolesChangeCallback?.({
+				type: 'added',
+				scope: 'room123',
+				u: { _id: 'u5' },
+				_id: 'moderator',
+			});
+		});
+
+		await waitFor(() => {
+			memberIds = result.current.data?.pages[0].members.map((m) => m._id);
+			expect(memberIds).toEqual(['u1', 'u2', 'u3', 'u5', 'u4', 'u6']);
+		});
+	});
+
+	it('re-sorts members globally across multiple pages on roles-change and verifies exact array match', async () => {
+		const firstPage = {
+			offset: 0,
+			count: 2,
+			total: 4,
+			members: [
+				{ _id: 'userA', username: 'adam', roles: ['owner'], status: UserStatus.OFFLINE },
+				{ _id: 'userB', username: 'bea', roles: ['moderator'], status: UserStatus.OFFLINE },
+			],
+		};
+
+		const secondPage = {
+			offset: 2,
+			count: 2,
+			total: 4,
+			members: [
+				{ _id: 'userC', username: 'charlie', roles: [], status: UserStatus.ONLINE },
+				{ _id: 'userD', username: 'david', roles: [], status: UserStatus.OFFLINE },
+			],
+		};
+
+		let rolesChangeCallback: ((payload: any) => void) | undefined;
+
+		mockUseStream.mockReturnValue((eventName, cb) => {
+			if (eventName === 'roles-change') {
+				rolesChangeCallback = cb as any;
+			}
+			return () => undefined;
+		});
+
+		const testWrapper = wrapper.withEndpoint('GET', '/v1/rooms.membersOrderedByRole', ({ offset }) => {
+			if (offset === 0) {
+				return firstPage as any;
+			}
+			if (offset === 2) {
+				return secondPage as any;
+			}
+			return { offset, count: 2, total: 4, members: [] } as any;
+		});
+
+		const { result } = renderHook(
+			() =>
+				useMembersList({
+					rid: 'room123',
+					type: 'all',
+					limit: 2,
+					debouncedText: '',
+					roomType: 'c',
+				}),
+			{ wrapper: testWrapper.build() },
+		);
+
+		// Page 1
+		await waitFor(() => expect(result.current.isLoading).toBe(false));
+		expect(result.current.data?.pages).toHaveLength(1);
+		expect(result.current.data?.pages[0].members.map((m) => m._id)).toStrictEqual(['userA', 'userB']);
+
+		// Page 2
+		await act(async () => {
+			await result.current.fetchNextPage();
+		});
+
+		await waitFor(() => expect(result.current.isFetchingNextPage).toBe(false));
+		await waitFor(() => expect(result.current.data?.pages).toHaveLength(2));
+		expect(result.current.data?.pages[1].members.map((m) => m._id)).toStrictEqual(['userC', 'userD']);
+
+		// Give userC the "owner" role
+		await act(async () => {
+			await rolesChangeCallback?.({
+				type: 'added',
+				scope: 'room123',
+				u: { _id: 'userC' },
+				_id: 'owner',
+			});
+		});
+
+		expect(result.current.data?.pages).toHaveLength(2);
+
+		const userC = result.current.data?.pages.flatMap((page) => page.members).find((m) => m._id === 'userC') as RoomMember | null;
+		await waitFor(() => expect(userC?.roles).toContain('owner'));
+
+		// userC now has 'owner' + ONLINE => sits at the top after sorting
+		// then userA (owner), then userB (moderator), then userD (member)
+		expect(result.current.data?.pages[0].members).toHaveLength(2);
+		expect(result.current.data?.pages[1].members).toHaveLength(2);
+
+		await waitFor(() => expect(result.current.data?.pages[0].members.map((m) => m._id)).toStrictEqual(['userC', 'userA']));
+		await waitFor(() => expect(result.current.data?.pages[1].members.map((m) => m._id)).toStrictEqual(['userB', 'userD']));
+	});
+});