Refactor Reactions Row Button to shared-components (#31993)
* Refactoring of ReactionRowButton to shared component MVVM * Removal of old component and creation of unit tests * Update * Update tests * Update tests to mimic VM * Update Lint Spacing * Added onKeyDown to follow wcag rules * Remove Unused code * Update screenshots * Removal of unessecery test and story * Update snapshot * Refactor reactions row VMs to granular setters and merge cheap snapshot updates * Elist Fix * Revert ReactionRowButtonToolTip Test * Fix ReactionsRowButtonViewModel tooltip sync to use tooltip setProps * Add dedicated ReactionsRowButtonViewModel unit tests for setters, tooltip sync, and click actions * Better Wording On Functions * Update snapshot * Update packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButtonView.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * use native button and tighten view model * Update Snapshots + small fixes on reactionrow * Removal of Null on viewmodel and adapting ReactionRow * Update test and removal of unused test since me MVVMD ReactionRowButton * align assertions with refactored update behavior * FIx issue with classNames component * Update snapshot * Removal of old test snapshot * Update Snapshot * Implement Css + Snapshot Updates * Update Snapshot and css to match old component style * restore MatrixClientContext fallback in ReactionsRow for export/test rendering * restore client fallback in ReactionsRow to preserve export rendering * Remove Unused Pcss FIle * Update Css * Update misstake always having button default to disabled render * Remove unsimiler css to original component * Update Snapshot to reflect css adjustments * Update css * Update font to compund * Update css to reflect old component * Update css to compund * Update Snapshot and css * Update css * Update HTML snapshot * Update css * Update Css * Update snapshots * Update HTML snapshot * Update css + snapshot * Update HTML snapshot * Removal of mx css * Update snapshot based on css removal * Update Html snapshot * Apply suggestion from @florianduros Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * remove setContext from ReactionsRowButtonViewModel * Update packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButtonView.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * add tooltipVm to ReactionsRowButtonViewSnapshot * added compound token variables * remove className from content and count inner elements * use useMatrixClientContext() directly for ReactionsRowButtonViewModel * Update snapshots * Update snapshot + fix Typescript error on test file * Removal of line-height in css * Added line-height back and removed font: inherit; * derive ReactionsRowButton className/ariaLabel types from HTML button attrs * Update packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButtonView.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Update src/viewmodels/message-body/ReactionsRowButtonViewModel.ts Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Update src/viewmodels/message-body/ReactionsRowButtonViewModel.ts Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Update test/viewmodels/message-body/ReactionsRowButtonViewModel-test.tsx Co-authored-by: Florian Duros <florian.duros@ormaz.fr> * Update snapshots and lint issues * Update model to respond to changes * Update aria label on view --------- Co-authored-by: Florian Duros <florian.duros@ormaz.fr>
This commit is contained in:
Zack
@@ -1,546 +0,0 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2023 Beeper
|
||||
|
||||
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 { 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({
|
||||
getRoom: jest.fn(),
|
||||
sendEvent: jest.fn().mockResolvedValue({ event_id: "$sent_event" }),
|
||||
redactEvent: jest.fn().mockResolvedValue({}),
|
||||
});
|
||||
const room = new Room(roomId, mockClient, userId);
|
||||
|
||||
const createProps = (relationContent: IContent): IProps => ({
|
||||
mxEvent: new MatrixEvent({
|
||||
room_id: roomId,
|
||||
event_id: "$test:example.com",
|
||||
content: { body: "test" },
|
||||
}),
|
||||
content: relationContent["m.relates_to"]?.key || "",
|
||||
count: 2,
|
||||
reactionEvents: [
|
||||
new MatrixEvent({
|
||||
type: "m.reaction",
|
||||
sender: "@user1:example.com",
|
||||
content: relationContent,
|
||||
}),
|
||||
new MatrixEvent({
|
||||
type: "m.reaction",
|
||||
sender: "@user2:example.com",
|
||||
content: relationContent,
|
||||
}),
|
||||
],
|
||||
customReactionImagesEnabled: true,
|
||||
});
|
||||
|
||||
beforeEach(function () {
|
||||
jest.clearAllMocks();
|
||||
mockClient.credentials = { userId: userId };
|
||||
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", () => {
|
||||
const props = createProps({
|
||||
"m.relates_to": {
|
||||
event_id: "$user2:example.com",
|
||||
key: "👍",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
});
|
||||
const root = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
expect(root.asFragment()).toMatchSnapshot();
|
||||
|
||||
// Try hover and make sure that the ReactionsRowButtonTooltip works
|
||||
const reactionButton = root.getByRole("button");
|
||||
const event = new MouseEvent("mouseover", {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
});
|
||||
reactionButton.dispatchEvent(event);
|
||||
|
||||
expect(root.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders reaction row button custom image reactions correctly", () => {
|
||||
const props = createProps({
|
||||
"com.beeper.reaction.shortcode": ":test:",
|
||||
"shortcode": ":test:",
|
||||
"m.relates_to": {
|
||||
event_id: "$user1:example.com",
|
||||
key: "mxc://example.com/123456789",
|
||||
rel_type: "m.annotation",
|
||||
},
|
||||
});
|
||||
|
||||
const root = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
expect(root.asFragment()).toMatchSnapshot();
|
||||
|
||||
// Try hover and make sure that the ReactionsRowButtonTooltip works
|
||||
const reactionButton = root.getByRole("button");
|
||||
const event = new MouseEvent("mouseover", {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
});
|
||||
reactionButton.dispatchEvent(event);
|
||||
|
||||
expect(root.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders without a room", () => {
|
||||
mockClient.getRoom.mockImplementation(() => null);
|
||||
|
||||
const props = createProps({});
|
||||
|
||||
const root = render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<ReactionsRowButton {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
-120
@@ -1,120 +0,0 @@
|
||||
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
|
||||
|
||||
exports[`ReactionsRowButton renders reaction row button custom image reactions correctly 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
aria-label="@user1:example.com and @user2:example.com reacted with :test:"
|
||||
class="mx_AccessibleButton mx_ReactionsRowButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<img
|
||||
alt=":test:"
|
||||
class="mx_ReactionsRowButton_content"
|
||||
height="16"
|
||||
src="https://not.a.real.url"
|
||||
width="16"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_ReactionsRowButton_count"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`ReactionsRowButton renders reaction row button custom image reactions correctly 2`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
aria-label="@user1:example.com and @user2:example.com reacted with :test:"
|
||||
class="mx_AccessibleButton mx_ReactionsRowButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<img
|
||||
alt=":test:"
|
||||
class="mx_ReactionsRowButton_content"
|
||||
height="16"
|
||||
src="https://not.a.real.url"
|
||||
width="16"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_ReactionsRowButton_count"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`ReactionsRowButton renders reaction row button emojis correctly 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
aria-label="@user1:example.com and @user2:example.com reacted with 👍"
|
||||
class="mx_AccessibleButton mx_ReactionsRowButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_ReactionsRowButton_content"
|
||||
>
|
||||
👍
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_ReactionsRowButton_count"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`ReactionsRowButton renders reaction row button emojis correctly 2`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
aria-label="@user1:example.com and @user2:example.com reacted with 👍"
|
||||
class="mx_AccessibleButton mx_ReactionsRowButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_ReactionsRowButton_content"
|
||||
>
|
||||
👍
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_ReactionsRowButton_count"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`ReactionsRowButton renders without a room 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_ReactionsRowButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_ReactionsRowButton_content"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_ReactionsRowButton_count"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,171 @@
|
||||
/*
|
||||
* 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 { EventType, type MatrixClient, type MatrixEvent, RelationType, type Room } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import {
|
||||
ReactionsRowButtonViewModel,
|
||||
type ReactionsRowButtonViewModelProps,
|
||||
} from "../../../src/viewmodels/message-body/ReactionsRowButtonViewModel";
|
||||
import { type ReactionsRowButtonTooltipViewModel } from "../../../src/viewmodels/message-body/ReactionsRowButtonTooltipViewModel";
|
||||
import { createTestClient, mkEvent, mkStubRoom } from "../../test-utils";
|
||||
import dis from "../../../src/dispatcher/dispatcher";
|
||||
|
||||
jest.mock("../../../src/dispatcher/dispatcher");
|
||||
|
||||
describe("ReactionsRowButtonViewModel", () => {
|
||||
let client: MatrixClient;
|
||||
let room: Room;
|
||||
let mxEvent: MatrixEvent;
|
||||
|
||||
const createReactionEvent = (senderId: string, key = "👍"): 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,
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const createProps = (overrides?: Partial<ReactionsRowButtonViewModelProps>): ReactionsRowButtonViewModelProps => ({
|
||||
client,
|
||||
mxEvent,
|
||||
content: "👍",
|
||||
count: 2,
|
||||
reactionEvents: [createReactionEvent("@alice:example.org"), createReactionEvent("@bob:example.org")],
|
||||
disabled: false,
|
||||
customReactionImagesEnabled: false,
|
||||
...overrides,
|
||||
});
|
||||
|
||||
const getTooltipVm = (vm: ReactionsRowButtonViewModel): ReactionsRowButtonTooltipViewModel =>
|
||||
vm.getSnapshot().tooltipVm as ReactionsRowButtonTooltipViewModel;
|
||||
const getAriaLabel = (vm: ReactionsRowButtonViewModel): string | undefined =>
|
||||
(vm.getSnapshot() as { ariaLabel?: string }).ariaLabel;
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
client = createTestClient();
|
||||
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" },
|
||||
});
|
||||
});
|
||||
|
||||
it("updates count with merge and does not touch tooltip props", () => {
|
||||
const vm = new ReactionsRowButtonViewModel(createProps());
|
||||
const tooltipSetPropsSpy = jest.spyOn(getTooltipVm(vm), "setProps");
|
||||
const listener = jest.fn();
|
||||
vm.subscribe(listener);
|
||||
|
||||
vm.setCount(5);
|
||||
|
||||
expect(vm.getSnapshot().count).toBe(5);
|
||||
expect(listener).toHaveBeenCalledTimes(1);
|
||||
expect(tooltipSetPropsSpy).not.toHaveBeenCalled();
|
||||
|
||||
vm.setCount(5);
|
||||
|
||||
expect(listener).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it("includes an ariaLabel in the snapshot", () => {
|
||||
const vm = new ReactionsRowButtonViewModel(createProps());
|
||||
|
||||
expect(getAriaLabel(vm)).toContain("reacted with 👍");
|
||||
});
|
||||
|
||||
it("updates selected state with myReactionEvent without touching tooltip props", () => {
|
||||
const vm = new ReactionsRowButtonViewModel(createProps());
|
||||
const tooltipSetPropsSpy = jest.spyOn(getTooltipVm(vm), "setProps");
|
||||
const listener = jest.fn();
|
||||
vm.subscribe(listener);
|
||||
const myReactionEvent = createReactionEvent("@me:example.org");
|
||||
|
||||
vm.setMyReactionEvent(myReactionEvent);
|
||||
|
||||
expect(vm.getSnapshot().isSelected).toBe(true);
|
||||
expect(listener).toHaveBeenCalledTimes(1);
|
||||
expect(tooltipSetPropsSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("updates disabled state without touching tooltip props", () => {
|
||||
const vm = new ReactionsRowButtonViewModel(createProps({ disabled: false }));
|
||||
const tooltipSetPropsSpy = jest.spyOn(getTooltipVm(vm), "setProps");
|
||||
|
||||
vm.setDisabled(true);
|
||||
|
||||
expect(vm.getSnapshot().isDisabled).toBe(true);
|
||||
expect(tooltipSetPropsSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("setReactionData forwards to tooltip via setProps and updates snapshot content", () => {
|
||||
const vm = new ReactionsRowButtonViewModel(createProps());
|
||||
const tooltipSetPropsSpy = jest.spyOn(getTooltipVm(vm), "setProps");
|
||||
const reactionEvents = [createReactionEvent("@carol:example.org", "👎")];
|
||||
|
||||
vm.setReactionData("👎", reactionEvents, false);
|
||||
|
||||
expect(vm.getSnapshot().content).toBe("👎");
|
||||
expect(tooltipSetPropsSpy).toHaveBeenCalledWith({
|
||||
content: "👎",
|
||||
reactionEvents,
|
||||
customReactionImagesEnabled: false,
|
||||
});
|
||||
|
||||
vm.setReactionData("👎", reactionEvents, false);
|
||||
|
||||
expect(tooltipSetPropsSpy).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it("redacts reaction on click when myReactionEvent exists", () => {
|
||||
const myReactionEvent = createReactionEvent("@me:example.org");
|
||||
const vm = new ReactionsRowButtonViewModel(createProps({ myReactionEvent }));
|
||||
|
||||
vm.onClick();
|
||||
|
||||
expect(client.redactEvent).toHaveBeenCalledWith(room.roomId, myReactionEvent.getId());
|
||||
expect(client.sendEvent).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("sends reaction and dispatches message_sent when no myReactionEvent exists", () => {
|
||||
const vm = new ReactionsRowButtonViewModel(createProps());
|
||||
|
||||
vm.onClick();
|
||||
|
||||
expect(client.sendEvent).toHaveBeenCalledWith(room.roomId, EventType.Reaction, {
|
||||
"m.relates_to": {
|
||||
rel_type: RelationType.Annotation,
|
||||
event_id: mxEvent.getId(),
|
||||
key: "👍",
|
||||
},
|
||||
});
|
||||
expect(dis.dispatch).toHaveBeenCalledWith({ action: "message_sent" });
|
||||
});
|
||||
|
||||
it("does nothing on click when disabled", () => {
|
||||
const vm = new ReactionsRowButtonViewModel(createProps({ disabled: true }));
|
||||
|
||||
vm.onClick();
|
||||
|
||||
expect(client.redactEvent).not.toHaveBeenCalled();
|
||||
expect(client.sendEvent).not.toHaveBeenCalled();
|
||||
expect(dis.dispatch).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user