chore: add comments and small update on test mock

Author: MarcWadai

src/components/viewmodels/right_panel/RoomSummaryCardTopicViewModel.tsx

@@ -10,18 +10,47 @@ import { EventType, type Room } from "matrix-js-sdk/src/matrix";
 import { useRoomState } from "../../../hooks/useRoomState";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { onRoomTopicLinkClick } from "../../views/elements/RoomTopic";
+import { useTopic } from "../../../hooks/room/useTopic";
+import { TopicState } from "matrix-js-sdk/src/content-helpers";
+import { Optional } from "matrix-events-sdk/lib/types";
 
 export interface RoomTopicState {
+    /**
+     * The topic of the room, the value is taken from the room state
+     */
+    topic: Optional<TopicState>;
+    /**
+     * Whether the topic is expanded or not
+     */
     expanded: boolean;
+    /**
+     * Whether the user have the permission to edit the topic
+     */
     canEditTopic: boolean;
+    /**
+     * The callback when the edit button is clicked
+     */
     onEditClick: (e: SyntheticEvent) => void;
+    /**
+     * When the expand button is clicked, it changes expanded state
+     */
     onExpandedClick: (ev: SyntheticEvent) => void;
+    /**
+     * The callback when the topic link is clicked
+     */
     onTopicLinkClick: React.MouseEventHandler<HTMLElement>;
 }
 
+/**
+ * The view model for the room topic used in the RoomSummaryCard
+ * @param room - the room to get the topic from
+ * @returns the room topic state
+ */
 export function useRoomTopicViewModel(room: Room): RoomTopicState {
     const [expanded, setExpanded] = useState(true);
 
+    const topic = useTopic(room);
+
     const canEditTopic = useRoomState(room, (state) =>
         state.maySendStateEvent(EventType.RoomTopic, room.client.getSafeUserId()),
     );
@@ -35,7 +64,7 @@ export function useRoomTopicViewModel(room: Room): RoomTopicState {
     const onExpandedClick = (e: SyntheticEvent): void => {
         e.preventDefault();
         e.stopPropagation();
-        setExpanded(!expanded);
+        setExpanded((_expanded) => !_expanded);
     };
 
     const onTopicLinkClick = (e: React.MouseEvent): void => {
@@ -46,6 +75,7 @@ export function useRoomTopicViewModel(room: Room): RoomTopicState {
     };
 
     return {
+        topic,
         expanded,
         canEditTopic,
         onEditClick,

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -117,8 +117,7 @@ const onRoomSettingsClick = (ev: Event): void => {
 const RoomTopic: React.FC<Pick<IProps, "room">> = ({ room }): JSX.Element | null => {
     const vm = useRoomTopicViewModel(room);
 
-    const topic = useTopic(room);
-    const body = topicToHtml(topic?.text, topic?.html);
+    const body = topicToHtml(vm.topic?.text, vm.topic?.html);
 
     if (!body && !vm.canEditTopic) {
         return null;

test/unit-tests/components/viewmodels/right_panel/RoomSummaryCardTopicViewModel-test.tsx

@@ -8,14 +8,14 @@ import { renderHook } from "jest-matrix-react";
 import { act, type SyntheticEvent } from "react";
 
 import { useRoomTopicViewModel } from "../../../../../src/components/viewmodels/right_panel/RoomSummaryCardTopicViewModel";
-import { mkStubRoom, stubClient } from "../../../../test-utils";
+import { createTestClient, mkStubRoom } from "../../../../test-utils";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import { onRoomTopicLinkClick } from "../../../../../src/components/views/elements/RoomTopic";
 
 jest.mock("../../../../../src/components/views/elements/RoomTopic");
 
 describe("RoomSummaryCardTopicViewModel", () => {
-    const client = stubClient();
+    const client = createTestClient();
     const mockRoom = mkStubRoom("!room:example.com", "Test Room", client);
     const mockUserId = "@user:example.com";
     const mockEvent = { preventDefault: jest.fn(), stopPropagation: jest.fn() } as unknown as SyntheticEvent;
@@ -41,10 +41,10 @@ describe("RoomSummaryCardTopicViewModel", () => {
         expect(result.current.expanded).toBe(true);
     });
 
-    it("should toggle expanded state on click", () => {
+    it("should toggle expanded state on click", async () => {
         const { result } = render();
 
-        act(() => {
+        await act(() => {
             result.current.onExpandedClick(mockEvent);
         });
 
@@ -59,17 +59,19 @@ describe("RoomSummaryCardTopicViewModel", () => {
 
     it("should handle topic link clicks when the target is an anchor element", () => {
         const { result } = render();
-        const mockAnchorEvent = { target: document.createElement("a") };
+        const mockAnchorEvent = { target: document.createElement("a") } as unknown as React.MouseEvent<HTMLElement>;
 
-        result.current.onTopicLinkClick(mockAnchorEvent as any);
-        expect(onRoomTopicLinkClick).toHaveBeenCalledWith(mockAnchorEvent as any);
+        result.current.onTopicLinkClick(mockAnchorEvent);
+        expect(onRoomTopicLinkClick).toHaveBeenCalledWith(mockAnchorEvent);
     });
 
     it("should handle topic link clicks when the target is not an anchor element", () => {
         const { result } = render();
-        const mockNonAnchorEvent = { target: document.createElement("div") };
+        const mockNonAnchorEvent = {
+            target: document.createElement("div"),
+        } as unknown as React.MouseEvent<HTMLElement>;
 
-        result.current.onTopicLinkClick(mockNonAnchorEvent as any);
+        result.current.onTopicLinkClick(mockNonAnchorEvent);
         expect(onRoomTopicLinkClick).not.toHaveBeenCalled();
     });