fix(badges): sort a copy in BadgesRow instead of mutating the prop

src/components/Badges/BadgesRow.tsx

@@ -38,7 +38,7 @@ const BadgesRow = ({ badges, className, isSelfProfile = true }: BadgesRowProps)
 
     // sort by earnedAt, newest first
     const sortedBadges = useMemo(() => {
-        return badges.sort((a, b) => {
+        return [...badges].sort((a, b) => {
             const at = a.earnedAt ? new Date(a.earnedAt).getTime() : 0
             const bt = b.earnedAt ? new Date(b.earnedAt).getTime() : 0
             return bt - at

src/components/Badges/__tests__/BadgesRow.test.tsx

@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react'
+import type { ComponentProps } from 'react'
+import BadgesRow from '@/components/Badges/BadgesRow'
+
+jest.mock('next/image', () => ({
+    __esModule: true,
+    default: ({ unoptimized, fill, ...rest }: ComponentProps<'img'> & { unoptimized?: boolean; fill?: boolean }) => (
+        <img {...rest} />
+    ),
+}))
+
+jest.mock('@/components/Tooltip', () => ({
+    Tooltip: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
+const badge = (code: string, earnedAt: string) => ({
+    code,
+    name: code,
+    description: null,
+    iconUrl: null,
+    earnedAt,
+})
+
+describe('BadgesRow', () => {
+    it('does not mutate the badges array it is given', () => {
+        // Oldest first, so a newest-first sort has to reorder them.
+        const badges = [
+            badge('OLDEST', '2024-01-01T00:00:00.000Z'),
+            badge('MIDDLE', '2024-06-01T00:00:00.000Z'),
+            badge('NEWEST', '2024-12-01T00:00:00.000Z'),
+        ]
+
+        render(<BadgesRow badges={badges} />)
+
+        expect(badges.map((b) => b.code)).toEqual(['OLDEST', 'MIDDLE', 'NEWEST'])
+    })
+})