@planningcenter/chat-react-native 4.3.0-rc.9 → 4.3.1-rc.0

package/src/__tests__/screens/message_actions_screen.test.tsx

@@ -0,0 +1,136 @@
+import { HeaderHeightContext } from '@react-navigation/elements'
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { fireEvent, render, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import {
+  MessageActionsScreen,
+  MessageActionsScreenProps,
+} from '../../screens/message_actions_screen'
+import { MessageResource } from '../../types'
+import {
+  AudioAdapter,
+  ChatAdapters,
+  ClipboardAdapter,
+  HapticAdapter,
+  ImagePickerAdapter,
+  VideoAdapter,
+} from '../../utils/native_adapters'
+
+const mockMessage: MessageResource = {
+  type: 'Message',
+  id: '1',
+  text: 'Copy me',
+  html: '<p>Copy me</p>',
+  createdAt: '2026-01-01T00:00:00Z',
+  deletedAt: null,
+  textEditedAt: null,
+  mine: false,
+  attachments: [],
+  author: { id: 1, type: 'Person', name: 'Author', avatar: '' },
+  reactionCounts: [],
+  replyCount: 0,
+  replyRootId: null,
+  messageType: 'user',
+}
+
+let mockCurrentMessage = mockMessage
+
+const mockGoBack = jest.fn()
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ navigate: jest.fn(), dispatch: jest.fn(), goBack: mockGoBack }),
+}))
+jest.mock('../../hooks/use_api_client', () => ({ useApiClient: () => ({}) }))
+jest.mock('../../hooks/use_features', () => ({
+  ...jest.requireActual('../../hooks/use_features'),
+  useFeatures: () => ({ features: [], featureEnabled: () => false }),
+}))
+jest.mock('../../hooks/use_message_reaction_toggle', () => ({
+  useMessageReactionToggle: () => ({ handleReactionToggle: jest.fn(), isPending: false }),
+}))
+jest.mock('../../hooks/use_conversation_messages', () => ({
+  useConversationMessages: () => ({ messages: [mockCurrentMessage], refetch: jest.fn() }),
+}))
+
+const setStringAsync = jest.fn(async (_: string) => {})
+const notificationSuccess = jest.fn()
+
+const safeAreaMetrics = {
+  frame: { x: 0, y: 0, width: 390, height: 844 },
+  insets: { top: 0, right: 0, bottom: 0, left: 0 },
+}
+
+const route = {
+  key: 'MessageActions',
+  name: 'MessageActions',
+  params: { conversation_id: 1, message_id: mockMessage.id },
+} as MessageActionsScreenProps['route']
+
+const renderScreen = () =>
+  render(
+    <QueryClientProvider client={buildTestQueryClient()}>
+      <SafeAreaProvider initialMetrics={safeAreaMetrics}>
+        <ThemeProvider value={DefaultTheme}>
+          <HeaderHeightContext.Provider value={0}>
+            <MessageActionsScreen route={route} />
+          </HeaderHeightContext.Provider>
+        </ThemeProvider>
+      </SafeAreaProvider>
+    </QueryClientProvider>
+  )
+
+describe('MessageActionsScreen', () => {
+  beforeAll(() => {
+    ChatAdapters.configure({
+      clipboard: new ClipboardAdapter({ getStringAsync: async () => '', setStringAsync }),
+      audio: new AudioAdapter({ useAudio: () => ({}) as any }),
+      video: new VideoAdapter({ Player: React.forwardRef(() => null) }),
+      imagePicker: new ImagePickerAdapter({
+        openCameraAsync: async () => ({ canceled: true, assets: null }),
+        openImageLibraryAsync: async () => ({ canceled: true, assets: null }),
+      }),
+      haptic: new HapticAdapter({
+        impactLight: jest.fn(),
+        impactMedium: jest.fn(),
+        impactHeavy: jest.fn(),
+        rigid: jest.fn(),
+        soft: jest.fn(),
+        notificationSuccess,
+        notificationWarning: jest.fn(),
+        notificationError: jest.fn(),
+      }),
+    })
+  })
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockCurrentMessage = mockMessage
+  })
+
+  it('copies the message text and gives success haptic feedback before closing', async () => {
+    const { getByText } = renderScreen()
+
+    fireEvent.press(getByText('Copy text'))
+
+    expect(setStringAsync).toHaveBeenCalledWith('Copy me')
+    await waitFor(() => expect(mockGoBack).toHaveBeenCalledTimes(1))
+    expect(notificationSuccess).toHaveBeenCalledTimes(1)
+    expect(notificationSuccess.mock.invocationCallOrder[0]).toBeLessThan(
+      mockGoBack.mock.invocationCallOrder[0]
+    )
+  })
+
+  it('leaves the clipboard alone and gives no haptic when there is nothing to copy', async () => {
+    mockCurrentMessage = { ...mockMessage, text: null }
+    const { getByText } = renderScreen()
+
+    fireEvent.press(getByText('Copy text'))
+
+    await waitFor(() => expect(mockGoBack).toHaveBeenCalledTimes(1))
+    expect(setStringAsync).not.toHaveBeenCalled()
+    expect(notificationSuccess).not.toHaveBeenCalled()
+  })
+})

package/src/__tests__/utils/client.ts

@@ -59,8 +59,7 @@ describe('get', () => {
     })
 
     expect(fetchSpy).toHaveBeenCalledWith(
-      // Do not url encode the query params or iOS will double encode
-      APP_BASE_URL + '/records?fields[Record]=id&per_page=100&where[id]=1',
+      APP_BASE_URL + '/records?fields%5BRecord%5D=id&per_page=100&where%5Bid%5D=1',
       expect.any(Object)
     )
   })
@@ -75,7 +74,7 @@ describe('get', () => {
   })
 
   it('walks pagination when walk = true', async () => {
-    const expectUrl = APP_BASE_URL + '/records?fields[Record]=id&per_page=1'
+    const expectUrl = APP_BASE_URL + '/records?fields%5BRecord%5D=id&per_page=1'
     const nextUrl = expectUrl + '&offset=1'
 
     MockServer.get(url, { ...DefaultFixtures.records(), links: { next: nextUrl } }, 200, {
@@ -92,7 +91,7 @@ describe('get', () => {
   })
 
   it('does not overwrite params in `url` when walking', async () => {
-    const expectUrl = APP_BASE_URL + '/records?fields[Record]=id'
+    const expectUrl = APP_BASE_URL + '/records?fields%5BRecord%5D=id'
     const nextUrl = expectUrl + '&offset=1&per_page=1'
     MockServer.get(url, { ...DefaultFixtures.records(), links: { next: nextUrl } }, 200, {
       once: true,

package/src/components/conversation/__tests__/message_form.test.tsx

@@ -0,0 +1,83 @@
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { QueryClientProvider, notifyManager } from '@tanstack/react-query'
+import { act, fireEvent, render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { chatQueryClient } from '../../../contexts/api_provider'
+import type { ConversationResource } from '../../../types'
+import { MessageForm } from '../message_form'
+
+jest.mock('../../../contexts/api_provider', () => {
+  const { buildTestQueryClient } = require('../../../__utils__/query_client')
+  return { chatQueryClient: buildTestQueryClient() }
+})
+
+const mockPost = jest.fn()
+jest.mock('../../../hooks/use_api_client', () => ({
+  useApiClient: () => ({ chat: { post: mockPost, patch: jest.fn() } }),
+}))
+
+jest.mock('../../../hooks/use_current_person', () => ({
+  useCurrentPerson: () => ({ type: 'Person', id: 1, name: 'Me', avatar: null }),
+}))
+
+jest.mock('../../../hooks/use_message_draft', () => ({
+  useMessageDraft: () => ({ draft: null, saveDraft: jest.fn(), clearDraft: jest.fn() }),
+}))
+
+jest.mock('../../../hooks/use_attachment_uploader', () => ({
+  useAttachmentUploader: () => ({
+    attachments: [],
+    attachmentIds: [],
+    pendingUploads: false,
+    flaggedAttachmentCount: 0,
+    reset: jest.fn(),
+  }),
+}))
+
+jest.mock('../../../hooks/use_broadcast_typing_status', () => ({
+  useBroadcastTypingStatus: () => jest.fn(),
+}))
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ navigate: jest.fn(), setParams: jest.fn() }),
+  useRoute: () => ({ params: { conversation_id: 7 } }),
+}))
+
+notifyManager.setNotifyFunction(fn => act(fn))
+
+const conversation = { id: 7, disabled: false } as unknown as ConversationResource
+
+describe('MessageForm', () => {
+  let finishSend: (value: unknown) => void
+
+  beforeEach(() => {
+    chatQueryClient.clear()
+    mockPost.mockReset().mockReturnValue(new Promise(resolve => (finishSend = resolve)))
+  })
+
+  afterEach(async () => {
+    await act(async () => finishSend({ data: { type: 'Message', id: 'sent', mine: true } }))
+  })
+
+  it('keeps the input editable while a sent message is in flight', async () => {
+    render(
+      <QueryClientProvider client={chatQueryClient}>
+        <ThemeProvider value={DefaultTheme}>
+          <MessageForm.Root conversation={conversation}>
+            <MessageForm.TextInput />
+            <MessageForm.SubmitButton />
+          </MessageForm.Root>
+        </ThemeProvider>
+      </QueryClientProvider>
+    )
+
+    fireEvent.changeText(screen.getByTestId('message-composer-input'), 'hello')
+    await act(async () => {
+      fireEvent.press(screen.getByLabelText('Send message'))
+    })
+
+    expect(mockPost).toHaveBeenCalled()
+    expect(screen.getByTestId('message-composer-input').props.editable).toBe(true)
+  })
+})

package/src/components/conversation/message_form.tsx

@@ -276,8 +276,8 @@ function MessageFormRoot({
         // added earlier.
         if (!(await catchUpBeforeSend())) return
 
-        reset()
         mutateAsync({ text: messageText, attachments: attachmentsForSubmit })
+        reset()
       }
     }
   }

package/src/hooks/__tests__/use_debounced_search_term.test.tsx

@@ -0,0 +1,38 @@
+import { act, renderHook } from '@testing-library/react-native'
+import { useDebouncedSearchTerm } from '../use_debounced_search_term'
+
+beforeEach(() => jest.useFakeTimers())
+afterEach(() => jest.useRealTimers())
+
+describe('useDebouncedSearchTerm', () => {
+  it('settles on the trimmed term once typing pauses', () => {
+    const { result, rerender } = renderHook(
+      ({ term }: { term: string }) => useDebouncedSearchTerm(term),
+      {
+        initialProps: { term: 'bud' },
+      }
+    )
+
+    rerender({ term: ' budget ' })
+    act(() => jest.advanceTimersByTime(199))
+    expect(result.current).toBe('')
+
+    act(() => jest.advanceTimersByTime(1))
+    expect(result.current).toBe('budget')
+  })
+
+  it('clears immediately when the term empties', () => {
+    const { result, rerender } = renderHook(
+      ({ term }: { term: string }) => useDebouncedSearchTerm(term),
+      {
+        initialProps: { term: 'budget' },
+      }
+    )
+    act(() => jest.advanceTimersByTime(200))
+    expect(result.current).toBe('budget')
+
+    rerender({ term: '   ' })
+
+    expect(result.current).toBe('')
+  })
+})

package/src/hooks/__tests__/use_search_results.test.tsx

@@ -0,0 +1,88 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import type { SearchResultResource } from '../../types/resources/search_result'
+import { NO_FAILED_TYPES, useSearchResults } from '../use_search_results'
+
+const mockGet = jest.fn()
+jest.mock('../use_api_client', () => ({ useApiClient: () => ({ chat: { get: mockGet } }) }))
+
+const result = (type: SearchResultResource['type'], id: string) =>
+  ({ type, id, title: `${type} ${id}`, url: `/${type}s/${id}` }) as SearchResultResource
+
+const page = (data: SearchResultResource[], meta: Record<string, unknown> = {}) => ({
+  data,
+  links: {},
+  meta: { count: data.length, totalCount: data.length, ...meta },
+})
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={buildTestQueryClient()}>{children}</QueryClientProvider>
+)
+
+beforeEach(() => mockGet.mockReset())
+
+describe('useSearchResults', () => {
+  it('flattens pages into one list without repeating a result', async () => {
+    mockGet
+      .mockResolvedValueOnce(
+        page([result('conversation', '1'), result('message', '1')], { next: { offset: '20' } })
+      )
+      .mockResolvedValueOnce(page([result('message', '1'), result('message', '2')]))
+
+    const { result: hook } = renderHook(() => useSearchResults('potluck'), { wrapper })
+    await waitFor(() => expect(hook.current.hasNextPage).toBe(true))
+
+    act(() => {
+      hook.current.loadMore()
+    })
+    await waitFor(() => expect(hook.current.hasNextPage).toBe(false))
+
+    expect(hook.current.results.map(({ type, id }) => `${type}:${id}`)).toEqual([
+      'conversation:1',
+      'message:1',
+      'message:2',
+    ])
+    expect(mockGet).toHaveBeenLastCalledWith({
+      url: '/search_results',
+      data: expect.objectContaining({ q: 'potluck', offset: 20 }),
+    })
+  })
+
+  it('reads failedTypes from the first page', async () => {
+    mockGet
+      .mockResolvedValueOnce(page([], { failedTypes: ['message'], next: { offset: '20' } }))
+      .mockResolvedValueOnce(page([], { failedTypes: ['conversation'] }))
+
+    const { result: hook } = renderHook(() => useSearchResults('potluck'), { wrapper })
+    await waitFor(() => expect(hook.current.hasNextPage).toBe(true))
+
+    act(() => {
+      hook.current.loadMore()
+    })
+    await waitFor(() => expect(hook.current.hasNextPage).toBe(false))
+
+    expect(hook.current.failedTypes).toEqual(['message'])
+  })
+
+  it('makes no request for an empty or whitespace-only term', () => {
+    const { result: hook } = renderHook(() => useSearchResults('   '), { wrapper })
+
+    expect(mockGet).not.toHaveBeenCalled()
+    expect(hook.current.results).toEqual([])
+    expect(hook.current.failedTypes).toBe(NO_FAILED_TYPES)
+  })
+
+  it('searches with the trimmed term', async () => {
+    mockGet.mockResolvedValueOnce(page([]))
+
+    const { result: hook } = renderHook(() => useSearchResults(' potluck '), { wrapper })
+    await waitFor(() => expect(hook.current.isPending).toBe(false))
+
+    expect(mockGet).toHaveBeenCalledWith({
+      url: '/search_results',
+      data: expect.objectContaining({ q: 'potluck' }),
+    })
+  })
+})

package/src/hooks/use_debounced_search_term.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react'
+
+const DEFAULT_DELAY_MS = 200
+
+export function useDebouncedSearchTerm(term: string, delayMs = DEFAULT_DELAY_MS) {
+  const [debouncedTerm, setDebouncedTerm] = useState('')
+  const trimmedTerm = term.trim()
+
+  useEffect(() => {
+    if (trimmedTerm.length === 0) {
+      setDebouncedTerm('')
+      return
+    }
+
+    const timer = setTimeout(() => setDebouncedTerm(trimmedTerm), delayMs)
+    return () => clearTimeout(timer)
+  }, [trimmedTerm, delayMs])
+
+  return debouncedTerm
+}

package/src/hooks/use_search_results.ts

@@ -0,0 +1,78 @@
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { useCallback, useMemo } from 'react'
+import type { ApiCollection } from '../types'
+import type { SearchResultResource } from '../types/resources/search_result'
+import {
+  getSearchResultsQueryKey,
+  getSearchResultsRequestArgs,
+} from '../utils/request/get_search_results'
+import { ONE_MINUTE } from '../utils/time'
+import { useApiClient } from './use_api_client'
+
+export type SearchResultsCollection = ApiCollection<SearchResultResource> & {
+  meta: { failedTypes?: SearchResultResource['type'][] }
+}
+
+type SearchResultsPageParam = { offset?: number }
+
+export const NO_FAILED_TYPES: SearchResultResource['type'][] = []
+
+export function useSearchResults(term: string) {
+  const apiClient = useApiClient()
+  const trimmedTerm = term.trim()
+
+  const {
+    data,
+    isPending,
+    isError,
+    isFetchNextPageError,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: getSearchResultsQueryKey(trimmedTerm),
+    queryFn: ({ pageParam }) => {
+      const requestArgs = getSearchResultsRequestArgs(trimmedTerm)
+      return apiClient.chat.get<SearchResultsCollection>({
+        url: requestArgs.url,
+        data: { ...requestArgs.data, ...pageParam },
+      })
+    },
+    initialPageParam: {} as SearchResultsPageParam,
+    getNextPageParam: lastPage => nextPageParam(lastPage.meta.next?.offset),
+    enabled: trimmedTerm.length >= 1,
+    staleTime: ONE_MINUTE,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    retry: 1,
+  })
+
+  const results = useMemo(() => uniqueResults(data?.pages.flatMap(page => page.data) ?? []), [data])
+  const failedTypes = data?.pages[0]?.meta.failedTypes ?? NO_FAILED_TYPES
+  const loadMore = useCallback(() => fetchNextPage({ cancelRefetch: false }), [fetchNextPage])
+
+  return {
+    results,
+    failedTypes,
+    isPending,
+    isError: isError && !isFetchNextPageError,
+    isFetchNextPageError,
+    loadMore,
+    hasNextPage,
+    isFetchingNextPage,
+  }
+}
+
+function nextPageParam(offset?: string): SearchResultsPageParam | undefined {
+  return offset ? { offset: Number(offset) } : undefined
+}
+
+function uniqueResults(results: SearchResultResource[]) {
+  const seen = new Set<string>()
+  return results.filter(result => {
+    const key = `${result.type}:${result.id}`
+    if (seen.has(key)) return false
+    seen.add(key)
+    return true
+  })
+}

package/src/screens/conversation_select_recipients/components/view_more_link_row.tsx

@@ -4,15 +4,24 @@ import { TextButton } from '../../../components'
 interface ViewMoreLinkRowProps {
   onPress: () => void
   accessibilityHint: string
+  expanded?: boolean
 }
 
-export const ViewMoreLinkRow = ({ accessibilityHint, onPress }: ViewMoreLinkRowProps) => {
+export const ViewMoreLinkRow = ({
+  accessibilityHint,
+  expanded = false,
+  onPress,
+}: ViewMoreLinkRowProps) => {
   const styles = useRowStyles()
 
   return (
     <View style={[styles.row]}>
-      <TextButton onPress={onPress} accessibilityHint={accessibilityHint} accessibilityRole="link">
-        View more
+      <TextButton
+        onPress={onPress}
+        accessibilityHint={accessibilityHint}
+        accessibilityState={{ expanded }}
+      >
+        {expanded ? 'View less' : 'View more'}
       </TextButton>
     </View>
   )

package/src/screens/conversation_select_recipients/conversation_select_direct_message_recipients_screen.tsx

@@ -1,6 +1,6 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StackActions, useNavigation } from '@react-navigation/native'
-import { RefObject, useEffect, useRef, useState } from 'react'
+import { RefObject, useRef, useState } from 'react'
 import { FlatList, Pressable, StyleSheet, TextInput, View } from 'react-native'
 import { Avatar, Badge, Banner, Icon, KeyboardView, Spinner, Text } from '../../components'
 import { ActionButton } from '../../components/display/action_button'
@@ -11,6 +11,7 @@ import { useDirectMessageAffiliations } from '../../hooks/direct_messages/use_di
 import { useDirectMessageCandidates } from '../../hooks/direct_messages/use_direct_message_candidates'
 import { useDirectMessageConversationValidate } from '../../hooks/direct_messages/use_direct_message_conversation_validate'
 import { useFindOrCreateDirectMessageConversation } from '../../hooks/direct_messages/use_find_or_create_direct_message_conversation'
+import { useDebouncedSearchTerm } from '../../hooks/use_debounced_search_term'
 import { availableFeatures, useFeatures } from '../../hooks/use_features'
 import { DirectMessageCandidateResource } from '../../types/resources/direct_message_candidate'
 import { ResultsHeading } from './components/results_heading'
@@ -26,7 +27,7 @@ export function ConversationSelectDirectMessageRecipientsScreen({
   const navigation = useNavigation()
   const { featureEnabled } = useFeatures()
   const [searchTerm, setSearchTerm] = useState('')
-  const [debouncedTerm, setDebouncedTerm] = useState('')
+  const debouncedTerm = useDebouncedSearchTerm(searchTerm)
   const [selectedPeople, setSelectedPeople] = useState<Map<string, DirectMessageCandidateResource>>(
     () =>
       new Map(
@@ -45,16 +46,10 @@ export function ConversationSelectDirectMessageRecipientsScreen({
   )
   const searchInputRef = useRef<TextInput>(null)
 
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedTerm(searchTerm), 200)
-    return () => clearTimeout(timer)
-  }, [searchTerm])
-
   const selectPerson = (person: DirectMessageCandidateResource) => {
     if (selectedPeople.size >= MAX_RECIPIENTS) return
     setSelectedPeople(prev => new Map(prev).set(person.id, person))
     setSearchTerm('')
-    setDebouncedTerm('')
     // Controlled TextInput can retain stale native text on iOS when the value
     // is cleared while it stays focused (keyboardShouldPersistTaps keeps it
     // focused through the tap) — clear() forces the native view to sync. Gated

package/src/screens/message_actions_screen.tsx

@@ -124,8 +124,12 @@ function MessageActionsScreenContent({
     })
   }, [navigation, conversation_id, message.id, message.replyRootId, replyRootAuthorName])
 
-  const handleCopyPress = () => {
-    Clipboard.setStringAsync(message?.text || attachmentForCopy() || '')
+  const handleCopyPress = async () => {
+    const textToCopy = message?.text || attachmentForCopy()
+    if (textToCopy) {
+      await Clipboard.setStringAsync(textToCopy)
+      Haptic.notificationSuccess()
+    }
     navigation.goBack()
   }
 

package/src/screens/search/__tests__/search_screen.test.tsx

@@ -0,0 +1,64 @@
+import { act, fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import type { useSearchResults } from '../../../hooks/use_search_results'
+import { SearchScreen } from '../search_screen'
+
+const mockUseSearchResults = jest.fn<ReturnType<typeof useSearchResults>, [string]>()
+jest.mock('../../../hooks/use_search_results', () => ({
+  useSearchResults: (term: string) => mockUseSearchResults(term),
+}))
+jest.mock('../../../components/display/keyboard_view', () => ({
+  ...jest.requireActual('../../../components/display/keyboard_view'),
+  KeyboardView: ({ children }: { children: React.ReactNode }) => children,
+}))
+
+const inputLabel = 'Search titles and messages'
+
+beforeEach(() => {
+  jest.useFakeTimers()
+  mockUseSearchResults.mockReset().mockReturnValue({
+    results: [],
+    failedTypes: [],
+    isPending: true,
+    isError: false,
+    isFetchNextPageError: false,
+    loadMore: jest.fn(),
+    hasNextPage: false,
+    isFetchingNextPage: false,
+  })
+})
+
+afterEach(() => jest.useRealTimers())
+
+describe('SearchScreen', () => {
+  it('searches once with the trimmed term after typing settles', () => {
+    const view = render(<SearchScreen />)
+    const input = view.getByLabelText(inputLabel)
+
+    fireEvent.changeText(input, 'bud')
+    fireEvent.changeText(input, ' budget ')
+
+    expect(view.getByText('Search chat')).toBeTruthy()
+    expect(mockUseSearchResults).not.toHaveBeenCalled()
+
+    act(() => jest.advanceTimersByTime(200))
+
+    const searchedTerms = new Set(mockUseSearchResults.mock.calls.map(([term]) => term))
+    expect([...searchedTerms]).toEqual(['budget'])
+    expect(view.queryByText('Search chat')).toBeNull()
+    expect(view.getByLabelText('Loading results')).toBeTruthy()
+  })
+
+  it('returns to the prompt as soon as the term is cleared', () => {
+    const view = render(<SearchScreen />)
+    const input = view.getByLabelText(inputLabel)
+
+    fireEvent.changeText(input, 'budget')
+    act(() => jest.advanceTimersByTime(200))
+    expect(view.queryByText('Search chat')).toBeNull()
+
+    fireEvent.changeText(input, '   ')
+
+    expect(view.getByText('Search chat')).toBeTruthy()
+  })
+})