tests for PickerSchedule and SnoozeChoreModal

apps/mobile/src/components/PickerSchedule.tsx

@@ -3,16 +3,12 @@ import { ScrollView, Text, TouchableOpacity, View } from 'react-native'
 
 import { styles } from '../styles'
 
-export function PickerSchedule({
-  left,
-  middle,
-  right,
-}: {
+export type PickerScheduleProps = {
   left: {
     disabled?: boolean,
-    onChange: (value: typeof left.options[number]['value']) => void,
+    onChange: (value: string) => void,
     options: { label: string, value: string }[],
-    value: typeof left.options[number]['value'],
+    value: string,
   },
   middle: {
     disabled?: boolean,
@@ -24,7 +20,13 @@ export function PickerSchedule({
     onChange: (value: 'day' | 'week' | 'year') => void,
     value: 'day' | 'week' | 'year',
   },
-}) {
+}
+
+export function PickerSchedule({
+  left,
+  middle,
+  right,
+}: PickerScheduleProps) {
   const justLeft = middle.disabled && right.disabled
 
   return (

apps/mobile/src/components/__tests__/PickerSchedule.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react-native'
+
+import { PickerSchedule, type PickerScheduleProps } from '../PickerSchedule'
+
+describe('PickerSchedule', () => {
+  const defaultLeft: PickerScheduleProps['left'] = {
+    options: [{ label: 'Option 1', value: 'option1' }],
+    value: 'option1',
+    onChange: jest.fn(),
+  }
+
+  const defaultRight: PickerScheduleProps['right'] = {
+    value: 'day',
+    onChange: jest.fn(),
+  }
+
+  describe('Right-most labels', () => {
+    it('shows singular labels (day, week, year) when middle selection is 1', () => {
+      render(
+        <PickerSchedule
+          left={defaultLeft}
+          middle={{ value: 1, onChange: jest.fn() }}
+          right={defaultRight}
+        />
+      )
+
+      expect(screen.getByText('day')).toBeTruthy()
+      expect(screen.getByText('week')).toBeTruthy()
+      expect(screen.getByText('year')).toBeTruthy()
+
+      // Ensure plural forms are not present
+      expect(screen.queryByText('days')).toBeNull()
+      expect(screen.queryByText('weeks')).toBeNull()
+      expect(screen.queryByText('years')).toBeNull()
+    })
+
+    it('shows plural labels (days, weeks, years) when middle selection is not 1', () => {
+      render(
+        <PickerSchedule
+          left={defaultLeft}
+          middle={{ value: 2, onChange: jest.fn() }}
+          right={defaultRight}
+        />
+      )
+
+      expect(screen.getByText('days')).toBeTruthy()
+      expect(screen.getByText('weeks')).toBeTruthy()
+      expect(screen.getByText('years')).toBeTruthy()
+
+      // Ensure singular forms are not present
+      expect(screen.queryByText('day')).toBeNull()
+      expect(screen.queryByText('week')).toBeNull()
+      expect(screen.queryByText('year')).toBeNull()
+    })
+
+    it('shows plural labels when middle selection is a larger number', () => {
+      render(
+        <PickerSchedule
+          left={defaultLeft}
+          middle={{ value: 7, onChange: jest.fn() }}
+          right={defaultRight}
+        />
+      )
+
+      expect(screen.getByText('days')).toBeTruthy()
+      expect(screen.getByText('weeks')).toBeTruthy()
+      expect(screen.getByText('years')).toBeTruthy()
+    })
+  })
+})