diff --git a/app/soapbox/components/__tests__/timeline_queue_button_header.test.js b/app/soapbox/components/__tests__/timeline_queue_button_header.test.js index 155179551..bc011d309 100644 --- a/app/soapbox/components/__tests__/timeline_queue_button_header.test.js +++ b/app/soapbox/components/__tests__/timeline_queue_button_header.test.js @@ -33,7 +33,7 @@ describe('', () => { undefined, { timelines: fromJS({ home: { totalQueuedItemsCount: 1 } }) }, ); - expect(screen.getByText('Click to see 1 new post', { hidden: true })).toBeInTheDocument(); + expect(screen.getByText(/Click to see\s+1\s+new post/, { hidden: true })).toBeInTheDocument(); render( ', () => { undefined, { timelines: fromJS({ home: { totalQueuedItemsCount: 9999999 } }) }, ); - expect(screen.getByText('Click to see 9999999 new posts', { hidden: true })).toBeInTheDocument(); + expect(screen.getByText(/10.*M/, { hidden: true })).toBeInTheDocument(); }); }); diff --git a/app/soapbox/components/timeline_queue_button_header.tsx b/app/soapbox/components/timeline_queue_button_header.tsx index 122841a0c..292368571 100644 --- a/app/soapbox/components/timeline_queue_button_header.tsx +++ b/app/soapbox/components/timeline_queue_button_header.tsx @@ -6,6 +6,7 @@ import { useIntl, MessageDescriptor } from 'react-intl'; import Icon from 'soapbox/components/icon'; import { Text } from 'soapbox/components/ui'; import { useAppSelector, useSettings } from 'soapbox/hooks'; +import { shortNumberFormat } from 'soapbox/utils/numbers'; interface ITimelineQueueButtonHeader { onClick: () => void, @@ -73,7 +74,7 @@ const TimelineQueueButtonHeader: React.FC = ({ {(count > 0) && ( - {intl.formatMessage(message, { count })} + {intl.formatMessage(message, { count: shortNumberFormat(count) })} )}