From df5bf2f2d3cb21eb414001c0959bfad51261f6bd Mon Sep 17 00:00:00 2001 From: Cameron Clough Date: Sat, 8 Feb 2025 19:33:06 +0000 Subject: [PATCH 1/4] test(format): add unit tests for formatDistance --- src/utils/format.spec.ts | 13 ++++++++++++- src/utils/format.ts | 2 +- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/utils/format.spec.ts b/src/utils/format.spec.ts index b3a1a499..4d41d681 100644 --- a/src/utils/format.spec.ts +++ b/src/utils/format.spec.ts @@ -1,6 +1,17 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { formatDate } from './format' +import { formatDate, formatDistance } from './format' + + +describe('formatDistance', () => { + it('should format distance', () => { + expect(formatDistance(0)).toBe('0.0 mi') + expect(formatDistance(1.234)).toBe('1.2 mi') + }) + it('should be blank for undefined distance', () => { + expect(formatDistance(undefined)).toBe('') + }) +}) describe('formatDate', () => { diff --git a/src/utils/format.ts b/src/utils/format.ts index 680f4dd7..7cb9a40b 100644 --- a/src/utils/format.ts +++ b/src/utils/format.ts @@ -13,7 +13,7 @@ export { dayjs } export const formatDistance = (miles: number | undefined): string => { if (miles === undefined) return '' - return `${miles.toFixed(1) ?? 0} mi` + return `${miles.toFixed(1)} mi` } export const formatRouteDistance = (route: Route | undefined): string => { From bccc27ba9a8c9263d612ab5f61c2377315b1ba88 Mon Sep 17 00:00:00 2001 From: Cameron Clough Date: Sat, 8 Feb 2025 19:33:33 +0000 Subject: [PATCH 2/4] cleanup: rm formatRouteDistance --- src/components/RouteStatistics.tsx | 4 ++-- src/utils/format.ts | 5 ----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/RouteStatistics.tsx b/src/components/RouteStatistics.tsx index a7027ed2..f60a8cf6 100644 --- a/src/components/RouteStatistics.tsx +++ b/src/components/RouteStatistics.tsx @@ -4,7 +4,7 @@ import clsx from 'clsx' import { TimelineStatistics, getTimelineStatistics } from '~/api/derived' import type { Route } from '~/types' -import { formatRouteDistance, formatRouteDuration } from '~/utils/format' +import { formatDistance, formatRouteDuration } from '~/utils/format' const formatEngagement = (timeline?: TimelineStatistics): string => { if (!timeline) return '' @@ -28,7 +28,7 @@ const RouteStatistics: VoidComponent = (props) => {
Distance - {formatRouteDistance(props.route)} + {formatDistance(props.route?.length)}
diff --git a/src/utils/format.ts b/src/utils/format.ts index 7cb9a40b..6bc0a643 100644 --- a/src/utils/format.ts +++ b/src/utils/format.ts @@ -16,11 +16,6 @@ export const formatDistance = (miles: number | undefined): string => { return `${miles.toFixed(1)} mi` } -export const formatRouteDistance = (route: Route | undefined): string => { - if (route?.length === undefined) return '' - return formatDistance(route.length) -} - const _formatDuration = (duration: Duration): string => { if (duration.asHours() > 0) { return duration.format('H[h] m[m]') From fb3b1d894722fc5177cafd173a47745ac4a6e9d6 Mon Sep 17 00:00:00 2001 From: Cameron Clough Date: Sat, 8 Feb 2025 19:36:17 +0000 Subject: [PATCH 3/4] test(format): add unit tests for formatDuration --- src/utils/format.spec.ts | 16 +++++++++++++++- src/utils/format.ts | 4 ++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/utils/format.spec.ts b/src/utils/format.spec.ts index 4d41d681..5002a3ee 100644 --- a/src/utils/format.spec.ts +++ b/src/utils/format.spec.ts @@ -1,6 +1,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' -import { formatDate, formatDistance } from './format' +import { formatDate, formatDistance, formatDuration } from './format' describe('formatDistance', () => { @@ -14,6 +14,20 @@ describe('formatDistance', () => { }) +describe('formatDuration', () => { + it('should format duration', () => { + expect(formatDuration(0)).toBe('0m') + expect(formatDuration(12)).toBe('12m') + expect(formatDuration(12.34)).toBe('12m') + expect(formatDuration(90)).toBe('1h 30m') + expect(formatDuration(120)).toBe('2h 0m') + }) + it('should be blank for undefined duration', () => { + expect(formatDuration(undefined)).toBe('') + }) +}) + + describe('formatDate', () => { beforeEach(() => { vi.useFakeTimers() diff --git a/src/utils/format.ts b/src/utils/format.ts index 6bc0a643..90306ebc 100644 --- a/src/utils/format.ts +++ b/src/utils/format.ts @@ -17,7 +17,7 @@ export const formatDistance = (miles: number | undefined): string => { } const _formatDuration = (duration: Duration): string => { - if (duration.asHours() > 0) { + if (duration.hours() > 0) { return duration.format('H[h] m[m]') } else { return duration.format('m[m]') @@ -28,7 +28,7 @@ export const formatDuration = (minutes: number | undefined): string => { if (minutes === undefined) return '' const duration = dayjs.duration({ hours: Math.floor(minutes / 60), - minutes: minutes % 60, + minutes: Math.round(minutes % 60), }) return _formatDuration(duration) } From 4e22bb6b156197e10c5627ce3e7550a82b421b7c Mon Sep 17 00:00:00 2001 From: Cameron Clough Date: Sat, 8 Feb 2025 19:41:11 +0000 Subject: [PATCH 4/4] cleanup: rm parseDateStr --- src/pages/dashboard/activities/RouteActivity.tsx | 4 ++-- src/utils/format.ts | 4 ---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/pages/dashboard/activities/RouteActivity.tsx b/src/pages/dashboard/activities/RouteActivity.tsx index 0958858c..954edc2c 100644 --- a/src/pages/dashboard/activities/RouteActivity.tsx +++ b/src/pages/dashboard/activities/RouteActivity.tsx @@ -13,7 +13,7 @@ import TopAppBar from '~/components/material/TopAppBar' import RouteStaticMap from '~/components/RouteStaticMap' import RouteStatistics from '~/components/RouteStatistics' import Timeline from '~/components/Timeline' -import { parseDateStr } from '~/utils/format' +import { dayjs } from '~/utils/format' const RouteVideoPlayer = lazy(() => import('~/components/RouteVideoPlayer')) @@ -27,7 +27,7 @@ const RouteActivity: VoidComponent = (props) => { const routeName = () => `${props.dongleId}|${props.dateStr}` const [route] = createResource(routeName, getRoute) - const [startTime] = createResource(route, (route) => parseDateStr(route.start_time)?.format('ddd, MMM D, YYYY')) + const [startTime] = createResource(route, (route) => dayjs(route.start_time)?.format('ddd, MMM D, YYYY')) let videoRef: HTMLVideoElement diff --git a/src/utils/format.ts b/src/utils/format.ts index 90306ebc..540fca9c 100644 --- a/src/utils/format.ts +++ b/src/utils/format.ts @@ -46,10 +46,6 @@ export const formatRouteDuration = (route: Route | undefined): string => { return duration ? _formatDuration(duration) : '' } -export const parseDateStr = (dateStr: string): Dayjs => { - return dayjs(dateStr, 'YYYY-MM-DD--HH-mm-ss') -} - const parseTimestamp = (input: dayjs.ConfigType): dayjs.Dayjs => { if (typeof input === 'number') { // Assume number is unix timestamp, convert to seconds