Refactor ReactionsRowButtonTooltip to shared-components (#31866)
* Setting up structure for the init refactoring of ReactionsRowButtonTooltip * implemented example to follow for refactoring to MVVM * Refactoring of ReactionsRowButtonTooltipView * updated reactionrowbutton to use our new viewmodel and removed unessecery comments * Updated children from reactnode to propswithchildren * removal of children on the vm have it as a props * implemented constructor into reactionrowbutton to use vm to viewmodel * Removal of old component * Added ViewModel Tests for new viewmodel * Fix issues after merging develop * Updated import placement for eslint failure CI * Add tests for ReactionsRowButton ViewModel integration and click handlers to pass coverage * Added more tests to cover all conditions * Pass MatrixClient as prop instead of using global; replace expect(true).toBe(true) with not.toThrow() * Added new snapshot to reflect modifications on tests * Update images to fit the CI tests * Optimize reactions tooltip viewmodel updates * Removal of module.css for reactionbuttontooltip, we dont need it since we dont use any css * Fixed snapshots to show the tooltip by introducing a boolean to set open to true in Storybook. * Update snapshots --------- Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Zack
co-authored by
Michael Telatynski
Michael Telatynski
parent
8cef5df140
commit
62c7fe5408
@@ -7,19 +7,38 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { type IContent, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
|
||||
import { render } from "jest-matrix-react";
|
||||
import { EventType, type IContent, MatrixEvent, RelationType, Room } from "matrix-js-sdk/src/matrix";
|
||||
import { fireEvent, render } from "jest-matrix-react";
|
||||
|
||||
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
|
||||
import { getMockClientWithEventEmitter } from "../../../../test-utils";
|
||||
import ReactionsRowButton, { type IProps } from "../../../../../src/components/views/messages/ReactionsRowButton";
|
||||
import dis from "../../../../../src/dispatcher/dispatcher";
|
||||
import { type Media, mediaFromMxc } from "../../../../../src/customisations/Media";
|
||||
|
||||
jest.mock("../../../../../src/dispatcher/dispatcher");
|
||||
|
||||
jest.mock("../../../../../src/customisations/Media", () => ({
|
||||
mediaFromMxc: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock("@element-hq/web-shared-components", () => {
|
||||
const actual = jest.requireActual("@element-hq/web-shared-components");
|
||||
return {
|
||||
...actual,
|
||||
ReactionsRowButtonTooltipView: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
||||
};
|
||||
});
|
||||
|
||||
const mockMediaFromMxc = mediaFromMxc as jest.MockedFunction<typeof mediaFromMxc>;
|
||||
|
||||
describe("ReactionsRowButton", () => {
|
||||
const userId = "@alice:server";
|
||||
const roomId = "!randomcharacters:aser.ver";
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
mxcUrlToHttp: jest.fn().mockReturnValue("https://not.a.real.url"),
|
||||
getRoom: jest.fn(),
|
||||
sendEvent: jest.fn().mockResolvedValue({ event_id: "$sent_event" }),
|
||||
redactEvent: jest.fn().mockResolvedValue({}),
|
||||
});
|
||||
const room = new Room(roomId, mockClient, userId);
|
||||
|
||||
@@ -52,6 +71,10 @@ describe("ReactionsRowButton", () => {
|
||||
mockClient.getRoom.mockImplementation((roomId: string): Room | null => {
|
||||
return roomId === room.roomId ? room : null;
|
||||
});
|
||||
// Default mock for mediaFromMxc
|
||||
mockMediaFromMxc.mockReturnValue({
|
||||
srcHttp: "https://not.a.real.url",
|
||||
} as unknown as Media);
|
||||
});
|
||||
|
||||
it("renders reaction row button emojis correctly", () => {
|
||||
@@ -122,4 +145,402 @@ describe("ReactionsRowButton", () => {
|
||||
|
||||
expect(root.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("calls setProps on ViewModel when props change", () => {
|
||||
const props = createProps({
|
||||
"m.relates_to": {
|
||||
event_id: "$user1:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
});
|
||||
|
||||
const { rerender, container } = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// Create new props with different values
|
||||
const newMxEvent = new MatrixEvent({
|
||||
room_id: roomId,
|
||||
event_id: "$test2:example.com",
|
||||
content: { body: "test2" },
|
||||
});
|
||||
|
||||
const newReactionEvents = [
|
||||
new MatrixEvent({
|
||||
type: "m.reaction",
|
||||
sender: "@user3:example.com",
|
||||
content: {
|
||||
"m.relates_to": {
|
||||
event_id: "$user3:example.com",
|
||||
key: "👎",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
const updatedProps: IProps = {
|
||||
...props,
|
||||
mxEvent: newMxEvent,
|
||||
content: "👎",
|
||||
reactionEvents: newReactionEvents,
|
||||
customReactionImagesEnabled: false,
|
||||
};
|
||||
|
||||
rerender(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...updatedProps} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// The component should have updated - verify by checking the rendered content
|
||||
expect(container.querySelector(".mx_ReactionsRowButton_content")?.textContent).toBe("👎");
|
||||
});
|
||||
|
||||
it("disposes ViewModel on unmount", () => {
|
||||
const props = createProps({
|
||||
"m.relates_to": {
|
||||
event_id: "$user1:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
});
|
||||
|
||||
const { unmount } = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// Unmount should not throw
|
||||
expect(() => unmount()).not.toThrow();
|
||||
});
|
||||
|
||||
it("redacts reaction when clicking with myReactionEvent", () => {
|
||||
const myReactionEvent = new MatrixEvent({
|
||||
type: "m.reaction",
|
||||
sender: userId,
|
||||
event_id: "$my_reaction:example.com",
|
||||
content: {
|
||||
"m.relates_to": {
|
||||
event_id: "$user1:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const props: IProps = {
|
||||
...createProps({
|
||||
"m.relates_to": {
|
||||
event_id: "$user1:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
}),
|
||||
myReactionEvent,
|
||||
};
|
||||
|
||||
const root = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
const button = root.getByRole("button");
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(mockClient.redactEvent).toHaveBeenCalledWith(roomId, "$my_reaction:example.com");
|
||||
});
|
||||
|
||||
it("sends reaction when clicking without myReactionEvent", () => {
|
||||
const props = createProps({
|
||||
"m.relates_to": {
|
||||
event_id: "$test:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
});
|
||||
|
||||
const root = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
const button = root.getByRole("button");
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(mockClient.sendEvent).toHaveBeenCalledWith(roomId, EventType.Reaction, {
|
||||
"m.relates_to": {
|
||||
rel_type: RelationType.Annotation,
|
||||
event_id: "$test:example.com",
|
||||
key: "👍",
|
||||
},
|
||||
});
|
||||
expect(dis.dispatch).toHaveBeenCalledWith({ action: "message_sent" });
|
||||
});
|
||||
|
||||
it("uses reactors as label when content is empty", () => {
|
||||
const props: IProps = {
|
||||
mxEvent: new MatrixEvent({
|
||||
room_id: roomId,
|
||||
event_id: "$test:example.com",
|
||||
content: { body: "test" },
|
||||
}),
|
||||
content: "", // Empty content
|
||||
count: 2,
|
||||
reactionEvents: [
|
||||
new MatrixEvent({
|
||||
type: "m.reaction",
|
||||
sender: "@user1:example.com",
|
||||
content: {},
|
||||
}),
|
||||
new MatrixEvent({
|
||||
type: "m.reaction",
|
||||
sender: "@user2:example.com",
|
||||
content: {},
|
||||
}),
|
||||
],
|
||||
customReactionImagesEnabled: true,
|
||||
};
|
||||
|
||||
const root = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// The button should still render
|
||||
const button = root.getByRole("button");
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders custom image reaction with fallback label when no shortcode", () => {
|
||||
const props: IProps = {
|
||||
mxEvent: new MatrixEvent({
|
||||
room_id: roomId,
|
||||
event_id: "$test:example.com",
|
||||
content: { body: "test" },
|
||||
}),
|
||||
content: "mxc://example.com/custom_image",
|
||||
count: 1,
|
||||
reactionEvents: [
|
||||
new MatrixEvent({
|
||||
type: "m.reaction",
|
||||
sender: "@user1:example.com",
|
||||
content: {
|
||||
"m.relates_to": {
|
||||
event_id: "$test:example.com",
|
||||
key: "mxc://example.com/custom_image",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
customReactionImagesEnabled: true,
|
||||
};
|
||||
|
||||
const root = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// Should render an image element for custom reaction
|
||||
const img = root.container.querySelector("img.mx_ReactionsRowButton_content");
|
||||
expect(img).toBeInTheDocument();
|
||||
expect(img).toHaveAttribute("src", "https://not.a.real.url");
|
||||
});
|
||||
|
||||
it("falls back to text when mxc URL cannot be converted to HTTP", () => {
|
||||
// Make mediaFromMxc return null srcHttp to simulate failed conversion
|
||||
mockMediaFromMxc.mockReturnValueOnce({
|
||||
srcHttp: null,
|
||||
} as unknown as Media);
|
||||
|
||||
const props: IProps = {
|
||||
mxEvent: new MatrixEvent({
|
||||
room_id: roomId,
|
||||
event_id: "$test:example.com",
|
||||
content: { body: "test" },
|
||||
}),
|
||||
content: "mxc://example.com/invalid_image",
|
||||
count: 1,
|
||||
reactionEvents: [
|
||||
new MatrixEvent({
|
||||
type: "m.reaction",
|
||||
sender: "@user1:example.com",
|
||||
content: {
|
||||
"m.relates_to": {
|
||||
event_id: "$test:example.com",
|
||||
key: "mxc://example.com/invalid_image",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
customReactionImagesEnabled: true,
|
||||
};
|
||||
|
||||
const root = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// Should render span (not img) when imageSrc is null
|
||||
const span = root.container.querySelector("span.mx_ReactionsRowButton_content");
|
||||
expect(span).toBeInTheDocument();
|
||||
const img = root.container.querySelector("img.mx_ReactionsRowButton_content");
|
||||
expect(img).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("updates ViewModel when only mxEvent changes", () => {
|
||||
const props = createProps({
|
||||
"m.relates_to": {
|
||||
event_id: "$user1:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
});
|
||||
|
||||
const { rerender } = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// Only change mxEvent
|
||||
const newMxEvent = new MatrixEvent({
|
||||
room_id: roomId,
|
||||
event_id: "$test2:example.com",
|
||||
content: { body: "test2" },
|
||||
});
|
||||
|
||||
expect(() =>
|
||||
rerender(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} mxEvent={newMxEvent} />
|
||||
</MatrixClientContext.Provider>,
|
||||
),
|
||||
).not.toThrow();
|
||||
});
|
||||
|
||||
it("updates ViewModel when only content changes", () => {
|
||||
const props = createProps({
|
||||
"m.relates_to": {
|
||||
event_id: "$user1:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
});
|
||||
|
||||
const { rerender, container } = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// Only change content
|
||||
rerender(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} content="👎" />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
expect(container.querySelector(".mx_ReactionsRowButton_content")?.textContent).toBe("👎");
|
||||
});
|
||||
|
||||
it("updates ViewModel when only reactionEvents changes", () => {
|
||||
const props = createProps({
|
||||
"m.relates_to": {
|
||||
event_id: "$user1:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
});
|
||||
|
||||
const { rerender } = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// Only change reactionEvents
|
||||
const newReactionEvents = [
|
||||
new MatrixEvent({
|
||||
type: "m.reaction",
|
||||
sender: "@user3:example.com",
|
||||
content: {
|
||||
"m.relates_to": {
|
||||
event_id: "$user1:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
expect(() =>
|
||||
rerender(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} reactionEvents={newReactionEvents} />
|
||||
</MatrixClientContext.Provider>,
|
||||
),
|
||||
).not.toThrow();
|
||||
});
|
||||
|
||||
it("updates ViewModel when only customReactionImagesEnabled changes", () => {
|
||||
const props = createProps({
|
||||
"m.relates_to": {
|
||||
event_id: "$user1:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
});
|
||||
|
||||
const { rerender } = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// Only change customReactionImagesEnabled
|
||||
expect(() =>
|
||||
rerender(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} customReactionImagesEnabled={false} />
|
||||
</MatrixClientContext.Provider>,
|
||||
),
|
||||
).not.toThrow();
|
||||
});
|
||||
|
||||
it("does not update ViewModel when props stay the same", () => {
|
||||
const props = createProps({
|
||||
"m.relates_to": {
|
||||
event_id: "$user1:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
});
|
||||
|
||||
const { rerender } = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
// Rerender with same props - setProps should not be called
|
||||
expect(() =>
|
||||
rerender(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
),
|
||||
).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,172 @@
|
||||
/*
|
||||
* 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 { type MatrixClient, type MatrixEvent, type Room, type RoomMember } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import {
|
||||
ReactionsRowButtonTooltipViewModel,
|
||||
type ReactionsRowButtonTooltipViewModelProps,
|
||||
} from "../../../src/viewmodels/message-body/ReactionsRowButtonTooltipViewModel";
|
||||
import { stubClient, mkStubRoom, mkEvent } from "../../test-utils";
|
||||
import { unicodeToShortcode } from "../../../src/HtmlUtils";
|
||||
|
||||
jest.mock("../../../src/HtmlUtils", () => ({
|
||||
...jest.requireActual("../../../src/HtmlUtils"),
|
||||
unicodeToShortcode: jest.fn(),
|
||||
}));
|
||||
|
||||
const mockedUnicodeToShortcode = jest.mocked(unicodeToShortcode);
|
||||
|
||||
describe("ReactionsRowButtonTooltipViewModel", () => {
|
||||
let client: MatrixClient;
|
||||
let room: Room;
|
||||
let mxEvent: MatrixEvent;
|
||||
|
||||
const createReactionEvent = (senderId: string, content?: Record<string, unknown>): MatrixEvent => {
|
||||
return mkEvent({
|
||||
event: true,
|
||||
type: "m.reaction",
|
||||
room: room.roomId,
|
||||
user: senderId,
|
||||
content: {
|
||||
"m.relates_to": { rel_type: "m.annotation", event_id: mxEvent.getId(), key: "👍" },
|
||||
...content,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const createProps = (
|
||||
overrides?: Partial<ReactionsRowButtonTooltipViewModelProps>,
|
||||
): ReactionsRowButtonTooltipViewModelProps => ({
|
||||
client,
|
||||
mxEvent,
|
||||
content: "👍",
|
||||
reactionEvents: [],
|
||||
customReactionImagesEnabled: false,
|
||||
...overrides,
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
client = stubClient();
|
||||
room = mkStubRoom("!room:example.org", "Test Room", client);
|
||||
jest.spyOn(client, "getRoom").mockReturnValue(room);
|
||||
|
||||
mxEvent = mkEvent({
|
||||
event: true,
|
||||
type: "m.room.message",
|
||||
room: room.roomId,
|
||||
user: "@sender:example.org",
|
||||
content: { body: "Test message", msgtype: "m.text" },
|
||||
});
|
||||
|
||||
mockedUnicodeToShortcode.mockImplementation((char: string) => {
|
||||
if (char === "👍") return ":thumbsup:";
|
||||
return "";
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
mockedUnicodeToShortcode.mockReset();
|
||||
});
|
||||
|
||||
it("should return undefined snapshot when room is not found", () => {
|
||||
jest.spyOn(client, "getRoom").mockReturnValue(null);
|
||||
|
||||
const vm = new ReactionsRowButtonTooltipViewModel(createProps());
|
||||
const snapshot = vm.getSnapshot();
|
||||
|
||||
expect(snapshot.formattedSenders).toBeUndefined();
|
||||
expect(snapshot.caption).toBeUndefined();
|
||||
});
|
||||
|
||||
it("should return undefined snapshot when MatrixClient is unavailable", () => {
|
||||
const vm = new ReactionsRowButtonTooltipViewModel(createProps({ client: null }));
|
||||
const snapshot = vm.getSnapshot();
|
||||
|
||||
expect(snapshot.formattedSenders).toBeUndefined();
|
||||
expect(snapshot.caption).toBeUndefined();
|
||||
});
|
||||
|
||||
it("should compute formattedSenders and caption from reaction events", () => {
|
||||
const reactionEvent = createReactionEvent("@alice:example.org");
|
||||
jest.spyOn(room, "getMember").mockReturnValue({ name: "Alice", userId: "@alice:example.org" } as RoomMember);
|
||||
|
||||
const vm = new ReactionsRowButtonTooltipViewModel(createProps({ reactionEvents: [reactionEvent] }));
|
||||
const snapshot = vm.getSnapshot();
|
||||
|
||||
expect(snapshot.formattedSenders).toBe("Alice");
|
||||
expect(snapshot.caption).toContain(":thumbsup:");
|
||||
});
|
||||
|
||||
it("should fall back to sender ID when member is not found", () => {
|
||||
const reactionEvent = createReactionEvent("@unknown:example.org");
|
||||
jest.spyOn(room, "getMember").mockReturnValue(null);
|
||||
|
||||
const vm = new ReactionsRowButtonTooltipViewModel(createProps({ reactionEvents: [reactionEvent] }));
|
||||
|
||||
expect(vm.getSnapshot().formattedSenders).toBe("@unknown:example.org");
|
||||
});
|
||||
|
||||
it("should use custom reaction shortcode when customReactionImagesEnabled is true", () => {
|
||||
mockedUnicodeToShortcode.mockReturnValue("");
|
||||
const reactionEvent = createReactionEvent("@alice:example.org", {
|
||||
"com.beeper.reaction.shortcode": "custom_emoji",
|
||||
});
|
||||
jest.spyOn(room, "getMember").mockReturnValue({ name: "Alice", userId: "@alice:example.org" } as RoomMember);
|
||||
|
||||
const vm = new ReactionsRowButtonTooltipViewModel(
|
||||
createProps({
|
||||
content: "mxc://custom/emoji",
|
||||
reactionEvents: [reactionEvent],
|
||||
customReactionImagesEnabled: true,
|
||||
}),
|
||||
);
|
||||
|
||||
expect(vm.getSnapshot().caption).toContain("custom_emoji");
|
||||
});
|
||||
|
||||
it("should not use custom reaction shortcode when customReactionImagesEnabled is false", () => {
|
||||
mockedUnicodeToShortcode.mockReturnValue("");
|
||||
const reactionEvent = createReactionEvent("@alice:example.org", {
|
||||
"com.beeper.reaction.shortcode": "custom_emoji",
|
||||
});
|
||||
jest.spyOn(room, "getMember").mockReturnValue({ name: "Alice", userId: "@alice:example.org" } as RoomMember);
|
||||
|
||||
const vm = new ReactionsRowButtonTooltipViewModel(
|
||||
createProps({
|
||||
content: "mxc://custom/emoji",
|
||||
reactionEvents: [reactionEvent],
|
||||
customReactionImagesEnabled: false,
|
||||
}),
|
||||
);
|
||||
|
||||
expect(vm.getSnapshot().caption).toBeUndefined();
|
||||
});
|
||||
|
||||
it("should update snapshot and notify subscribers when setProps is called", () => {
|
||||
const aliceReaction = createReactionEvent("@alice:example.org");
|
||||
const bobReaction = createReactionEvent("@bob:example.org");
|
||||
|
||||
jest.spyOn(room, "getMember").mockImplementation((userId) => {
|
||||
const names: Record<string, string> = { "@alice:example.org": "Alice", "@bob:example.org": "Bob" };
|
||||
return names[userId!] ? ({ name: names[userId!], userId } as RoomMember) : null;
|
||||
});
|
||||
|
||||
const vm = new ReactionsRowButtonTooltipViewModel(createProps({ reactionEvents: [aliceReaction] }));
|
||||
expect(vm.getSnapshot().formattedSenders).toBe("Alice");
|
||||
|
||||
const subscriber = jest.fn();
|
||||
vm.subscribe(subscriber);
|
||||
|
||||
vm.setProps({ reactionEvents: [aliceReaction, bobReaction] });
|
||||
|
||||
expect(subscriber).toHaveBeenCalled();
|
||||
expect(vm.getSnapshot().formattedSenders).toContain("Alice");
|
||||
expect(vm.getSnapshot().formattedSenders).toContain("Bob");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user