From 56646ec5e6208e3c38cff48233908ec7f2972b65 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Wed, 18 May 2022 18:13:10 +0300
Subject: [PATCH 01/12] Add support for rendering custom emojis in reactions

Signed-off-by: Sumner Evans <sumner@beeper.com>
---
 .../views/messages/_ReactionsRowButton.pcss   |  1 +
 .../views/messages/ReactionsRowButton.tsx     | 25 ++++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/res/css/views/messages/_ReactionsRowButton.pcss b/res/css/views/messages/_ReactionsRowButton.pcss
index d27cb4f1887..26d2d25faee 100644
--- a/res/css/views/messages/_ReactionsRowButton.pcss
+++ b/res/css/views/messages/_ReactionsRowButton.pcss
@@ -22,6 +22,7 @@ limitations under the License.
     border-radius: 10px;
     background-color: $secondary-hairline-color;
     user-select: none;
+    align-items: center;
 
     &:hover {
         border-color: $quinary-content;
diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx
index 91e1d247739..d2b6124d321 100644
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -18,6 +18,7 @@ import React from "react";
 import classNames from "classnames";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
+import { mediaFromMxc } from "../../../customisations/Media";
 import { _t } from "../../../languageHandler";
 import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
 import dis from "../../../dispatcher/dispatcher";
@@ -121,6 +122,26 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
             }
         }
 
+        let reactionContent = (
+            <span className="mx_ReactionsRowButton_content" aria-hidden="true">
+                {content}
+            </span>
+        );
+        if (content.startsWith("mxc://")) {
+            const imageSrc = mediaFromMxc(content).srcHttp;
+            if (imageSrc) {
+                reactionContent = (
+                    <img
+                        className="mx_ReactionsRowButton_content"
+                        alt={content}
+                        src={imageSrc}
+                        width="16"
+                        height="16"
+                    />
+                );
+            }
+        }
+
         return (
             <AccessibleButton
                 className={classes}
@@ -130,9 +151,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                 onMouseOver={this.onMouseOver}
                 onMouseLeave={this.onMouseLeave}
             >
-                <span className="mx_ReactionsRowButton_content" aria-hidden="true">
-                    {content}
-                </span>
+                {reactionContent}
                 <span className="mx_ReactionsRowButton_count" aria-hidden="true">
                     {count}
                 </span>

From a4b8ae7331d768dc3fea92f9fa75e5dcdb1bbc72 Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Tue, 13 Jun 2023 19:18:58 +0300
Subject: [PATCH 02/12] Include custom reaction short names in tooltips

Signed-off-by: Sumner Evans <sumner@beeper.com>
---
 src/components/views/messages/ReactionsRowButtonTooltip.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.tsx b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
index 04cfe1dc58f..f34c04216e8 100644
--- a/src/components/views/messages/ReactionsRowButtonTooltip.tsx
+++ b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
@@ -43,12 +43,16 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
         let tooltipLabel: JSX.Element | undefined;
         if (room) {
             const senders: string[] = [];
+            let customReactionName = "";
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 const name = member?.name ?? reactionEvent.getSender()!;
                 senders.push(name);
+                if (reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
+                    customReactionName = reactionEvent.event.content?.["com.beeper.reaction.shortcode"];
+                }
             }
-            const shortName = unicodeToShortcode(content);
+            const shortName = unicodeToShortcode(content) || customReactionName;
             tooltipLabel = (
                 <div>
                     {_t(

From 4df35a5676117c177134626cf8eefe458b1396d3 Mon Sep 17 00:00:00 2001
From: Sumner Evans <sumner@beeper.com>
Date: Fri, 30 Jun 2023 12:39:41 -0600
Subject: [PATCH 03/12] Use custom reaction shortcode for accessibility

This uses the shortcode in the following places:

* The aria-label of the reaction buttons
* The alt text for the reaction image

Signed-off-by: Sumner Evans <sumner@beeper.com>
---
 src/components/views/messages/ReactionsRowButton.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx
index d2b6124d321..0406b922b0c 100644
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -107,16 +107,23 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
 
         const room = this.context.getRoom(mxEvent.getRoomId());
         let label: string | undefined;
+        let customReactionName = "";
         if (room) {
             const senders: string[] = [];
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 senders.push(member?.name || reactionEvent.getSender()!);
+                if (reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
+                    customReactionName = reactionEvent.event.content?.["com.beeper.reaction.shortcode"];
+                }
             }
 
             const reactors = formatCommaSeparatedList(senders, 6);
             if (content) {
-                label = _t("%(reactors)s reacted with %(content)s", { reactors, content });
+                label = _t("%(reactors)s reacted with %(content)s", {
+                    reactors,
+                    content: customReactionName || content,
+                });
             } else {
                 label = reactors;
             }
@@ -133,7 +140,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                 reactionContent = (
                     <img
                         className="mx_ReactionsRowButton_content"
-                        alt={content}
+                        alt={customReactionName || content}
                         src={imageSrc}
                         width="16"
                         height="16"

From c0822da31ea285b8a977ddceea023e526df4b9b5 Mon Sep 17 00:00:00 2001
From: Sumner Evans <me@sumnerevans.com>
Date: Sun, 2 Jul 2023 09:42:42 -0600
Subject: [PATCH 04/12] Remove explicit instantiation of `customReactionName`
 variable and add types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/messages/ReactionsRowButton.tsx        | 2 +-
 src/components/views/messages/ReactionsRowButtonTooltip.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx
index 0406b922b0c..ed42d169fda 100644
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -107,7 +107,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
 
         const room = this.context.getRoom(mxEvent.getRoomId());
         let label: string | undefined;
-        let customReactionName = "";
+        let customReactionName: string | undefined;
         if (room) {
             const senders: string[] = [];
             for (const reactionEvent of reactionEvents) {
diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.tsx b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
index f34c04216e8..f9032ddec88 100644
--- a/src/components/views/messages/ReactionsRowButtonTooltip.tsx
+++ b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
@@ -43,7 +43,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
         let tooltipLabel: JSX.Element | undefined;
         if (room) {
             const senders: string[] = [];
-            let customReactionName = "";
+            let customReactionName: string | undefined;
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 const name = member?.name ?? reactionEvent.getSender()!;

From 40f0379b154e46c9f1145a753ee37f4b8d297be4 Mon Sep 17 00:00:00 2001
From: Sumner Evans <sumner@beeper.com>
Date: Sun, 2 Jul 2023 10:10:09 -0600
Subject: [PATCH 05/12] Put custom reaction images behind a labs flag

Signed-off-by: Sumner Evans <sumner@beeper.com>
---
 src/components/views/messages/ReactionsRowButton.tsx      | 6 ++++--
 .../views/messages/ReactionsRowButtonTooltip.tsx          | 4 +++-
 src/i18n/strings/en_EN.json                               | 2 ++
 src/settings/Settings.tsx                                 | 8 ++++++++
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx
index ed42d169fda..883dc18ac54 100644
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -25,6 +25,7 @@ import dis from "../../../dispatcher/dispatcher";
 import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
 import AccessibleButton from "../elements/AccessibleButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import SettingsStore from "../../../settings/SettingsStore";
 interface IProps {
     // The event we're displaying reactions for
     mxEvent: MatrixEvent;
@@ -106,6 +107,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
         }
 
         const room = this.context.getRoom(mxEvent.getRoomId());
+        const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");
         let label: string | undefined;
         let customReactionName: string | undefined;
         if (room) {
@@ -113,7 +115,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 senders.push(member?.name || reactionEvent.getSender()!);
-                if (reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
+                if (customReactionImagesEnabled && reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
                     customReactionName = reactionEvent.event.content?.["com.beeper.reaction.shortcode"];
                 }
             }
@@ -134,7 +136,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                 {content}
             </span>
         );
-        if (content.startsWith("mxc://")) {
+        if (customReactionImagesEnabled && content.startsWith("mxc://")) {
             const imageSrc = mediaFromMxc(content).srcHttp;
             if (imageSrc) {
                 reactionContent = (
diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.tsx b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
index f9032ddec88..777c4a43074 100644
--- a/src/components/views/messages/ReactionsRowButtonTooltip.tsx
+++ b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
@@ -22,6 +22,7 @@ import { _t } from "../../../languageHandler";
 import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
 import Tooltip from "../elements/Tooltip";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import SettingsStore from "../../../settings/SettingsStore";
 interface IProps {
     // The event we're displaying reactions for
     mxEvent: MatrixEvent;
@@ -42,13 +43,14 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
         const room = this.context.getRoom(mxEvent.getRoomId());
         let tooltipLabel: JSX.Element | undefined;
         if (room) {
+            const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");
             const senders: string[] = [];
             let customReactionName: string | undefined;
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 const name = member?.name ?? reactionEvent.getSender()!;
                 senders.push(name);
-                if (reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
+                if (customReactionImagesEnabled && reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
                     customReactionName = reactionEvent.event.content?.["com.beeper.reaction.shortcode"];
                 }
             }
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 81fb487a062..5c74f5d7af4 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1004,6 +1004,8 @@
     "Enable new native OIDC flows (Under active development)": "Enable new native OIDC flows (Under active development)",
     "Rust cryptography implementation": "Rust cryptography implementation",
     "Font size": "Font size",
+    "Render custom images in reactions": "Render custom images in reactions",
+    "Sometimes referred to as \"custom emojis\".": "Sometimes referred to as \"custom emojis\".",
     "Use custom size": "Use custom size",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
     "Show stickers button": "Show stickers button",
diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx
index ceed24d183c..851b74c3571 100644
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@@ -486,6 +486,14 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         default: "",
         controller: new FontSizeController(),
     },
+    "feature_render_reaction_images": {
+        isFeature: true,
+        labsGroup: LabGroup.Messaging,
+        displayName: _td("Render custom images in reactions"),
+        description: _td('Sometimes referred to as "custom emojis".'),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     /**
      * With the transition to Compound we are moving to a base font size
      * of 16px. We're taking the opportunity to move away from the `baseFontSize`

From c054777704e07a1725020541623a13fce968b128 Mon Sep 17 00:00:00 2001
From: Sumner Evans <sumner@beeper.com>
Date: Sun, 2 Jul 2023 15:14:33 -0600
Subject: [PATCH 06/12] Use UnstableValue for finding the shortcode

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Sumner Evans <sumner@beeper.com>
---
 src/components/views/messages/ReactionsRow.tsx              | 3 +++
 src/components/views/messages/ReactionsRowButton.tsx        | 5 +++--
 src/components/views/messages/ReactionsRowButtonTooltip.tsx | 5 +++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/views/messages/ReactionsRow.tsx b/src/components/views/messages/ReactionsRow.tsx
index 9c78d3a9ed7..f672a16fdd4 100644
--- a/src/components/views/messages/ReactionsRow.tsx
+++ b/src/components/views/messages/ReactionsRow.tsx
@@ -18,6 +18,7 @@ import React, { SyntheticEvent } from "react";
 import classNames from "classnames";
 import { MatrixEvent, MatrixEventEvent, Relations, RelationsEvent } from "matrix-js-sdk/src/matrix";
 import { uniqBy } from "lodash";
+import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
 
 import { _t } from "../../../languageHandler";
 import { isContentActionable } from "../../../utils/EventUtils";
@@ -31,6 +32,8 @@ import AccessibleButton from "../elements/AccessibleButton";
 // The maximum number of reactions to initially show on a message.
 const MAX_ITEMS_WHEN_LIMITED = 8;
 
+export const REACTION_SHORTCODE_KEY = new UnstableValue("shortcode", "com.beeper.reaction.shortcode");
+
 const ReactButton: React.FC<IProps> = ({ mxEvent, reactions }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
 
diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx
index 883dc18ac54..0bae476b47e 100644
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -26,6 +26,7 @@ import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
 import AccessibleButton from "../elements/AccessibleButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import SettingsStore from "../../../settings/SettingsStore";
+import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
 interface IProps {
     // The event we're displaying reactions for
     mxEvent: MatrixEvent;
@@ -115,8 +116,8 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 senders.push(member?.name || reactionEvent.getSender()!);
-                if (customReactionImagesEnabled && reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
-                    customReactionName = reactionEvent.event.content?.["com.beeper.reaction.shortcode"];
+                if (customReactionImagesEnabled && REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) {
+                    customReactionName = REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent());
                 }
             }
 
diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.tsx b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
index 777c4a43074..deb090c8ac2 100644
--- a/src/components/views/messages/ReactionsRowButtonTooltip.tsx
+++ b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
@@ -23,6 +23,7 @@ import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
 import Tooltip from "../elements/Tooltip";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import SettingsStore from "../../../settings/SettingsStore";
+import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
 interface IProps {
     // The event we're displaying reactions for
     mxEvent: MatrixEvent;
@@ -50,8 +51,8 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
                 const member = room.getMember(reactionEvent.getSender()!);
                 const name = member?.name ?? reactionEvent.getSender()!;
                 senders.push(name);
-                if (customReactionImagesEnabled && reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
-                    customReactionName = reactionEvent.event.content?.["com.beeper.reaction.shortcode"];
+                if (customReactionImagesEnabled && REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) {
+                    customReactionName = REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent());
                 }
             }
             const shortName = unicodeToShortcode(content) || customReactionName;

From f7d7a8cde96b81e590efb7315fda84669c469abb Mon Sep 17 00:00:00 2001
From: Sumner Evans <sumner@beeper.com>
Date: Thu, 6 Jul 2023 10:46:38 -0600
Subject: [PATCH 07/12] Move calculation of whether to render custom reaction
 images up to ReactionRow

Signed-off-by: Sumner Evans <sumner@beeper.com>
---
 src/components/views/messages/ReactionsRow.tsx    |  3 +++
 .../views/messages/ReactionsRowButton.tsx         | 15 ++++++++++-----
 .../views/messages/ReactionsRowButtonTooltip.tsx  | 12 ++++++++----
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/views/messages/ReactionsRow.tsx b/src/components/views/messages/ReactionsRow.tsx
index f672a16fdd4..ee09de1d739 100644
--- a/src/components/views/messages/ReactionsRow.tsx
+++ b/src/components/views/messages/ReactionsRow.tsx
@@ -28,6 +28,7 @@ import ReactionPicker from "../emojipicker/ReactionPicker";
 import ReactionsRowButton from "./ReactionsRowButton";
 import RoomContext from "../../../contexts/RoomContext";
 import AccessibleButton from "../elements/AccessibleButton";
+import SettingsStore from "../../../settings/SettingsStore";
 
 // The maximum number of reactions to initially show on a message.
 const MAX_ITEMS_WHEN_LIMITED = 8;
@@ -172,6 +173,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
         if (!reactions || !isContentActionable(mxEvent)) {
             return null;
         }
+        const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");
 
         let items = reactions
             .getSortedAnnotationsByKey()
@@ -198,6 +200,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
                         mxEvent={mxEvent}
                         reactionEvents={deduplicatedEvents}
                         myReactionEvent={myReactionEvent}
+                        customReactionImagesEnabled={customReactionImagesEnabled}
                         disabled={
                             !this.context.canReact ||
                             (myReactionEvent && !myReactionEvent.isRedacted() && !this.context.canSelfRedact)
diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx
index 0bae476b47e..a0561406149 100644
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -17,6 +17,7 @@ limitations under the License.
 import React from "react";
 import classNames from "classnames";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { Optional } from "matrix-events-sdk/lib/types";
 
 import { mediaFromMxc } from "../../../customisations/Media";
 import { _t } from "../../../languageHandler";
@@ -25,7 +26,6 @@ import dis from "../../../dispatcher/dispatcher";
 import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
 import AccessibleButton from "../elements/AccessibleButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import SettingsStore from "../../../settings/SettingsStore";
 import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
 interface IProps {
     // The event we're displaying reactions for
@@ -40,6 +40,8 @@ interface IProps {
     myReactionEvent?: MatrixEvent;
     // Whether to prevent quick-reactions by clicking on this reaction
     disabled?: boolean;
+    // Whether to render custom image reactions
+    customReactionImagesEnabled?: boolean;
 }
 
 interface IState {
@@ -103,20 +105,23 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                     content={content}
                     reactionEvents={reactionEvents}
                     visible={this.state.tooltipVisible}
+                    customReactionImagesEnabled={this.props.customReactionImagesEnabled}
                 />
             );
         }
 
         const room = this.context.getRoom(mxEvent.getRoomId());
-        const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");
         let label: string | undefined;
-        let customReactionName: string | undefined;
+        let customReactionName: Optional<string>;
         if (room) {
             const senders: string[] = [];
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 senders.push(member?.name || reactionEvent.getSender()!);
-                if (customReactionImagesEnabled && REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) {
+                if (
+                    this.props.customReactionImagesEnabled &&
+                    REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())
+                ) {
                     customReactionName = REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent());
                 }
             }
@@ -137,7 +142,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                 {content}
             </span>
         );
-        if (customReactionImagesEnabled && content.startsWith("mxc://")) {
+        if (this.props.customReactionImagesEnabled && content.startsWith("mxc://")) {
             const imageSrc = mediaFromMxc(content).srcHttp;
             if (imageSrc) {
                 reactionContent = (
diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.tsx b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
index deb090c8ac2..a11bc48fe61 100644
--- a/src/components/views/messages/ReactionsRowButtonTooltip.tsx
+++ b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
@@ -16,13 +16,13 @@ limitations under the License.
 
 import React from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { Optional } from "matrix-events-sdk/lib/types";
 
 import { unicodeToShortcode } from "../../../HtmlUtils";
 import { _t } from "../../../languageHandler";
 import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
 import Tooltip from "../elements/Tooltip";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import SettingsStore from "../../../settings/SettingsStore";
 import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
 interface IProps {
     // The event we're displaying reactions for
@@ -32,6 +32,8 @@ interface IProps {
     // A list of Matrix reaction events for this key
     reactionEvents: MatrixEvent[];
     visible: boolean;
+    // Whether to render custom image reactions
+    customReactionImagesEnabled?: boolean;
 }
 
 export default class ReactionsRowButtonTooltip extends React.PureComponent<IProps> {
@@ -44,14 +46,16 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
         const room = this.context.getRoom(mxEvent.getRoomId());
         let tooltipLabel: JSX.Element | undefined;
         if (room) {
-            const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");
             const senders: string[] = [];
-            let customReactionName: string | undefined;
+            let customReactionName: Optional<string>;
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 const name = member?.name ?? reactionEvent.getSender()!;
                 senders.push(name);
-                if (customReactionImagesEnabled && REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) {
+                if (
+                    this.props.customReactionImagesEnabled &&
+                    REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())
+                ) {
                     customReactionName = REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent());
                 }
             }

From 3045c3fce1d61403b0735fc24b58b7b1a032f7a4 Mon Sep 17 00:00:00 2001
From: Sumner Evans <sumner@beeper.com>
Date: Thu, 6 Jul 2023 10:48:00 -0600
Subject: [PATCH 08/12] Make alt text more friendly when custom reaction
 doesn't have shortcode

Signed-off-by: Sumner Evans <sumner@beeper.com>
---
 src/components/views/messages/ReactionsRowButton.tsx | 2 +-
 src/i18n/strings/en_EN.json                          | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx
index a0561406149..bd3626eed84 100644
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -148,7 +148,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
                 reactionContent = (
                     <img
                         className="mx_ReactionsRowButton_content"
-                        alt={customReactionName || content}
+                        alt={customReactionName || _t("Custom reaction")}
                         src={imageSrc}
                         width="16"
                         height="16"
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 5c74f5d7af4..5cc7a76d6b2 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -2483,6 +2483,7 @@
     "Add reaction": "Add reaction",
     "Reactions": "Reactions",
     "%(reactors)s reacted with %(content)s": "%(reactors)s reacted with %(content)s",
+    "Custom reaction": "Custom reaction",
     "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
     "Message deleted on %(date)s": "Message deleted on %(date)s",
     "%(senderDisplayName)s changed the avatar for %(roomName)s": "%(senderDisplayName)s changed the avatar for %(roomName)s",

From 53e9edae76ca9640fa0b54924379e694b6b430b1 Mon Sep 17 00:00:00 2001
From: Sumner Evans <sumner@beeper.com>
Date: Tue, 15 Aug 2023 22:03:47 -0600
Subject: [PATCH 09/12] Add test for ReactionsRowButton

Signed-off-by: Sumner Evans <sumner@beeper.com>
---
 .../views/messages/ReactionsRowButton.tsx     |   2 +-
 .../messages/ReactionsRowButton-test.tsx      | 118 +++++
 .../ReactionsRowButton-test.tsx.snap          | 470 ++++++++++++++++++
 3 files changed, 589 insertions(+), 1 deletion(-)
 create mode 100644 test/components/views/messages/ReactionsRowButton-test.tsx
 create mode 100644 test/components/views/messages/__snapshots__/ReactionsRowButton-test.tsx.snap

diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx
index bd3626eed84..1264b42a46a 100644
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -27,7 +27,7 @@ import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
 import AccessibleButton from "../elements/AccessibleButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
-interface IProps {
+export interface IProps {
     // The event we're displaying reactions for
     mxEvent: MatrixEvent;
     // The reaction content / key / emoji
diff --git a/test/components/views/messages/ReactionsRowButton-test.tsx b/test/components/views/messages/ReactionsRowButton-test.tsx
new file mode 100644
index 00000000000..1e71f102604
--- /dev/null
+++ b/test/components/views/messages/ReactionsRowButton-test.tsx
@@ -0,0 +1,118 @@
+/*
+Copyright 2023 Beeper
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React from "react";
+import { IContent, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { render } from "@testing-library/react";
+
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import { getMockClientWithEventEmitter } from "../../../test-utils";
+import ReactionsRowButton, { IProps } from "../../../../src/components/views/messages/ReactionsRowButton";
+
+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(),
+    });
+    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;
+        });
+    });
+
+    it("reaction row button renders 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).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).toMatchSnapshot();
+    });
+
+    it("reaction row button renders 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).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).toMatchSnapshot();
+    });
+});
diff --git a/test/components/views/messages/__snapshots__/ReactionsRowButton-test.tsx.snap b/test/components/views/messages/__snapshots__/ReactionsRowButton-test.tsx.snap
new file mode 100644
index 00000000000..7172a9823e3
--- /dev/null
+++ b/test/components/views/messages/__snapshots__/ReactionsRowButton-test.tsx.snap
@@ -0,0 +1,470 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReactionsRowButton reaction row button renders custom image reactions correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div
+      class="mx_Tooltip_wrapper"
+    />
+    <div>
+      <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>
+    </div>
+  </body>,
+  "container": <div>
+    <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>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`ReactionsRowButton reaction row button renders custom image reactions correctly 2`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div
+      class="mx_Tooltip_wrapper"
+    >
+      <div
+        class="mx_Tooltip mx_Tooltip_visible"
+        role="tooltip"
+        style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
+      >
+        <div
+          class="mx_Tooltip_chevron"
+        />
+        <div>
+          <span>
+            <div
+              class="mx_Tooltip_title"
+            >
+              @user1:example.com and @user2:example.com
+            </div>
+            <div
+              class="mx_Tooltip_sub"
+            >
+              reacted with :test:
+            </div>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <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 />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <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 />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`ReactionsRowButton reaction row button renders emojis correctly 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <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>
+    </div>
+  </body>,
+  "container": <div>
+    <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>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`ReactionsRowButton reaction row button renders emojis correctly 2`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <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 />
+      </div>
+    </div>
+    <div
+      class="mx_Tooltip_wrapper"
+    >
+      <div
+        class="mx_Tooltip mx_Tooltip_visible"
+        role="tooltip"
+        style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
+      >
+        <div
+          class="mx_Tooltip_chevron"
+        />
+        <div>
+          <span>
+            <div
+              class="mx_Tooltip_title"
+            >
+              @user1:example.com and @user2:example.com
+            </div>
+            <div
+              class="mx_Tooltip_sub"
+            >
+              reacted with :+1:
+            </div>
+          </span>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <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 />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

From 1ab97d3d57d6635a776208404f68476a404b55df Mon Sep 17 00:00:00 2001
From: Sumner Evans <me@sumnerevans.com>
Date: Wed, 16 Aug 2023 15:38:57 -0600
Subject: [PATCH 10/12] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 test/components/views/messages/ReactionsRowButton-test.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/test/components/views/messages/ReactionsRowButton-test.tsx b/test/components/views/messages/ReactionsRowButton-test.tsx
index 1e71f102604..a9e9e5882c5 100644
--- a/test/components/views/messages/ReactionsRowButton-test.tsx
+++ b/test/components/views/messages/ReactionsRowButton-test.tsx
@@ -13,6 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
 import React from "react";
 import { IContent, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { render } from "@testing-library/react";
@@ -61,7 +62,7 @@ describe("ReactionsRowButton", () => {
         });
     });
 
-    it("reaction row button renders emojis correctly", () => {
+    it("renders reaction row button emojis correctly", () => {
         const props = createProps({
             "m.relates_to": {
                 event_id: "$user2:example.com",
@@ -87,7 +88,7 @@ describe("ReactionsRowButton", () => {
         expect(root).toMatchSnapshot();
     });
 
-    it("reaction row button renders custom image reactions correctly", () => {
+    it("renders reaction row button custom image reactions correctly", () => {
         const props = createProps({
             "com.beeper.reaction.shortcode": ":test:",
             "shortcode": ":test:",

From 3845d2982131417377608b3c3dde1f6baf113d0c Mon Sep 17 00:00:00 2001
From: Sumner Evans <sumner@beeper.com>
Date: Wed, 16 Aug 2023 15:47:26 -0600
Subject: [PATCH 11/12] Don't use Optional

Signed-off-by: Sumner Evans <sumner@beeper.com>
---
 .../views/messages/ReactionsRowButton.tsx           | 13 +++++--------
 .../views/messages/ReactionsRowButtonTooltip.tsx    | 13 +++++--------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/components/views/messages/ReactionsRowButton.tsx b/src/components/views/messages/ReactionsRowButton.tsx
index 1264b42a46a..7890a1a3b76 100644
--- a/src/components/views/messages/ReactionsRowButton.tsx
+++ b/src/components/views/messages/ReactionsRowButton.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import React from "react";
 import classNames from "classnames";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { Optional } from "matrix-events-sdk/lib/types";
 
 import { mediaFromMxc } from "../../../customisations/Media";
 import { _t } from "../../../languageHandler";
@@ -112,18 +111,16 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
 
         const room = this.context.getRoom(mxEvent.getRoomId());
         let label: string | undefined;
-        let customReactionName: Optional<string>;
+        let customReactionName: string | undefined;
         if (room) {
             const senders: string[] = [];
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 senders.push(member?.name || reactionEvent.getSender()!);
-                if (
-                    this.props.customReactionImagesEnabled &&
-                    REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())
-                ) {
-                    customReactionName = REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent());
-                }
+                customReactionName =
+                    (this.props.customReactionImagesEnabled &&
+                        REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) ||
+                    undefined;
             }
 
             const reactors = formatCommaSeparatedList(senders, 6);
diff --git a/src/components/views/messages/ReactionsRowButtonTooltip.tsx b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
index a11bc48fe61..74b134dda55 100644
--- a/src/components/views/messages/ReactionsRowButtonTooltip.tsx
+++ b/src/components/views/messages/ReactionsRowButtonTooltip.tsx
@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { Optional } from "matrix-events-sdk/lib/types";
 
 import { unicodeToShortcode } from "../../../HtmlUtils";
 import { _t } from "../../../languageHandler";
@@ -47,17 +46,15 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
         let tooltipLabel: JSX.Element | undefined;
         if (room) {
             const senders: string[] = [];
-            let customReactionName: Optional<string>;
+            let customReactionName: string | undefined;
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 const name = member?.name ?? reactionEvent.getSender()!;
                 senders.push(name);
-                if (
-                    this.props.customReactionImagesEnabled &&
-                    REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())
-                ) {
-                    customReactionName = REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent());
-                }
+                customReactionName =
+                    (this.props.customReactionImagesEnabled &&
+                        REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) ||
+                    undefined;
             }
             const shortName = unicodeToShortcode(content) || customReactionName;
             tooltipLabel = (

From acae684ce887de79b25223312889dfadffe3b125 Mon Sep 17 00:00:00 2001
From: Sumner Evans <me@sumnerevans.com>
Date: Fri, 18 Aug 2023 14:41:48 -0600
Subject: [PATCH 12/12] Fix ReactionsRowButton test

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Sumner Evans <sumner@beeper.com>
---
 .../messages/ReactionsRowButton-test.tsx      |   8 +-
 .../ReactionsRowButton-test.tsx.snap          | 541 +++---------------
 2 files changed, 90 insertions(+), 459 deletions(-)

diff --git a/test/components/views/messages/ReactionsRowButton-test.tsx b/test/components/views/messages/ReactionsRowButton-test.tsx
index a9e9e5882c5..b3ec6313d12 100644
--- a/test/components/views/messages/ReactionsRowButton-test.tsx
+++ b/test/components/views/messages/ReactionsRowButton-test.tsx
@@ -75,7 +75,7 @@ describe("ReactionsRowButton", () => {
                 <ReactionsRowButton {...props} />
             </MatrixClientContext.Provider>,
         );
-        expect(root).toMatchSnapshot();
+        expect(root.asFragment()).toMatchSnapshot();
 
         // Try hover and make sure that the ReactionsRowButtonTooltip works
         const reactionButton = root.getByRole("button");
@@ -85,7 +85,7 @@ describe("ReactionsRowButton", () => {
         });
         reactionButton.dispatchEvent(event);
 
-        expect(root).toMatchSnapshot();
+        expect(root.asFragment()).toMatchSnapshot();
     });
 
     it("renders reaction row button custom image reactions correctly", () => {
@@ -104,7 +104,7 @@ describe("ReactionsRowButton", () => {
                 <ReactionsRowButton {...props} />
             </MatrixClientContext.Provider>,
         );
-        expect(root).toMatchSnapshot();
+        expect(root.asFragment()).toMatchSnapshot();
 
         // Try hover and make sure that the ReactionsRowButtonTooltip works
         const reactionButton = root.getByRole("button");
@@ -114,6 +114,6 @@ describe("ReactionsRowButton", () => {
         });
         reactionButton.dispatchEvent(event);
 
-        expect(root).toMatchSnapshot();
+        expect(root.asFragment()).toMatchSnapshot();
     });
 });
diff --git a/test/components/views/messages/__snapshots__/ReactionsRowButton-test.tsx.snap b/test/components/views/messages/__snapshots__/ReactionsRowButton-test.tsx.snap
index 7172a9823e3..a6479956a70 100644
--- a/test/components/views/messages/__snapshots__/ReactionsRowButton-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/ReactionsRowButton-test.tsx.snap
@@ -1,470 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ReactionsRowButton reaction row button renders custom image reactions correctly 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div
-      class="mx_Tooltip_wrapper"
+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"
     />
-    <div>
-      <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>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      aria-label="@user1:example.com and @user2:example.com reacted with :test:"
-      class="mx_AccessibleButton mx_ReactionsRowButton"
-      role="button"
-      tabindex="0"
+    <span
+      aria-hidden="true"
+      class="mx_ReactionsRowButton_count"
     >
-      <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>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+      2
+    </span>
+  </div>
+</DocumentFragment>
 `;
 
-exports[`ReactionsRowButton reaction row button renders custom image reactions correctly 2`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div
-      class="mx_Tooltip_wrapper"
-    >
-      <div
-        class="mx_Tooltip mx_Tooltip_visible"
-        role="tooltip"
-        style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
-      >
-        <div
-          class="mx_Tooltip_chevron"
-        />
-        <div>
-          <span>
-            <div
-              class="mx_Tooltip_title"
-            >
-              @user1:example.com and @user2:example.com
-            </div>
-            <div
-              class="mx_Tooltip_sub"
-            >
-              reacted with :test:
-            </div>
-          </span>
-        </div>
-      </div>
-    </div>
-    <div>
-      <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 />
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      aria-label="@user1:example.com and @user2:example.com reacted with :test:"
-      class="mx_AccessibleButton mx_ReactionsRowButton"
-      role="button"
-      tabindex="0"
+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"
     >
-      <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 />
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+      2
+    </span>
+    <div />
+  </div>
+</DocumentFragment>
 `;
 
-exports[`ReactionsRowButton reaction row button renders emojis correctly 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <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>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      aria-label="@user1:example.com and @user2:example.com reacted with 👍"
-      class="mx_AccessibleButton mx_ReactionsRowButton"
-      role="button"
-      tabindex="0"
+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"
     >
-      <span
-        aria-hidden="true"
-        class="mx_ReactionsRowButton_content"
-      >
-        👍
-      </span>
-      <span
-        aria-hidden="true"
-        class="mx_ReactionsRowButton_count"
-      >
-        2
-      </span>
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+      2
+    </span>
+  </div>
+</DocumentFragment>
 `;
 
-exports[`ReactionsRowButton reaction row button renders emojis correctly 2`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <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 />
-      </div>
-    </div>
-    <div
-      class="mx_Tooltip_wrapper"
+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"
     >
-      <div
-        class="mx_Tooltip mx_Tooltip_visible"
-        role="tooltip"
-        style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
-      >
-        <div
-          class="mx_Tooltip_chevron"
-        />
-        <div>
-          <span>
-            <div
-              class="mx_Tooltip_title"
-            >
-              @user1:example.com and @user2:example.com
-            </div>
-            <div
-              class="mx_Tooltip_sub"
-            >
-              reacted with :+1:
-            </div>
-          </span>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      aria-label="@user1:example.com and @user2:example.com reacted with 👍"
-      class="mx_AccessibleButton mx_ReactionsRowButton"
-      role="button"
-      tabindex="0"
+      👍
+    </span>
+    <span
+      aria-hidden="true"
+      class="mx_ReactionsRowButton_count"
     >
-      <span
-        aria-hidden="true"
-        class="mx_ReactionsRowButton_content"
-      >
-        👍
-      </span>
-      <span
-        aria-hidden="true"
-        class="mx_ReactionsRowButton_count"
-      >
-        2
-      </span>
-      <div />
-    </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+      2
+    </span>
+    <div />
+  </div>
+</DocumentFragment>
 `;