From a8aa87e471fbf50878a39c2eeba2aecda02d0ba6 Mon Sep 17 00:00:00 2001 From: Wes Copeland Date: Thu, 21 Nov 2024 07:16:48 -0500 Subject: [PATCH] fix(home): make some minor css adjustments (#2848) --- .../CurrentlyOnline/CurrentlyOnline.test.tsx | 86 +++++++++++-------- .../+root/CurrentlyOnline/CurrentlyOnline.tsx | 10 +-- .../useCurrentlyOnlineChart.test.ts | 38 +++++--- .../useCurrentlyOnlineChart.ts | 3 +- .../home/components/+root/HomeRoot.test.tsx | 16 ++-- .../+root/NewSetsList/NewSetsList.tsx | 11 ++- .../SetsInProgressList/SetsInProgressList.tsx | 7 +- .../RecentGameAwards/RecentGameAwards.tsx | 2 +- .../ClaimMobileBlock.test.tsx | 51 +++++++++-- .../ClaimMobileBlock/ClaimMobileBlock.tsx | 5 +- .../home/components/ClaimMobileBlock/index.ts | 1 + 11 files changed, 154 insertions(+), 76 deletions(-) diff --git a/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.test.tsx b/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.test.tsx index 5c77c05805..5a8852b4b1 100644 --- a/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.test.tsx +++ b/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.test.tsx @@ -1,5 +1,5 @@ import { render, screen } from '@/test'; -import { createHomePageProps } from '@/test/factories'; +import { createHomePageProps, createZiggyProps } from '@/test/factories'; import { CurrentlyOnline } from './CurrentlyOnline'; @@ -15,7 +15,9 @@ describe('Component: CurrentlyOnline', () => { it('renders without crashing', () => { // ARRANGE - const { container } = render(); + const { container } = render(, { + pageProps: { ziggy: createZiggyProps() }, + }); // ASSERT expect(container).toBeTruthy(); @@ -23,7 +25,9 @@ describe('Component: CurrentlyOnline', () => { it('displays an accessible heading', () => { // ARRANGE - render(); + render(, { + pageProps: { ziggy: createZiggyProps() }, + }); // ASSERT expect(screen.getByRole('heading', { name: /currently online/i })).toBeVisible(); @@ -32,14 +36,17 @@ describe('Component: CurrentlyOnline', () => { it('given only one user is online, shows a singular user count message', () => { // ARRANGE render(, { - pageProps: createHomePageProps({ - currentlyOnline: { - logEntries, - allTimeHighDate: null, - allTimeHighPlayers: 1000, - numCurrentPlayers: 1, - }, - }), + pageProps: { + ziggy: createZiggyProps(), + ...createHomePageProps({ + currentlyOnline: { + logEntries, + allTimeHighDate: null, + allTimeHighPlayers: 1000, + numCurrentPlayers: 1, + }, + }), + }, }); // ASSERT @@ -49,14 +56,17 @@ describe('Component: CurrentlyOnline', () => { it('given many users are online, shows a plural user count message', () => { // ARRANGE render(, { - pageProps: createHomePageProps({ - currentlyOnline: { - logEntries, - allTimeHighDate: null, - allTimeHighPlayers: 1000, - numCurrentPlayers: 100, - }, - }), + pageProps: { + ziggy: createZiggyProps({ device: 'mobile' }), + ...createHomePageProps({ + currentlyOnline: { + logEntries, + allTimeHighDate: null, + allTimeHighPlayers: 1000, + numCurrentPlayers: 100, + }, + }), + }, }); // ASSERT @@ -68,14 +78,17 @@ describe('Component: CurrentlyOnline', () => { const allTimeHighDate = new Date('2024-08-07').toISOString(); render(, { - pageProps: createHomePageProps({ - currentlyOnline: { - logEntries, - allTimeHighDate, - allTimeHighPlayers: 4744, - numCurrentPlayers: 100, - }, - }), + pageProps: { + ziggy: createZiggyProps(), + ...createHomePageProps({ + currentlyOnline: { + logEntries, + allTimeHighDate, + allTimeHighPlayers: 4744, + numCurrentPlayers: 100, + }, + }), + }, }); // ASSERT @@ -89,14 +102,17 @@ describe('Component: CurrentlyOnline', () => { it('does not crash if the all-time high date is missing', () => { // ARRANGE render(, { - pageProps: createHomePageProps({ - currentlyOnline: { - logEntries, - allTimeHighDate: null, // !! - allTimeHighPlayers: 4744, - numCurrentPlayers: 100, - }, - }), + pageProps: { + ziggy: createZiggyProps(), + ...createHomePageProps({ + currentlyOnline: { + logEntries, + allTimeHighDate: null, // !! + allTimeHighPlayers: 4744, + numCurrentPlayers: 100, + }, + }), + }, }); // ASSERT diff --git a/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.tsx b/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.tsx index 1b94afa479..16bab27f54 100644 --- a/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.tsx +++ b/resources/js/features/home/components/+root/CurrentlyOnline/CurrentlyOnline.tsx @@ -19,11 +19,11 @@ import { useCurrentlyOnlineChart } from './useCurrentlyOnlineChart'; dayjs.extend(utc); export const CurrentlyOnline: FC = () => { - const { currentlyOnline } = usePageProps(); + const { currentlyOnline, ziggy } = usePageProps(); const { t } = useTranslation(); - const { chartData, yAxisTicks, formatXAxisTick, formatYAxisTick } = + const { chartData, yAxisTicks, formatTooltipLabel, formatXAxisTick, formatYAxisTick } = useCurrentlyOnlineChart(currentlyOnline); const chartConfig = { @@ -37,7 +37,7 @@ export const CurrentlyOnline: FC = () => {
{t('Currently Online')} -
+

@@ -70,7 +70,7 @@ export const CurrentlyOnline: FC = () => { tickLine={false} axisLine={false} tickMargin={12} - interval={7} + interval={ziggy.device === 'mobile' ? 12 : 7} tickFormatter={formatXAxisTick} /> @@ -79,7 +79,7 @@ export const CurrentlyOnline: FC = () => { content={ dayjs.utc(isoDate).format('llll')} + labelFormatter={formatTooltipLabel} /> } /> diff --git a/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.test.ts b/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.test.ts index 1a834dee94..0cf85f1abf 100644 --- a/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.test.ts +++ b/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.test.ts @@ -27,7 +27,7 @@ describe('Hook: useCurrentlyOnlineChart', () => { expect(result).toBeTruthy(); }); - it('can properly format x-axis ticks', () => { + it('can properly format tooltip labels', () => { // ARRANGE const { result } = renderHook(() => useCurrentlyOnlineChart({ @@ -38,10 +38,26 @@ describe('Hook: useCurrentlyOnlineChart', () => { }), ); - const current = result.current as ReturnType; + // ACT + const formatted = result.current.formatTooltipLabel(new Date('2023-05-07').toISOString()); + + // ASSERT + expect(formatted).toEqual('Sun, May 7, 2023 12:00 AM'); + }); + + it('can properly format x-axis ticks', () => { + // ARRANGE + const { result } = renderHook(() => + useCurrentlyOnlineChart({ + allTimeHighDate: new Date('2024-08-07').toISOString(), + allTimeHighPlayers: 4744, + logEntries: [], + numCurrentPlayers: 0, + }), + ); // ACT - const formatted = current.formatXAxisTick(dayjs.utc('2024-08-07').toISOString()); + const formatted = result.current.formatXAxisTick(dayjs.utc('2024-08-07').toISOString()); // ASSERT expect(formatted).toEqual('12:00 AM'); @@ -58,10 +74,8 @@ describe('Hook: useCurrentlyOnlineChart', () => { }), ); - const current = result.current as ReturnType; - // ACT - const formatted = current.formatYAxisTick(1000); + const formatted = result.current.formatYAxisTick(1000); // ASSERT expect(formatted).toEqual('1,000'); @@ -81,11 +95,9 @@ describe('Hook: useCurrentlyOnlineChart', () => { }), ); - const current = result.current as ReturnType; - // ASSERT - const firstEntryTime = dayjs(current.chartData[0].time); - const lastEntryTime = dayjs(current.chartData[current.chartData.length - 1].time); + const firstEntryTime = dayjs(result.current.chartData[0].time); + const lastEntryTime = dayjs(result.current.chartData[result.current.chartData.length - 1].time); expect(firstEntryTime.format('HH:mm')).toBe('10:30'); expect(lastEntryTime.format('HH:mm')).toBe('10:00'); @@ -105,11 +117,9 @@ describe('Hook: useCurrentlyOnlineChart', () => { }), ); - const current = result.current as ReturnType; - // ASSERT - const firstEntryTime = dayjs(current.chartData[0].time); - const lastEntryTime = dayjs(current.chartData[current.chartData.length - 1].time); + const firstEntryTime = dayjs(result.current.chartData[0].time); + const lastEntryTime = dayjs(result.current.chartData[result.current.chartData.length - 1].time); expect(firstEntryTime.format('HH:mm')).toBe('11:00'); expect(lastEntryTime.format('HH:mm')).toBe('10:30'); diff --git a/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.ts b/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.ts index f301ffa408..020ef33475 100644 --- a/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.ts +++ b/resources/js/features/home/components/+root/CurrentlyOnline/useCurrentlyOnlineChart.ts @@ -24,8 +24,9 @@ export function useCurrentlyOnlineChart(currentlyOnline: App.Data.CurrentlyOnlin const formatXAxisTick = (value: string) => formatDate(dayjs(value), 'LT'); const formatYAxisTick = (value: number) => formatNumber(value); + const formatTooltipLabel = (isoDate: string) => dayjs.utc(isoDate).format('llll'); - return { chartData, yAxisTicks, formatXAxisTick, formatYAxisTick }; + return { chartData, yAxisTicks, formatTooltipLabel, formatXAxisTick, formatYAxisTick }; } function buildChartData(logEntries: number[]): Array<{ time: string; playersOnline: number }> { diff --git a/resources/js/features/home/components/+root/HomeRoot.test.tsx b/resources/js/features/home/components/+root/HomeRoot.test.tsx index f7cdf6a248..460b41f2ca 100644 --- a/resources/js/features/home/components/+root/HomeRoot.test.tsx +++ b/resources/js/features/home/components/+root/HomeRoot.test.tsx @@ -1,6 +1,6 @@ import { createAuthenticatedUser } from '@/common/models'; import { render, screen } from '@/test'; -import { createHomePageProps } from '@/test/factories'; +import { createHomePageProps, createZiggyProps } from '@/test/factories'; import { HomeRoot } from './HomeRoot'; @@ -10,7 +10,9 @@ console.warn = vi.fn(); describe('Component: HomeRoot', () => { it('renders without crashing', () => { // ARRANGE - const { container } = render(); + const { container } = render(, { + pageProps: { ziggy: createZiggyProps() }, + }); // ASSERT expect(container).toBeTruthy(); @@ -18,7 +20,9 @@ describe('Component: HomeRoot', () => { it('displays several section components', () => { // ARRANGE - render(, { pageProps: createHomePageProps() }); + render(, { + pageProps: { ...createHomePageProps(), ziggy: createZiggyProps() }, + }); // ASSERT expect(screen.getByRole('heading', { name: /news/i })).toBeVisible(); @@ -31,7 +35,9 @@ describe('Component: HomeRoot', () => { it('given the user is not logged in, shows a welcome section', () => { // ARRANGE - render(, { pageProps: { auth: null } }); + render(, { + pageProps: { auth: null, ziggy: createZiggyProps() }, + }); // ASSERT expect(screen.getByRole('heading', { name: /welcome/i })).toBeVisible(); @@ -40,7 +46,7 @@ describe('Component: HomeRoot', () => { it('given the user is logged in, does not show a welcome section', () => { // ARRANGE render(, { - pageProps: { auth: { user: createAuthenticatedUser() } }, + pageProps: { auth: { user: createAuthenticatedUser() }, ziggy: createZiggyProps() }, }); // ASSERT diff --git a/resources/js/features/home/components/+root/NewSetsList/NewSetsList.tsx b/resources/js/features/home/components/+root/NewSetsList/NewSetsList.tsx index 2d40d8dc12..bbee96a0c6 100644 --- a/resources/js/features/home/components/+root/NewSetsList/NewSetsList.tsx +++ b/resources/js/features/home/components/+root/NewSetsList/NewSetsList.tsx @@ -14,10 +14,9 @@ import { EmptyState } from '@/common/components/EmptyState'; import { MultilineGameAvatar } from '@/common/components/MultilineGameAvatar'; import { UserAvatar } from '@/common/components/UserAvatar'; import { usePageProps } from '@/common/hooks/usePageProps'; -import type { AvatarSize } from '@/common/models'; import { ClaimSetType } from '@/common/utils/generatedAppConstants'; -import { ClaimMobileBlock } from '../../ClaimMobileBlock/ClaimMobileBlock'; +import { ClaimMobileBlock } from '../../ClaimMobileBlock'; import { HomeHeading } from '../../HomeHeading'; import { SeeMoreLink } from '../../SeeMoreLink'; @@ -42,7 +41,11 @@ export const NewSetsList: FC = () => { <>

{completedClaims.map((claim) => ( - + ))}
@@ -64,7 +67,7 @@ export const NewSetsList: FC = () => { - + {claim.setType === ClaimSetType.NewSet && t('New')} diff --git a/resources/js/features/home/components/+root/SetsInProgressList/SetsInProgressList.tsx b/resources/js/features/home/components/+root/SetsInProgressList/SetsInProgressList.tsx index 46711b2200..2a0cad191e 100644 --- a/resources/js/features/home/components/+root/SetsInProgressList/SetsInProgressList.tsx +++ b/resources/js/features/home/components/+root/SetsInProgressList/SetsInProgressList.tsx @@ -14,10 +14,9 @@ import { EmptyState } from '@/common/components/EmptyState'; import { MultilineGameAvatar } from '@/common/components/MultilineGameAvatar'; import { UserAvatar } from '@/common/components/UserAvatar'; import { usePageProps } from '@/common/hooks/usePageProps'; -import type { AvatarSize } from '@/common/models'; import { ClaimSetType } from '@/common/utils/generatedAppConstants'; -import { ClaimMobileBlock } from '../../ClaimMobileBlock/ClaimMobileBlock'; +import { ClaimMobileBlock } from '../../ClaimMobileBlock'; import { HomeHeading } from '../../HomeHeading'; import { SeeMoreLink } from '../../SeeMoreLink'; @@ -40,7 +39,7 @@ export const SetsInProgressList: FC = () => { <>
{newClaims.map((claim) => ( - + ))}
@@ -62,7 +61,7 @@ export const SetsInProgressList: FC = () => { - + {claim.setType === ClaimSetType.NewSet && t('New')} diff --git a/resources/js/features/home/components/+sidebar/RecentGameAwards/RecentGameAwards.tsx b/resources/js/features/home/components/+sidebar/RecentGameAwards/RecentGameAwards.tsx index eaa72a4c52..cd5759e7cc 100644 --- a/resources/js/features/home/components/+sidebar/RecentGameAwards/RecentGameAwards.tsx +++ b/resources/js/features/home/components/+sidebar/RecentGameAwards/RecentGameAwards.tsx @@ -72,7 +72,7 @@ const GameAwardCard: FC = ({ game, user }) => {
- + diff --git a/resources/js/features/home/components/ClaimMobileBlock/ClaimMobileBlock.test.tsx b/resources/js/features/home/components/ClaimMobileBlock/ClaimMobileBlock.test.tsx index 7d2cc161f9..34e700226b 100644 --- a/resources/js/features/home/components/ClaimMobileBlock/ClaimMobileBlock.test.tsx +++ b/resources/js/features/home/components/ClaimMobileBlock/ClaimMobileBlock.test.tsx @@ -1,12 +1,19 @@ +import dayjs from 'dayjs'; +import utc from 'dayjs/plugin/utc'; + import { render, screen } from '@/test'; import { createAchievementSetClaim, createGame, createSystem, createUser } from '@/test/factories'; import { ClaimMobileBlock } from './ClaimMobileBlock'; +dayjs.extend(utc); + describe('Component: ClaimMobileBlock', () => { it('renders without crashing', () => { // ARRANGE - const { container } = render(); + const { container } = render( + , + ); // ASSERT expect(container).toBeTruthy(); @@ -17,7 +24,7 @@ describe('Component: ClaimMobileBlock', () => { const game = createGame({ title: 'Sonic the Hedgehog' }); const claim = createAchievementSetClaim({ game }); - render(); + render(); // ASSERT expect(screen.getByText(/sonic the hedgehog/i)).toBeVisible(); @@ -29,7 +36,7 @@ describe('Component: ClaimMobileBlock', () => { const game = createGame({ system }); const claim = createAchievementSetClaim({ game }); - render(); + render(); // ASSERT expect(screen.getByTestId('claim-system')).toBeVisible(); @@ -41,7 +48,7 @@ describe('Component: ClaimMobileBlock', () => { const game = createGame({ system: undefined }); const claim = createAchievementSetClaim({ game }); - render(); + render(); // ASSERT expect(screen.queryByTestId('claim-system')).not.toBeInTheDocument(); @@ -52,9 +59,43 @@ describe('Component: ClaimMobileBlock', () => { const user = createUser({ displayName: 'Scott' }); const claim = createAchievementSetClaim({ users: [user] }); - render(); + render(); // ASSERT expect(screen.getByText(/scott/i)).toBeVisible(); }); + + it('given it uses the completed variant, shows the correct timestamp', () => { + // ARRANGE + vi.setSystemTime(dayjs.utc('2023-10-25').toDate()); + + const user = createUser({ displayName: 'Scott' }); + + const created = dayjs.utc().subtract(1, 'week').toISOString(); + const finished = dayjs.utc().subtract(1, 'hour').toISOString(); + const claim = createAchievementSetClaim({ created, finished, users: [user] }); + + render(); + + // ASSERT + expect(screen.getByText(/1 hour ago/i)).toBeVisible(); + expect(screen.queryByText(/1 week ago/i)).not.toBeInTheDocument(); + }); + + it('given it uses the new variant, shows the correct timestamp', () => { + // ARRANGE + vi.setSystemTime(dayjs.utc('2023-10-25').toDate()); + + const user = createUser({ displayName: 'Scott' }); + + const created = dayjs.utc().subtract(1, 'week').toISOString(); + const finished = dayjs.utc().subtract(1, 'hour').toISOString(); + const claim = createAchievementSetClaim({ created, finished, users: [user] }); + + render(); + + // ASSERT + expect(screen.getByText(/1 week ago/i)).toBeVisible(); + expect(screen.queryByText(/1 hour ago/i)).not.toBeInTheDocument(); + }); }); diff --git a/resources/js/features/home/components/ClaimMobileBlock/ClaimMobileBlock.tsx b/resources/js/features/home/components/ClaimMobileBlock/ClaimMobileBlock.tsx index 79a3dcb06a..76467d22e8 100644 --- a/resources/js/features/home/components/ClaimMobileBlock/ClaimMobileBlock.tsx +++ b/resources/js/features/home/components/ClaimMobileBlock/ClaimMobileBlock.tsx @@ -10,9 +10,10 @@ import { ClaimSetType } from '@/common/utils/generatedAppConstants'; interface ClaimMobileBlockProps { claim: App.Data.AchievementSetClaim; + variant: 'completed' | 'new'; } -export const ClaimMobileBlock: FC = ({ claim }) => { +export const ClaimMobileBlock: FC = ({ claim, variant }) => { const { t } = useTranslation(); const { game, users } = claim; @@ -42,7 +43,7 @@ export const ClaimMobileBlock: FC = ({ claim }) => { {claim.setType === ClaimSetType.NewSet && t('New')} {claim.setType === ClaimSetType.Revision && t('Revision')} {', '} - +
diff --git a/resources/js/features/home/components/ClaimMobileBlock/index.ts b/resources/js/features/home/components/ClaimMobileBlock/index.ts index e69de29bb2..5cefc5fdec 100644 --- a/resources/js/features/home/components/ClaimMobileBlock/index.ts +++ b/resources/js/features/home/components/ClaimMobileBlock/index.ts @@ -0,0 +1 @@ +export * from './ClaimMobileBlock';