diff --git a/__tests__/components/leaderboard/LeaderboardCardsCollected.test.tsx b/__tests__/components/leaderboard/LeaderboardCardsCollected.test.tsx index 198d4cb23c..a3d7ef5dfb 100644 --- a/__tests__/components/leaderboard/LeaderboardCardsCollected.test.tsx +++ b/__tests__/components/leaderboard/LeaderboardCardsCollected.test.tsx @@ -1,16 +1,20 @@ -import { render, screen } from '@testing-library/react'; -import LeaderboardCardsCollectedComponent from '@/components/leaderboard/LeaderboardCardsCollected'; -import { Content, Collector } from '@/components/leaderboard/Leaderboard'; +import { render, screen } from "@testing-library/react"; +import LeaderboardCardsCollectedComponent from "@/components/leaderboard/LeaderboardCardsCollected"; +import { Content, Collector } from "@/components/leaderboard/Leaderboard"; -jest.mock('@/components/leaderboard/leaderboard_helpers', () => { - const original = jest.requireActual('../../../components/leaderboard/leaderboard_helpers'); +jest.mock("@/components/leaderboard/leaderboard_helpers", () => { + const original = jest.requireActual( + "../../../components/leaderboard/leaderboard_helpers" + ); return { ...original, useFetchLeaderboard: jest.fn(), }; }); -const useFetchLeaderboard = require('@/components/leaderboard/leaderboard_helpers').useFetchLeaderboard as jest.Mock; +const useFetchLeaderboard = + require("@/components/leaderboard/leaderboard_helpers") + .useFetchLeaderboard as jest.Mock; const baseProps = { block: 1, @@ -25,7 +29,7 @@ const baseProps = { function renderComponent(data: any, loading = false, globalChange?: number) { useFetchLeaderboard.mockReturnValue({ - myFetchUrl: '/api', + myFetchUrl: "/api", totalResults: data ? data.length : 0, leaderboard: data, }); @@ -38,28 +42,30 @@ function renderComponent(data: any, loading = false, globalChange?: number) { ); } -describe('LeaderboardCardsCollectedComponent', () => { +describe("LeaderboardCardsCollectedComponent", () => { beforeEach(() => { jest.clearAllMocks(); }); - it('renders no content when leaderboard is undefined', () => { + it("renders no content when leaderboard is undefined", () => { renderComponent(undefined, false); - expect(screen.queryByRole('table')).toBeNull(); + expect(screen.queryByRole("table")).toBeNull(); }); - it('shows message when no results and not loading', () => { + it("shows message when no results and not loading", () => { renderComponent([], false); - expect(screen.getByText('No results found. Change filters and try again.')).toBeInTheDocument(); + expect( + screen.getByText("No results found. Change filters and try again.") + ).toBeInTheDocument(); }); - it('renders leaderboard rows with calculated values', () => { + it("renders leaderboard rows with calculated values", () => { const leaderboard = [ { - consolidation_key: '0x1', - handle: 'alice', - consolidation_display: 'Alice', - pfp_url: '', + consolidation_key: "0x1", + handle: "alice", + consolidation_display: "Alice", + pfp_url: "", cic_type: undefined, level: 2, balance: 5, @@ -71,10 +77,10 @@ describe('LeaderboardCardsCollectedComponent', () => { total_tdh: 100, }, { - consolidation_key: '0x2', - handle: 'bob', - consolidation_display: 'Bob', - pfp_url: '', + consolidation_key: "0x2", + handle: "bob", + consolidation_display: "Bob", + pfp_url: "", cic_type: undefined, level: 1, balance: 1, @@ -85,23 +91,60 @@ describe('LeaderboardCardsCollectedComponent', () => { day_change: 0, total_tdh: 50, }, + { + consolidation_key: "0x3", + handle: "carol", + consolidation_display: "Carol", + pfp_url: "", + cic_type: undefined, + level: 3, + balance: 468, + unique_memes: 468, + unique_memes_total: 469, + memes_cards_sets: 12, + boosted_tdh: 99, + day_change: 5, + total_tdh: 250, + }, + { + consolidation_key: "0x4", + handle: "dave", + consolidation_display: "Dave", + pfp_url: "", + cic_type: undefined, + level: 4, + balance: 1999, + unique_memes: 1999, + unique_memes_total: 2000, + memes_cards_sets: 20, + boosted_tdh: 101, + day_change: 2, + total_tdh: 400, + }, ]; renderComponent(leaderboard, false, 20); - const rows = screen.getAllByRole('row'); + const rows = screen.getAllByRole("row"); // First row corresponds to table header, others to data - expect(rows).toHaveLength(3); + expect(rows).toHaveLength(5); // check rank numbering - expect(rows[1]).toHaveTextContent('1'); - expect(rows[2]).toHaveTextContent('2'); + expect(rows[1]).toHaveTextContent("1"); + expect(rows[2]).toHaveTextContent("2"); + expect(rows[3]).toHaveTextContent("3"); + expect(rows[4]).toHaveTextContent("4"); + + expect(rows[1]).toHaveTextContent(/3\s*\/\s*10\s*\(30%\)/); + expect(rows[2]).toHaveTextContent(/0\s*\/\s*5\s*\(0%\)/); + expect(rows[3]).toHaveTextContent(/468\s*\/\s*469\s*\(99\.8%\)/); + expect(rows[4]).toHaveTextContent(/1,999\s*\/\s*2,000\s*\(99\.9%\)/); // tdh change with percentage and vs network - expect(rows[1]).toHaveTextContent('+10'); - expect(rows[1]).toHaveTextContent('(10.00%)'); - expect(rows[1]).toHaveTextContent('0.50x'); + expect(rows[1]).toHaveTextContent("+10"); + expect(rows[1]).toHaveTextContent("(10.00%)"); + expect(rows[1]).toHaveTextContent("0.50x"); // second row with zero change shows dash and dash vs network - expect(rows[2]).toHaveTextContent('-'); + expect(rows[2]).toHaveTextContent("-"); }); }); diff --git a/components/leaderboard/LeaderboardCardsCollected.tsx b/components/leaderboard/LeaderboardCardsCollected.tsx index 089c878a45..e8668360e7 100644 --- a/components/leaderboard/LeaderboardCardsCollected.tsx +++ b/components/leaderboard/LeaderboardCardsCollected.tsx @@ -7,9 +7,9 @@ import { useState } from "react"; import { Col, Container, Row, Table } from "react-bootstrap"; import type { Collector, Content } from "./Leaderboard"; import styles from "./Leaderboard.module.scss"; -import type { - LeaderboardMetrics} from "./leaderboard_helpers"; +import type { LeaderboardMetrics } from "./leaderboard_helpers"; import { + formatPercentageFromCounts, LeaderboardCardsCollectedSort, useFetchLeaderboard, } from "./leaderboard_helpers"; @@ -200,10 +200,11 @@ export default function LeaderboardCardsCollectedComponent( ? numberWithCommas(lead.unique_memes) : 0}{" "} / {numberWithCommas(lead.unique_memes_total)} ( - {Math.round( - (lead.unique_memes / lead.unique_memes_total) * 100 + {formatPercentageFromCounts( + lead.unique_memes, + lead.unique_memes_total )} - %) + ) {numberWithCommas(lead.memes_cards_sets)} diff --git a/components/leaderboard/leaderboard_helpers.ts b/components/leaderboard/leaderboard_helpers.ts index 682f4f7e3c..51b32674bf 100644 --- a/components/leaderboard/leaderboard_helpers.ts +++ b/components/leaderboard/leaderboard_helpers.ts @@ -77,6 +77,23 @@ export interface LeaderboardInteractions { cic_type?: CICType | undefined; } +export function formatPercentageFromCounts(count: number, total: number) { + const safeCount = Number.isFinite(count) ? Math.max(0, count) : 0; + const safeTotal = Number.isFinite(total) ? Math.max(0, total) : 0; + + if (safeTotal === 0 || safeCount === 0) { + return "0%"; + } + + if (safeCount >= safeTotal) { + return "100%"; + } + + const percent = (safeCount / safeTotal) * 100; + const rounded = Number(percent.toFixed(1)); + return rounded < 100 ? `${rounded}%` : "99.9%"; +} + export function getLeaderboardDownloadFileName( title: string, block: number,