diff --git a/src/components/Badges/BadgesRow.tsx b/src/components/Badges/BadgesRow.tsx index 696550bda0..f13940f564 100644 --- a/src/components/Badges/BadgesRow.tsx +++ b/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 diff --git a/src/components/Badges/__tests__/BadgesRow.test.tsx b/src/components/Badges/__tests__/BadgesRow.test.tsx new file mode 100644 index 0000000000..b5bd3cf17d --- /dev/null +++ b/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 }) => ( + + ), +})) + +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() + + expect(badges.map((b) => b.code)).toEqual(['OLDEST', 'MIDDLE', 'NEWEST']) + }) +})