location component unit test cases

src/components/Location/Flag.tsx

@@ -8,16 +8,15 @@ type Props = {
 }
 
 export function Flag({ country }: Props) {
-  if (!country?.name || !country?.code) return null
   // offset between uppercase ascii and regional indicator symbols
   const OFFSET = 127397
 
-  const emoji = country.code.replace(/./g, (char) =>
+  const emoji = country?.code.replace(/./g, (char) =>
     String.fromCodePoint(char.charCodeAt(0) + OFFSET)
   )
 
   return (
-    <span role="img" aria-label={country.name} className={styles.emoji}>
+    <span role="img" aria-label={country?.name} className={styles.emoji}>
       {emoji}
     </span>
   )

src/components/Location/index.test.tsx

@@ -0,0 +1,94 @@
+import {
+  describe,
+  it,
+  expect,
+  beforeAll,
+  afterAll,
+  vi,
+  type SpyInstance
+} from 'vitest'
+import { render, screen } from '@testing-library/react'
+import * as nanostores from '@nanostores/react'
+import Location from '.'
+
+const mockData = {
+  now: {
+    country: 'USA',
+    country_code: 'US',
+    city: 'New York'
+  },
+  next: {
+    country: 'Canada',
+    country_code: 'CA',
+    city: 'Toronto',
+    date_start: '2023-10-05'
+  }
+}
+
+describe('Location component', () => {
+  let useStoreSpy: SpyInstance
+
+  beforeAll(() => {
+    vi.mock('@nanostores/react')
+    useStoreSpy = vi.spyOn(nanostores, 'useStore')
+  })
+
+  afterAll(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('renders the location items correctly', () => {
+    useStoreSpy.mockImplementationOnce(() => ({
+      data: mockData,
+      loading: false,
+      error: null
+    }))
+
+    render(<Location />)
+
+    expect(screen.getByLabelText('USA')).toBeInTheDocument()
+    expect(screen.getByText('New York')).toBeInTheDocument()
+    expect(screen.getByLabelText('Canada')).toBeInTheDocument()
+    expect(screen.getByText('Toronto')).toBeInTheDocument()
+  })
+
+  it('renders the loading indicator', () => {
+    useStoreSpy.mockImplementationOnce(() => ({
+      data: null,
+      loading: true,
+      error: null
+    }))
+
+    render(<Location />)
+
+    expect(screen.getByText('...')).toBeInTheDocument()
+  })
+
+  it('renders empty when there is no data', () => {
+    useStoreSpy.mockImplementationOnce(() => ({
+      data: null,
+      loading: false,
+      error: null
+    }))
+
+    render(<Location />)
+
+    expect(screen.queryByLabelText('Location')).toBeEmptyDOMElement()
+  })
+
+  it('renders nothing and logs error when error is encountered', () => {
+    const consoleErrorSpy = vi.spyOn(console, 'error')
+    useStoreSpy.mockImplementationOnce(() => ({
+      data: null,
+      loading: false,
+      error: 'Error'
+    }))
+
+    render(<Location />)
+
+    expect(screen.queryByLabelText('Location')).not.toBeInTheDocument()
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      'Failed to fetch location: Error'
+    )
+  })
+})

src/components/Location/index.tsx

@@ -1,6 +1,6 @@
 import { useStore } from '@nanostores/react'
 import { $location } from '@stores/location'
-import { formatDistance } from 'date-fns'
+import { formatDistanceToNowStrict } from 'date-fns'
 import { LocationItem } from './LocationItem'
 import styles from './index.module.css'
 
@@ -30,9 +30,9 @@ export default function Location() {
                 country={data.next.country}
                 countryCode={data.next.country_code}
                 city={data.next.city}
-                time={formatDistance(
+                time={formatDistanceToNowStrict(
                   new Date(data.next.date_start),
-                  Date.now()
+                  { addSuffix: true }
                 )}
                 showFlag={data.now.country !== data.next.country}
               />