Update model to respond to changes

Author: ZacksBot

packages/shared-components/src/message-body/ReactionsRowButton/ReactionsRowButtonView.tsx

@@ -12,9 +12,10 @@ import { type ViewModel, useViewModel } from "../../viewmodel";
 import { ReactionsRowButtonTooltipView, type ReactionsRowButtonTooltipViewModel } from "../ReactionsRowButtonTooltip";
 import styles from "./ReactionsRowButton.module.css";
 
-type ButtonAttribute = HTMLAttributes<HTMLButtonElement>;
-
-export interface ReactionsRowButtonViewSnapshot extends Pick<HTMLAttributes<HTMLButtonElement>, "className" | "aria-label"> {
+export interface ReactionsRowButtonViewSnapshot extends Pick<
+    HTMLAttributes<HTMLButtonElement>,
+    "className" | "aria-label"
+> {
     /**
      * The reaction content to display when not using a custom image.
      */

src/viewmodels/message-body/ReactionsRowButtonViewModel.ts

@@ -63,6 +63,8 @@ export class ReactionsRowButtonViewModel
     implements ReactionsRowButtonViewModelInterface
 {
     private readonly tooltipVm: ReactionsRowButtonTooltipViewModel;
+    private static readonly getAriaLabel = (snapshot: ReactionsRowButtonViewSnapshot): string | undefined =>
+        (snapshot as ReactionsRowButtonViewSnapshot & { ariaLabel?: string }).ariaLabel;
 
     private static readonly computeSnapshot = (
         props: ReactionsRowButtonViewModelProps,
@@ -115,7 +117,7 @@ export class ReactionsRowButtonViewModel
             }
         }
 
-        return {
+        const snapshot = {
             content,
             count,
             className,
@@ -126,6 +128,8 @@ export class ReactionsRowButtonViewModel
             imageAlt,
             tooltipVm,
         };
+
+        return snapshot;
     };
 
     public constructor(props: ReactionsRowButtonViewModelProps) {
@@ -147,7 +151,8 @@ export class ReactionsRowButtonViewModel
         if (
             nextSnapshot.content === currentSnapshot.content &&
             nextSnapshot.count === currentSnapshot.count &&
-            nextSnapshot.ariaLabel === currentSnapshot.ariaLabel &&
+            ReactionsRowButtonViewModel.getAriaLabel(nextSnapshot) ===
+                ReactionsRowButtonViewModel.getAriaLabel(currentSnapshot) &&
             nextSnapshot.isSelected === currentSnapshot.isSelected &&
             nextSnapshot.isDisabled === currentSnapshot.isDisabled &&
             nextSnapshot.imageSrc === currentSnapshot.imageSrc &&

test/viewmodels/message-body/ReactionsRowButtonViewModel-test.tsx

@@ -51,6 +51,8 @@ describe("ReactionsRowButtonViewModel", () => {
 
     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();
@@ -83,6 +85,12 @@ describe("ReactionsRowButtonViewModel", () => {
         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");