Fix notification test types

app/soapbox/components/status.tsx

@@ -84,8 +84,6 @@ interface IStatus extends RouteComponentProps {
   onMoveDown: (statusId: string, featured?: boolean) => void,
   getScrollPosition?: () => ScrollPosition | undefined,
   updateScrollBottom?: (bottom: number) => void,
-  cacheMediaWidth: () => void,
-  cachedMediaWidth: number,
   group: ImmutableMap<string, any>,
   displayMedia: string,
   allowedEmoji: ImmutableList<string>,

app/soapbox/features/notifications/components/__tests__/notification.test.tsx

@@ -33,10 +33,12 @@ describe('<Notification />', () => {
 
   describe('grouped notifications', () => {
     it('renders a grouped follow notification for more than 2', async() => {
-      const { notification, state } = normalize(require('soapbox/__fixtures__/notification-follow.json'));
-      const groupedNotification = { ...notification.toJS(), total_count: 5 };
+      const { notification, state } = normalize({
+        ...require('soapbox/__fixtures__/notification-follow.json'),
+        total_count: 5,
+      });
 
-      render(<Notification notification={groupedNotification} />, undefined, state);
+      render(<Notification notification={notification} />, undefined, state);
 
       expect(screen.getByTestId('notification')).toBeInTheDocument();
       expect(screen.getByTestId('account')).toContainHTML('neko@rdrama.cc');
@@ -44,10 +46,12 @@ describe('<Notification />', () => {
     });
 
     it('renders a grouped follow notification for 1', async() => {
-      const { notification, state } = normalize(require('soapbox/__fixtures__/notification-follow.json'));
-      const groupedNotification = { ...notification.toJS(), total_count: 2 };
+      const { notification, state } = normalize({
+        ...require('soapbox/__fixtures__/notification-follow.json'),
+        total_count: 2,
+      });
 
-      render(<Notification notification={groupedNotification} />, undefined, state);
+      render(<Notification notification={notification} />, undefined, state);
 
       expect(screen.getByTestId('notification')).toBeInTheDocument();
       expect(screen.getByTestId('account')).toContainHTML('neko@rdrama.cc');

app/soapbox/features/notifications/components/notification.tsx

@@ -128,16 +128,14 @@ const buildMessage = (
 interface INotificaton {
   hidden?: boolean,
   notification: NotificationEntity,
-  onMoveUp: (notificationId: string) => void,
-  onMoveDown: (notificationId: string) => void,
-  onMention: (account: Account) => void,
-  onFavourite: (status: Status) => void,
-  onReblog: (status: Status, e?: KeyboardEvent) => void,
-  onToggleHidden: (status: Status) => void,
+  onMoveUp?: (notificationId: string) => void,
+  onMoveDown?: (notificationId: string) => void,
+  onMention?: (account: Account) => void,
+  onFavourite?: (status: Status) => void,
+  onReblog?: (status: Status, e?: KeyboardEvent) => void,
+  onToggleHidden?: (status: Status) => void,
   getScrollPosition?: () => ScrollPosition | undefined,
   updateScrollBottom?: (bottom: number) => void,
-  cacheMediaWidth: () => void,
-  cachedMediaWidth: number,
   siteTitle?: string,
 }
 
@@ -180,35 +178,39 @@ const Notification: React.FC<INotificaton> = (props) => {
   const handleMention = (e?: KeyboardEvent) => {
     e?.preventDefault();
 
-    if (account && typeof account === 'object') {
+    if (props.onMention && account && typeof account === 'object') {
       props.onMention(account);
     }
   };
 
   const handleHotkeyFavourite = (e?: KeyboardEvent) => {
-    if (status && typeof status === 'object') {
+    if (props.onFavourite && status && typeof status === 'object') {
       props.onFavourite(status);
     }
   };
 
   const handleHotkeyBoost = (e?: KeyboardEvent) => {
-    if (status && typeof status === 'object') {
+    if (props.onReblog && status && typeof status === 'object') {
       props.onReblog(status, e);
     }
   };
 
   const handleHotkeyToggleHidden = (e?: KeyboardEvent) => {
-    if (status && typeof status === 'object') {
+    if (props.onToggleHidden && status && typeof status === 'object') {
       props.onToggleHidden(status);
     }
   };
 
   const handleMoveUp = () => {
-    onMoveUp(notification.id);
+    if (onMoveUp) {
+      onMoveUp(notification.id);
+    }
   };
 
   const handleMoveDown = () => {
-    onMoveDown(notification.id);
+    if (onMoveDown) {
+      onMoveDown(notification.id);
+    }
   };
 
   const renderIcon = (): React.ReactNode => {
@@ -268,8 +270,6 @@ const Notification: React.FC<INotificaton> = (props) => {
             contextType='notifications'
             getScrollPosition={props.getScrollPosition}
             updateScrollBottom={props.updateScrollBottom}
-            cachedMediaWidth={props.cachedMediaWidth}
-            cacheMediaWidth={props.cacheMediaWidth}
           />
         ) : null;
       default: