@butternutbox/pawprint-native 1.6.3 → 2.0.1

package/src/components/molecules/SelectField/AsyncSearch.test.tsx

@@ -0,0 +1,373 @@
+import React from "react"
+import { screen, fireEvent, act, waitFor } from "@testing-library/react"
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { SelectField } from "./SelectField"
+import type { SelectFieldOptionData } from "./core"
+
+const DEFAULTS: SelectFieldOptionData[] = [
+  { value: "uk", label: "United Kingdom" },
+  { value: "ie", label: "Ireland" }
+]
+
+const RESULTS: SelectFieldOptionData[] = [
+  { value: "lab", label: "Labrador Retriever" },
+  { value: "labradoodle", label: "Labradoodle" }
+]
+
+const renderAsyncField = (
+  onSearchQuery: (query: string) => Promise<SelectFieldOptionData[]>,
+  extra: Partial<React.ComponentProps<typeof SelectField>> = {}
+) => {
+  renderWithTheme(
+    <SelectField
+      label="Breed"
+      placeholder="Select a breed"
+      options={DEFAULTS}
+      onSearchQuery={onSearchQuery}
+      {...extra}
+    />
+  )
+
+  const input = screen.getByRole("combobox") as HTMLInputElement
+  fireEvent.focus(input)
+  return input
+}
+
+const type = (input: HTMLInputElement, value: string) =>
+  fireEvent.change(input, { target: { value } })
+
+describe("SelectField async search", () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it("shows the static options before anything is typed", () => {
+    const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+    renderAsyncField(onSearchQuery)
+
+    expect(screen.getByText("United Kingdom")).toBeInTheDocument()
+    expect(onSearchQuery).not.toHaveBeenCalled()
+  })
+
+  it("debounces, firing once after the last keystroke", () => {
+    const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+    const input = renderAsyncField(onSearchQuery)
+
+    type(input, "l")
+    type(input, "la")
+    type(input, "lab")
+
+    expect(onSearchQuery).not.toHaveBeenCalled()
+
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+
+    expect(onSearchQuery).toHaveBeenCalledTimes(1)
+    expect(onSearchQuery).toHaveBeenCalledWith("lab")
+  })
+
+  it("honours a custom debounceMs", () => {
+    const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+    const input = renderAsyncField(onSearchQuery, { debounceMs: 50 })
+
+    type(input, "lab")
+    act(() => {
+      vi.advanceTimersByTime(50)
+    })
+
+    expect(onSearchQuery).toHaveBeenCalledTimes(1)
+  })
+
+  it("renders the resolved results in place of the static options", async () => {
+    const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+    const input = renderAsyncField(onSearchQuery)
+
+    type(input, "lab")
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+
+    await waitFor(() =>
+      expect(screen.getByText("Labrador Retriever")).toBeInTheDocument()
+    )
+    expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+  })
+
+  it("shows a loading state while the query is in flight", () => {
+    const onSearchQuery = vi.fn(
+      () => new Promise<SelectFieldOptionData[]>(() => {})
+    )
+    const input = renderAsyncField(onSearchQuery)
+
+    type(input, "lab")
+
+    expect(screen.getByLabelText("Loading results")).toBeInTheDocument()
+  })
+
+  it("shows errorText when the query rejects", async () => {
+    const onSearchQuery = vi.fn().mockRejectedValue(new Error("boom"))
+    const input = renderAsyncField(onSearchQuery, {
+      errorText: "Could not load breeds"
+    })
+
+    type(input, "lab")
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+
+    await waitFor(() =>
+      expect(screen.getByText("Could not load breeds")).toBeInTheDocument()
+    )
+  })
+
+  it("shows noResultsText when the query resolves empty", async () => {
+    const onSearchQuery = vi.fn().mockResolvedValue([])
+    const input = renderAsyncField(onSearchQuery, {
+      noResultsText: "No breeds found"
+    })
+
+    type(input, "zzz")
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+
+    await waitFor(() =>
+      expect(screen.getByText("No breeds found")).toBeInTheDocument()
+    )
+  })
+
+  describe("selecting an async result", () => {
+    it("shows the chosen label even though it is not in options", async () => {
+      const onValueChange = vi.fn()
+      const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+      const input = renderAsyncField(onSearchQuery, { onValueChange })
+
+      type(input, "lab")
+      act(() => {
+        vi.advanceTimersByTime(300)
+      })
+      await waitFor(() =>
+        expect(screen.getByText("Labradoodle")).toBeInTheDocument()
+      )
+
+      fireEvent.click(screen.getByText("Labradoodle"))
+
+      expect(onValueChange).toHaveBeenCalledWith("labradoodle")
+      expect(input).toHaveValue("Labradoodle")
+    })
+
+    it("keeps the label after the dropdown closes", async () => {
+      const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+      const input = renderAsyncField(onSearchQuery)
+
+      type(input, "lab")
+      act(() => {
+        vi.advanceTimersByTime(300)
+      })
+      await waitFor(() =>
+        expect(screen.getByText("Labradoodle")).toBeInTheDocument()
+      )
+
+      fireEvent.click(screen.getByText("Labradoodle"))
+      fireEvent.blur(input)
+
+      expect(input).toHaveValue("Labradoodle")
+    })
+  })
+
+  describe("reopening with a value already set", () => {
+    it("shows the search hint rather than no results, and fires no request", async () => {
+      const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+      const input = renderAsyncField(onSearchQuery, {
+        options: [],
+        searchHintText: "Type to search"
+      })
+
+      type(input, "lab")
+      act(() => {
+        vi.advanceTimersByTime(300)
+      })
+      await waitFor(() =>
+        expect(screen.getByText("Labradoodle")).toBeInTheDocument()
+      )
+      fireEvent.click(screen.getByText("Labradoodle"))
+      onSearchQuery.mockClear()
+
+      fireEvent.focus(input)
+      act(() => {
+        vi.advanceTimersByTime(300)
+      })
+
+      expect(onSearchQuery).not.toHaveBeenCalled()
+      expect(screen.getByText("Type to search")).toBeInTheDocument()
+      expect(screen.queryByText("No results found")).not.toBeInTheDocument()
+    })
+
+    it("opens the search box empty", async () => {
+      const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+      const input = renderAsyncField(onSearchQuery, { options: [] })
+
+      type(input, "lab")
+      act(() => {
+        vi.advanceTimersByTime(300)
+      })
+      await waitFor(() =>
+        expect(screen.getByText("Labradoodle")).toBeInTheDocument()
+      )
+      fireEvent.click(screen.getByText("Labradoodle"))
+
+      expect(input).toHaveValue("Labradoodle")
+    })
+
+    it("still shows a default list when one is supplied", () => {
+      const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+      renderAsyncField(onSearchQuery)
+
+      expect(screen.getByText("United Kingdom")).toBeInTheDocument()
+      expect(screen.queryByText("Type to search")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("minQueryLength", () => {
+    it("searches on the first character by default", () => {
+      const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+      const input = renderAsyncField(onSearchQuery)
+
+      type(input, "l")
+      act(() => {
+        vi.advanceTimersByTime(300)
+      })
+
+      expect(onSearchQuery).toHaveBeenCalledWith("l")
+    })
+
+    it("does not search below the minimum", () => {
+      const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+      const input = renderAsyncField(onSearchQuery, { minQueryLength: 3 })
+
+      type(input, "la")
+      act(() => {
+        vi.advanceTimersByTime(300)
+      })
+
+      expect(onSearchQuery).not.toHaveBeenCalled()
+    })
+
+    it("searches once the minimum is reached", () => {
+      const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+      const input = renderAsyncField(onSearchQuery, { minQueryLength: 3 })
+
+      type(input, "lab")
+      act(() => {
+        vi.advanceTimersByTime(300)
+      })
+
+      expect(onSearchQuery).toHaveBeenCalledWith("lab")
+    })
+
+    it("shows the keep-typing hint below the minimum", () => {
+      const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+      const input = renderAsyncField(onSearchQuery, {
+        minQueryLength: 3,
+        searchHintText: "Type 3 or more characters"
+      })
+
+      type(input, "la")
+
+      expect(screen.getByText("Type 3 or more characters")).toBeInTheDocument()
+      expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+    })
+
+    it("counts the trimmed query, not the raw one", () => {
+      const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+      const input = renderAsyncField(onSearchQuery, { minQueryLength: 3 })
+
+      type(input, "  l  ")
+      act(() => {
+        vi.advanceTimersByTime(300)
+      })
+
+      expect(onSearchQuery).not.toHaveBeenCalled()
+    })
+
+    it("still shows the static options when the query is empty", () => {
+      const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+      renderAsyncField(onSearchQuery, { minQueryLength: 3 })
+
+      expect(screen.getByText("United Kingdom")).toBeInTheDocument()
+    })
+  })
+
+  it("ignores a stale response superseded by a later keystroke", async () => {
+    const onSearchQuery = vi.fn((query: string) =>
+      query === "slow"
+        ? new Promise<SelectFieldOptionData[]>((resolve) =>
+            setTimeout(
+              () => resolve([{ value: "slow", label: "Slow result" }]),
+              500
+            )
+          )
+        : Promise.resolve([{ value: "fast", label: "Fast result" }])
+    )
+
+    const input = renderAsyncField(onSearchQuery)
+
+    type(input, "slow")
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+
+    type(input, "fast")
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+
+    await waitFor(() =>
+      expect(screen.getByText("Fast result")).toBeInTheDocument()
+    )
+
+    act(() => {
+      vi.advanceTimersByTime(1000)
+    })
+
+    expect(screen.queryByText("Slow result")).not.toBeInTheDocument()
+    expect(screen.getByText("Fast result")).toBeInTheDocument()
+  })
+
+  it("returns to the static options when the query is cleared", async () => {
+    const onSearchQuery = vi.fn().mockResolvedValue(RESULTS)
+    const input = renderAsyncField(onSearchQuery)
+
+    type(input, "lab")
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+    await waitFor(() =>
+      expect(screen.getByText("Labrador Retriever")).toBeInTheDocument()
+    )
+
+    type(input, "")
+
+    await waitFor(() =>
+      expect(screen.getByText("United Kingdom")).toBeInTheDocument()
+    )
+  })
+
+  it("does not filter the static options locally in query mode", () => {
+    const onSearchQuery = vi.fn(
+      () => new Promise<SelectFieldOptionData[]>(() => {})
+    )
+    const input = renderAsyncField(onSearchQuery)
+
+    type(input, "united")
+
+    expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+    expect(screen.getByLabelText("Loading results")).toBeInTheDocument()
+  })
+})

package/src/components/molecules/SelectField/SelectDrawerField.stories.tsx

@@ -0,0 +1,192 @@
+import React, { useState } from "react"
+import { ScrollView, StyleSheet, View } from "react-native"
+import { Search } from "@butternutbox/pawprint-icons/core"
+import { SelectDrawerField } from "./SelectDrawerField"
+import type { SelectFieldOptionData } from "./core"
+import { Icon } from "../../atoms/Icon"
+import { Typography } from "../../atoms/Typography"
+
+export default {
+  title: "Molecules/SelectDrawerField",
+  component: SelectDrawerField
+}
+
+const COUNTRIES: SelectFieldOptionData[] = [
+  { value: "uk", label: "United Kingdom" },
+  { value: "ie", label: "Ireland" },
+  { value: "nl", label: "Netherlands" },
+  { value: "de", label: "Germany" },
+  { value: "fr", label: "France" }
+]
+
+const BREEDS: SelectFieldOptionData[] = [
+  "Affenpinscher",
+  "Afghan Hound",
+  "Airedale Terrier",
+  "Akita",
+  "Border Collie",
+  "Border Terrier",
+  "Boston Terrier",
+  "Cavalier King Charles Spaniel",
+  "Cocker Spaniel",
+  "Dachshund",
+  "Flat-Coated Retriever",
+  "French Bulldog",
+  "German Shepherd",
+  "Golden Retriever",
+  "Jack Russell Terrier",
+  "Labrador Retriever",
+  "Springer Spaniel",
+  "Staffordshire Bull Terrier",
+  "West Highland Terrier",
+  "Yorkshire Terrier"
+].map((label) => ({ value: label.toLowerCase().replace(/\s+/g, "-"), label }))
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <ScrollView contentContainerStyle={styles.wrapper}>{children}</ScrollView>
+)
+
+export const Default = () => (
+  <Wrapper>
+    <SelectDrawerField
+      label="Breed"
+      placeholder="Select a breed"
+      description="Opens a drawer with search"
+      drawerTitle="Select a breed"
+      searchPlaceholder="Search breeds"
+      noResultsText="No breeds found"
+      options={BREEDS}
+    />
+  </Wrapper>
+)
+
+export const WithoutSearch = () => (
+  <Wrapper>
+    <SelectDrawerField
+      label="Country"
+      placeholder="Select a country"
+      description="Short list, no search input"
+      searchable={false}
+      options={COUNTRIES}
+    />
+  </Wrapper>
+)
+
+export const WithOptionIcons = () => (
+  <Wrapper>
+    <SelectDrawerField
+      label="Search type"
+      placeholder="Select a type"
+      options={COUNTRIES.map((option) => ({
+        ...option,
+        leadingIcon: <Icon icon={Search} size="md" />
+      }))}
+    />
+  </Wrapper>
+)
+
+export const States = () => (
+  <Wrapper>
+    <SelectDrawerField
+      label="Error"
+      placeholder="Select a country"
+      error="Please choose a country"
+      options={COUNTRIES}
+    />
+    <SelectDrawerField
+      label="Error with a value"
+      defaultValue="uk"
+      error="This country is not served yet"
+      options={COUNTRIES}
+    />
+    <SelectDrawerField
+      label="Success"
+      state="success"
+      defaultValue="uk"
+      description="Looks good"
+      options={COUNTRIES}
+    />
+    <SelectDrawerField
+      label="Disabled"
+      placeholder="Cannot open"
+      disabled
+      options={COUNTRIES}
+    />
+  </Wrapper>
+)
+
+export const Controlled = () => {
+  const [country, setCountry] = useState<string | null>("ie")
+
+  return (
+    <Wrapper>
+      <SelectDrawerField
+        label="Country"
+        placeholder="Select a country"
+        value={country}
+        onValueChange={setCountry}
+        options={COUNTRIES}
+      />
+      <View>
+        <Typography size="sm" color="tertiary">
+          {`value: ${country ?? "null"}`}
+        </Typography>
+      </View>
+    </Wrapper>
+  )
+}
+
+const ALL_BREEDS: SelectFieldOptionData[] = [
+  "Border Collie",
+  "Boston Terrier",
+  "Cocker Spaniel",
+  "Flat-Coated Retriever",
+  "French Bulldog",
+  "German Shepherd",
+  "Golden Retriever",
+  "Jack Russell Terrier",
+  "Labradoodle",
+  "Labrador Retriever",
+  "Springer Spaniel",
+  "Yorkshire Terrier"
+].map((label) => ({ value: label.toLowerCase().replace(/\s+/g, "-"), label }))
+
+const searchBreeds = (query: string) =>
+  new Promise<SelectFieldOptionData[]>((resolve, reject) => {
+    setTimeout(() => {
+      if (query.toLowerCase().includes("fail")) {
+        reject(new Error("Simulated request failure"))
+        return
+      }
+      resolve(
+        ALL_BREEDS.filter((breed) =>
+          breed.label.toLowerCase().includes(query.toLowerCase())
+        )
+      )
+    }, 600)
+  })
+
+export const AsyncSearch = () => (
+  <Wrapper>
+    <SelectDrawerField
+      label="Breed"
+      placeholder="Select a breed"
+      description="Type to search — 'fail' triggers the error state"
+      noResultsText="No breeds found"
+      errorText="Couldn't load breeds"
+      onSearchQuery={searchBreeds}
+      options={[]}
+      drawerTitle="Select a breed"
+      searchPlaceholder="Search breeds"
+    />
+  </Wrapper>
+)
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: "column",
+    gap: 24,
+    padding: 16,
+    width: 360
+  }
+})