test(format): add unit tests for formatDistance/Duration

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<RouteStatisticsProps> = (props) => {
     <div class={clsx('flex size-full items-stretch gap-8', props.class)}>
       <div class="flex grow flex-col justify-between">
         <span class="text-body-sm text-on-surface-variant">Distance</span>
-        <span class="font-mono text-label-lg uppercase">{formatRouteDistance(props.route)}</span>
+        <span class="font-mono text-label-lg uppercase">{formatDistance(props.route?.length)}</span>
       </div>
 
       <div class="flex grow flex-col justify-between">

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<RouteActivityProps> = (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
 

src/utils/format.spec.ts

@@ -1,6 +1,31 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { formatDate } from './format'
+import { formatDate, formatDistance, formatDuration } 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('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', () => {

src/utils/format.ts

@@ -13,16 +13,11 @@ export { dayjs }
 
 export const formatDistance = (miles: number | undefined): string => {
   if (miles === undefined) return ''
-  return `${miles.toFixed(1) ?? 0} mi`
-}
-
-export const formatRouteDistance = (route: Route | undefined): string => {
-  if (route?.length === undefined) return ''
-  return formatDistance(route.length)
+  return `${miles.toFixed(1)} mi`
 }
 
 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]')
@@ -33,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)
 }
@@ -51,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