@lovett/ui 0.0.11 → 0.2.0

package/src/thread/__tests__/use-attachments.test.tsx

@@ -0,0 +1,679 @@
+/**
+ * Composer attachments — ADR-151 D1, D3 (client-side courtesy caps) and D5.
+ *
+ * The tests that matter here are AC#6 and AC#7, and they are a pair: a paste at
+ * or above 2,500 characters becomes a file **and can be turned back**, and a
+ * paste below it is untouched. Threshold behaviour is exactly the kind of thing
+ * that ships subtly wrong — off by one, or intercepting but losing the text —
+ * so both directions and both boundaries are pinned, and the restore is
+ * asserted byte for byte rather than "roughly the same".
+ */
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, fireEvent, render, renderHook, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {
+  GIF_SEARCH_DEBOUNCE_MS,
+  PASTE_ATTACHMENT_THRESHOLD,
+  pastedTextFilename,
+  shouldAttachPaste,
+  useAttachmentUrl,
+  useAttachments,
+  type AttachmentTicketLike,
+} from '../use-attachments'
+import { AttachmentGif, AttachmentImage, AttachmentTray, GifPicker } from '../attachments'
+
+afterEach(cleanup)
+
+function ticket(over: Partial<AttachmentTicketLike> = {}): AttachmentTicketLike {
+  return {
+    id: 'tup_1',
+    kind: 'file',
+    name: 'pasted-text-1.txt',
+    sizeBytes: 10,
+    mime: 'text/plain',
+    aspectRatio: null,
+    ...over,
+  }
+}
+
+/** A resolved uploader that records the Blob it was handed. */
+function recordingUploader() {
+  const seen: { blob: Blob; filename: string }[] = []
+  const upload = vi.fn(async (blob: Blob, opts: { filename: string }) => {
+    seen.push({ blob, filename: opts.filename })
+    return ticket({ id: `tup_${String(seen.length)}`, name: opts.filename, sizeBytes: blob.size })
+  })
+  return { upload, seen }
+}
+
+/**
+ * jsdom has no media queries, so `matchMedia` is stubbed rather than mocked
+ * away: the component subscribes to `change`, and a stub that returned a bare
+ * boolean would let a regression in the subscription pass unnoticed.
+ */
+function stubReducedMotion(reduce: boolean): () => void {
+  const listeners = new Set<(e: MediaQueryListEvent) => void>()
+  const original = window.matchMedia
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    writable: true,
+    value: (queryText: string) => ({
+      matches: reduce && queryText.includes('prefers-reduced-motion'),
+      media: queryText,
+      addEventListener: (_: string, fn: (e: MediaQueryListEvent) => void) => listeners.add(fn),
+      removeEventListener: (_: string, fn: (e: MediaQueryListEvent) => void) =>
+        listeners.delete(fn),
+      onchange: null,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      dispatchEvent: () => false,
+    }),
+  })
+  return () => {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      writable: true,
+      value: original,
+    })
+  }
+}
+
+describe('D5 — the paste threshold, in both directions', () => {
+  it('AC#7: a paste below 2,500 characters is not intercepted at all', async () => {
+    const { upload } = recordingUploader()
+    const { result } = renderHook(() => useAttachments({ upload }))
+
+    let intercepted = true
+    act(() => {
+      intercepted = result.current.addPastedText('x'.repeat(PASTE_ATTACHMENT_THRESHOLD - 1))
+    })
+
+    // `false` is the whole contract: the caller does NOT preventDefault, so
+    // ADR-148 D8's paste handling runs exactly as it did before this ADR.
+    expect(intercepted).toBe(false)
+    expect(upload).not.toHaveBeenCalled()
+    expect(result.current.attachments).toHaveLength(0)
+  })
+
+  it('AC#6: a paste at exactly 2,500 characters becomes an attachment', async () => {
+    const { upload, seen } = recordingUploader()
+    const { result } = renderHook(() => useAttachments({ upload }))
+    const text = 'y'.repeat(PASTE_ATTACHMENT_THRESHOLD)
+
+    act(() => {
+      expect(result.current.addPastedText(text)).toBe(true)
+    })
+
+    // The boundary is inclusive, and it is where it says it is.
+    expect(shouldAttachPaste(text)).toBe(true)
+    expect(shouldAttachPaste(text.slice(1))).toBe(false)
+
+    await waitFor(() => {
+      expect(result.current.attachments[0]?.state).toBe('ready')
+    })
+    // Derived and honest — never a fabricated filename.
+    expect(result.current.attachments[0]?.name).toBe(pastedTextFilename(1))
+    // It went through the FILE path: a Blob, the same uploader, no second
+    // mechanism. That is the whole reason D5 is cheap.
+    expect(seen[0]?.blob).toBeInstanceOf(Blob)
+    expect(seen[0]?.blob.type).toBe('text/plain')
+    expect(await seen[0]?.blob.text()).toBe(text)
+  })
+
+  it('AC#6: "Insert as text instead" restores the paste byte for byte', async () => {
+    const { upload } = recordingUploader()
+    const { result } = renderHook(() => useAttachments({ upload }))
+    // Deliberately awkward content: a trailing newline, a tab, a non-BMP
+    // codepoint, and CRLF. "Byte for byte" is only a claim worth testing on
+    // text that a lossy round trip would visibly damage.
+    const text = `${'z'.repeat(PASTE_ATTACHMENT_THRESHOLD)}\r\n\tEnd \u{1F600}\n`
+
+    act(() => {
+      result.current.addPastedText(text)
+    })
+    await waitFor(() => {
+      expect(result.current.attachments[0]?.state).toBe('ready')
+    })
+
+    const localId = result.current.attachments[0]?.localId ?? ''
+    let restored: string | null = null
+    act(() => {
+      restored = result.current.insertAsText(localId)
+    })
+
+    expect(restored).toBe(text)
+    expect(result.current.attachments).toHaveLength(0)
+  })
+
+  it('names successive pastes in order', async () => {
+    const { upload } = recordingUploader()
+    const { result } = renderHook(() => useAttachments({ upload }))
+    const text = 'q'.repeat(PASTE_ATTACHMENT_THRESHOLD)
+
+    act(() => {
+      result.current.addPastedText(text)
+      result.current.addPastedText(text)
+    })
+    await waitFor(() => {
+      expect(result.current.attachments).toHaveLength(2)
+    })
+    expect(result.current.attachments.map((a) => a.name)).toEqual([
+      pastedTextFilename(1),
+      pastedTextFilename(2),
+    ])
+  })
+
+  it('leaves an over-large paste as prose rather than dropping it', async () => {
+    // The refusal path must not eat the text: `false` means the caller lets the
+    // paste land in the body, which is the honest failure for "too big to
+    // attach".
+    const { upload } = recordingUploader()
+    const { result } = renderHook(() =>
+      useAttachments({ upload, maxFileBytes: PASTE_ATTACHMENT_THRESHOLD - 1 }),
+    )
+    act(() => {
+      expect(result.current.addPastedText('w'.repeat(PASTE_ATTACHMENT_THRESHOLD))).toBe(false)
+    })
+    expect(result.current.attachments).toHaveLength(0)
+    expect(upload).not.toHaveBeenCalled()
+  })
+})
+
+describe('D1 — each file is its own unit', () => {
+  it('reports per-file progress and hands back tickets in order', async () => {
+    const progressSinks: ((f: number) => void)[] = []
+    const upload = vi.fn(
+      (blob: Blob, opts: { filename: string; onProgress: (f: number) => void }) => {
+        progressSinks.push(opts.onProgress)
+        return new Promise<AttachmentTicketLike>((resolve) => {
+          setTimeout(() => {
+            resolve(ticket({ id: `tup_${opts.filename}`, name: opts.filename, sizeBytes: blob.size }))
+          }, 0)
+        })
+      },
+    )
+    const { result } = renderHook(() => useAttachments({ upload }))
+
+    act(() => {
+      result.current.addFiles([
+        new File(['a'], 'a.png', { type: 'image/png' }),
+        new File(['bb'], 'b.png', { type: 'image/png' }),
+      ])
+    })
+    expect(result.current.attachments).toHaveLength(2)
+    expect(result.current.isUploading).toBe(true)
+
+    act(() => {
+      progressSinks[0]?.(0.5)
+    })
+    expect(result.current.attachments[0]?.progress).toBe(0.5)
+    // Progress on one file does not touch the other.
+    expect(result.current.attachments[1]?.progress).toBe(0)
+
+    await waitFor(() => {
+      expect(result.current.isUploading).toBe(false)
+    })
+    expect(result.current.ticketIds).toEqual(['tup_a.png', 'tup_b.png'])
+  })
+
+  it('cancel aborts the transfer, not just the chip', async () => {
+    let captured: AbortSignal | undefined
+    const upload = vi.fn(
+      (_blob: Blob, opts: { signal: AbortSignal }) =>
+        new Promise<AttachmentTicketLike>((_resolve, reject) => {
+          captured = opts.signal
+          opts.signal.addEventListener('abort', () => {
+            reject(new DOMException('aborted', 'AbortError'))
+          })
+        }),
+    )
+    const { result } = renderHook(() => useAttachments({ upload }))
+
+    act(() => {
+      result.current.addFiles([new File(['a'], 'a.png', { type: 'image/png' })])
+    })
+    const localId = result.current.attachments[0]?.localId ?? ''
+    act(() => {
+      result.current.remove(localId)
+    })
+
+    expect(captured?.aborted).toBe(true)
+    // And an abort is not a failure: no red chip is left behind.
+    await waitFor(() => {
+      expect(result.current.attachments).toHaveLength(0)
+    })
+  })
+
+  it('skips a refused file and keeps going, rather than dropping the rest silently', async () => {
+    // `break` here would upload #1, report #2, and make #3-#5 vanish with no
+    // message — D3 requires every refusal be named and shown.
+    const { upload } = recordingUploader()
+    const errors: string[] = []
+    const { result } = renderHook(() =>
+      useAttachments({
+        upload,
+        maxFileBytes: 10,
+        onError: (m) => {
+          errors.push(m)
+        },
+      }),
+    )
+    act(() => {
+      result.current.addFiles([
+        new File(['ok'], 'a.png', { type: 'image/png' }),
+        new File(['way too long for the cap'], 'big.png', { type: 'image/png' }),
+        new File(['ok'], 'c.png', { type: 'image/png' }),
+      ])
+    })
+    await waitFor(() => {
+      expect(result.current.attachments).toHaveLength(2)
+    })
+    expect(result.current.attachments.map((a) => a.name)).toEqual(['a.png', 'c.png'])
+    expect(errors).toHaveLength(1)
+    expect(errors[0]).toContain('big.png')
+  })
+
+  it('refuses the eleventh file in a single drop', async () => {
+    const { upload } = recordingUploader()
+    const errors: string[] = []
+    const { result } = renderHook(() =>
+      useAttachments({
+        upload,
+        onError: (m) => {
+          errors.push(m)
+        },
+      }),
+    )
+
+    const files = Array.from(
+      { length: 11 },
+      (_, i) => new File(['x'], `f${String(i)}.png`, { type: 'image/png' }),
+    )
+    act(() => {
+      result.current.addFiles(files)
+    })
+
+    // The ceiling has to see the batch it is inside — eleven at once must stop
+    // at ten, not start all eleven against a list that has not re-rendered.
+    expect(result.current.attachments).toHaveLength(10)
+    expect(errors[0]).toContain('up to 10')
+  })
+
+  it('surfaces the server’s own message on a refusal', async () => {
+    const upload = vi.fn(() => Promise.reject(new Error('Files can be up to 25 MB.')))
+    const errors: string[] = []
+    const { result } = renderHook(() =>
+      useAttachments({
+        upload,
+        onError: (m) => {
+          errors.push(m)
+        },
+      }),
+    )
+    act(() => {
+      result.current.addFiles([new File(['x'], 'big.png', { type: 'image/png' })])
+    })
+    await waitFor(() => {
+      expect(result.current.attachments[0]?.state).toBe('failed')
+    })
+    // Not re-worded here: the server already said it in the product's voice.
+    expect(result.current.attachments[0]?.error).toBe('Files can be up to 25 MB.')
+    expect(errors).toEqual(['Files can be up to 25 MB.'])
+  })
+})
+
+describe('the tray', () => {
+  it('offers the undo only on a pasted chip, and only when a handler exists', async () => {
+    const onInsertAsText = vi.fn()
+    render(
+      <AttachmentTray
+        attachments={[
+          {
+            localId: 'a',
+            name: 'pasted-text-1.txt',
+            sizeBytes: 3000,
+            kind: 'file',
+            state: 'ready',
+            progress: 1,
+            ticketId: 'tup_1',
+            pastedText: 'hello',
+          },
+          {
+            localId: 'b',
+            name: 'shot.png',
+            sizeBytes: 1200,
+            kind: 'image',
+            state: 'ready',
+            progress: 1,
+            ticketId: 'tup_2',
+          },
+        ]}
+        onRemove={vi.fn()}
+        onInsertAsText={onInsertAsText}
+      />,
+    )
+
+    // One chip has something to restore; the other does not, so it gets no
+    // action rather than a disabled one.
+    const restore = screen.getAllByRole('button', { name: 'Insert as text instead' })
+    expect(restore).toHaveLength(1)
+
+    await userEvent.click(restore[0] as HTMLElement)
+    expect(onInsertAsText).toHaveBeenCalledWith('a')
+  })
+
+  it('shows a CHARACTER count on a pasted chip, not a byte size (D5)', () => {
+    render(
+      <AttachmentTray
+        attachments={[
+          {
+            localId: 'a',
+            name: 'pasted-text-1.txt',
+            sizeBytes: 3000,
+            kind: 'file',
+            state: 'ready',
+            progress: 1,
+            ticketId: 'tup_1',
+            pastedText: 'x'.repeat(2600),
+            charCount: 2600,
+          },
+        ]}
+        onRemove={vi.fn()}
+      />,
+    )
+    // D5 says "with the character count shown on the chip" — the person pasted
+    // characters, and for anything non-ASCII a byte size is a different number.
+    expect(screen.getByText('2,600 characters')).toBeInTheDocument()
+    expect(screen.queryByText('2.9 KB')).toBeNull()
+  })
+
+  it('carries the character count through the paste path end to end', async () => {
+    const { upload } = recordingUploader()
+    const { result } = renderHook(() => useAttachments({ upload }))
+    const text = 'e'.repeat(PASTE_ATTACHMENT_THRESHOLD + 17)
+    act(() => {
+      result.current.addPastedText(text)
+    })
+    await waitFor(() => {
+      expect(result.current.attachments[0]?.state).toBe('ready')
+    })
+    expect(result.current.attachments[0]?.charCount).toBe(text.length)
+  })
+
+  it('exposes upload progress as a real progressbar', () => {
+    render(
+      <AttachmentTray
+        attachments={[
+          {
+            localId: 'a',
+            name: 'shot.png',
+            sizeBytes: 1200,
+            kind: 'image',
+            state: 'uploading',
+            progress: 0.42,
+          },
+        ]}
+        onRemove={vi.fn()}
+      />,
+    )
+    const bar = screen.getByRole('progressbar', { name: 'Uploading shot.png' })
+    expect(bar).toHaveAttribute('aria-valuenow', '42')
+  })
+
+  it('labels the remove control by what it will do', () => {
+    render(
+      <AttachmentTray
+        attachments={[
+          {
+            localId: 'a',
+            name: 'shot.png',
+            sizeBytes: 1200,
+            kind: 'image',
+            state: 'uploading',
+            progress: 0.1,
+          },
+        ]}
+        onRemove={vi.fn()}
+      />,
+    )
+    // Cancelling an upload and removing a finished file are different acts, and
+    // a screen reader should hear which one this is.
+    expect(screen.getByRole('button', { name: 'Cancel shot.png' })).toBeInTheDocument()
+  })
+})
+
+describe('the render-loop guard', () => {
+  /**
+   * The failure this pins does not look like a failure.
+   *
+   * A host writing `resolveAttachmentUrl={(id) => api.attachmentUrl(brandId, …, id)}`
+   * — the obvious way to write it — hands over a NEW function identity on every
+   * render. If that identity were an effect dependency, the effect would re-run,
+   * set state, re-render and re-run forever: a hung tab, or a test the runner
+   * reports as an out-of-memory "environment" problem rather than as a bug.
+   *
+   * So both assertions are about CALL COUNT under deliberate identity churn,
+   * not about the resolved value.
+   */
+  it('resolves once even when the resolver identity changes every render', async () => {
+    // Typed to take the id, because the hook passes one — a zero-arg mock made
+    // `resolve(id)` a type error while the production signature was correct.
+    const resolve = vi.fn((_id: string) => Promise.resolve('https://example.test/a.png'))
+    let renders = 0
+
+    function Probe({ tick }: { tick: number }) {
+      renders += 1
+      // A fresh closure on every render, exactly as a host would write it.
+      const { url } = useAttachmentUrl('att_1', (id) => resolve(id))
+      return <span data-testid="url">{`${String(tick)}:${url ?? ''}`}</span>
+    }
+
+    const { rerender } = render(<Probe tick={0} />)
+    await waitFor(() => {
+      expect(screen.getByTestId('url').textContent).toContain('example.test')
+    })
+
+    const after = renders
+    rerender(<Probe tick={1} />)
+    rerender(<Probe tick={2} />)
+    await waitFor(() => {
+      expect(screen.getByTestId('url').textContent).toContain('2:')
+    })
+
+    // Three more renders, still one fetch — and the render count is bounded,
+    // which is what "no loop" actually means.
+    expect(resolve).toHaveBeenCalledTimes(1)
+    expect(renders).toBeLessThanOrEqual(after + 4)
+  })
+
+  it('re-resolves when the ATTACHMENT changes, which is the thing that identifies a fetch', async () => {
+    const resolve = vi.fn((id: string) => Promise.resolve(`https://example.test/${id}`))
+
+    function Probe({ id }: { id: string }) {
+      const { url } = useAttachmentUrl(id, (next) => resolve(next))
+      return <span data-testid="url">{url ?? ''}</span>
+    }
+
+    const { rerender } = render(<Probe id="att_1" />)
+    await waitFor(() => {
+      expect(screen.getByTestId('url').textContent).toBe('https://example.test/att_1')
+    })
+    rerender(<Probe id="att_2" />)
+    await waitFor(() => {
+      expect(screen.getByTestId('url').textContent).toBe('https://example.test/att_2')
+    })
+    expect(resolve).toHaveBeenCalledTimes(2)
+  })
+
+  it('renders the placeholder, never a collapsed box, when the URL cannot be had', async () => {
+    render(
+      <AttachmentGif
+        attachment={{ id: 'att_x', kind: 'gif', name: 'nope.mp4', aspectRatio: 2 }}
+        resolveUrl={() => Promise.resolve(null)}
+      />,
+    )
+    // The placeholder keeps the DECLARED ratio, so the comment's layout is the
+    // same whether the bytes arrived or not.
+    await waitFor(() => {
+      const box = document.querySelector('span[style*="aspect-ratio"]')
+      expect(box).not.toBeNull()
+      // jsdom normalizes the shorthand to `<w> / <h>`; what matters is that the
+      // box declares the ratio at all, and that it is the one the attachment
+      // carried rather than the 16/10 fallback.
+      expect((box as HTMLElement).style.aspectRatio.replace(/\s/g, '')).toBe('2/1')
+      expect(box?.querySelector('svg')).not.toBeNull()
+    })
+  })
+})
+
+describe('AC#5 — a GIF under prefers-reduced-motion', () => {
+  const GIF = {
+    id: 'att_g',
+    kind: 'gif' as const,
+    name: 'a cat',
+    aspectRatio: 16 / 9,
+  }
+  const resolveUrl = () => Promise.resolve('https://media.test/cat.mp4')
+
+  it('shows a still frame with an explicit play control', async () => {
+    const restore = stubReducedMotion(true)
+    try {
+      render(<AttachmentGif attachment={GIF} resolveUrl={resolveUrl} />)
+      const video = await waitFor(() => {
+        const found = document.querySelector('video')
+        expect(found).not.toBeNull()
+        return found as HTMLVideoElement
+      })
+      // Not playing, and it says so in the DOM rather than only in a ref.
+      expect(video.hasAttribute('autoplay')).toBe(false)
+      // The way OUT of the still is an explicit, labelled control — the point
+      // of the decision, not decoration.
+      expect(screen.getByRole('button', { name: 'Play a cat' })).toBeInTheDocument()
+    } finally {
+      restore()
+    }
+  })
+
+  it('autoplays, with no play control, when motion is not restricted', async () => {
+    const restore = stubReducedMotion(false)
+    try {
+      render(<AttachmentGif attachment={GIF} resolveUrl={resolveUrl} />)
+      const video = await waitFor(() => {
+        const found = document.querySelector('video')
+        expect(found).not.toBeNull()
+        return found as HTMLVideoElement
+      })
+      expect(video.hasAttribute('autoplay')).toBe(true)
+      expect(screen.queryByRole('button', { name: 'Play a cat' })).toBeNull()
+    } finally {
+      restore()
+    }
+  })
+})
+
+describe('open edge #7 - an uploaded GIF under prefers-reduced-motion', () => {
+  it('shows one captured frame until the person explicitly plays the live image', async () => {
+    const restoreMotion = stubReducedMotion(true)
+    const drawImage = vi.fn()
+    const context = { drawImage } as unknown as CanvasRenderingContext2D
+    const getContext = vi
+      .spyOn(HTMLCanvasElement.prototype, 'getContext')
+      .mockImplementation(() => context)
+
+    try {
+      render(
+        <AttachmentImage
+          attachment={{
+            id: 'att_uploaded_gif',
+            kind: 'image',
+            mime: 'image/gif',
+            name: 'uploaded-loop.gif',
+            url: 'https://uploads.test/uploaded-loop.gif',
+            aspectRatio: 16 / 9,
+          }}
+        />,
+      )
+
+      const image = screen.getByAltText('uploaded-loop.gif') as HTMLImageElement
+      Object.defineProperties(image, {
+        naturalWidth: { configurable: true, value: 320 },
+        naturalHeight: { configurable: true, value: 180 },
+      })
+      fireEvent.load(image)
+
+      const canvas = document.querySelector('canvas')
+      expect(canvas).not.toBeNull()
+      await waitFor(() => {
+        expect(drawImage).toHaveBeenCalledTimes(1)
+        expect(canvas).not.toHaveAttribute('hidden')
+        expect(image.style.visibility).toBe('hidden')
+      })
+      expect(drawImage).toHaveBeenCalledWith(image, 0, 0, 320, 180)
+      expect(canvas).toHaveProperty('width', 320)
+      expect(canvas).toHaveProperty('height', 180)
+
+      // A second load notification must not take a second snapshot. The
+      // captured still is stable rather than following the animation.
+      fireEvent.load(image)
+      expect(drawImage).toHaveBeenCalledTimes(1)
+
+      fireEvent.click(screen.getByRole('button', { name: 'Play uploaded-loop.gif' }))
+      expect(screen.queryByRole('button', { name: 'Play uploaded-loop.gif' })).toBeNull()
+      expect(canvas).toHaveAttribute('hidden')
+      expect(image.style.visibility).toBe('visible')
+    } finally {
+      getContext.mockRestore()
+      restoreMotion()
+    }
+  })
+})
+
+describe('D4 — the GIF picker', () => {
+  it('debounces, so typing six characters costs one search and not six', async () => {
+    vi.useFakeTimers()
+    try {
+      const search = vi.fn(() => Promise.resolve([]))
+      const { rerender } = render(<GifPicker search={search} onPick={vi.fn()} />)
+
+      // Simulate the keystrokes as controlled-input updates rather than through
+      // userEvent, which does not cooperate with fake timers.
+      for (const q of ['s', 'sh', 'shi', 'ship', 'shipp', 'shippi']) {
+        const field = screen.getByRole('textbox', { name: 'Search GIFs' })
+        act(() => {
+          fireEvent.change(field, { target: { value: q } })
+        })
+      }
+      // Nothing has gone out yet — the debounce is the whole point, because
+      // Giphy's free tier is 100 requests/hour.
+      expect(search).not.toHaveBeenCalled()
+
+      await act(async () => {
+        vi.advanceTimersByTime(GIF_SEARCH_DEBOUNCE_MS + 10)
+      })
+      expect(search).toHaveBeenCalledTimes(1)
+      expect(search).toHaveBeenCalledWith('shippi')
+      rerender(<GifPicker search={search} onPick={vi.fn()} />)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('carries the attribution Giphy’s terms require', () => {
+    render(<GifPicker search={() => Promise.resolve([])} onPick={vi.fn()} />)
+    expect(screen.getByText('Powered by GIPHY')).toBeInTheDocument()
+  })
+
+  it('says "switched off" differently from "nothing matched"', async () => {
+    const failing = () => Promise.reject(new Error('503'))
+    render(<GifPicker search={failing} onPick={vi.fn()} />)
+    act(() => {
+      fireEvent.change(screen.getByRole('textbox', { name: 'Search GIFs' }), {
+        target: { value: 'cat' },
+      })
+    })
+    await waitFor(() => {
+      expect(screen.getByText("GIF search isn't available right now.")).toBeInTheDocument()
+    })
+  })
+})