Skip to content

feat: implement search input debouncing on transfers list and fix tes… - #275

Open
Unclebaffa wants to merge 1 commit into
RemitFlow:mainfrom
Unclebaffa:feature/debounce-search-input
Open

feat: implement search input debouncing on transfers list and fix tes…#275
Unclebaffa wants to merge 1 commit into
RemitFlow:mainfrom
Unclebaffa:feature/debounce-search-input

Conversation

@Unclebaffa

Copy link
Copy Markdown
Contributor

📝 Comprehensive Summary of Implementation

1. List View Search Input Debouncing

  • Transfers Page (Transfers.jsx):
    • Integrated useDebouncedValue hook with a 250ms threshold.
    • Bound the search input element to local state (searchInput), ensuring immediate visual feedback while typing without input lag.
    • Synced debounced search value to URL query strings (searchParams), preventing excessive re-renders and URL churn on every keystroke.
    • Preserved bi-directional synchronization with URL query parameters when clearing filters or navigating via URL.

2. Automated Test Suite & Coverage

  • New Unit Tests (useDebouncedValue.test.js):
    • Created unit test suite verifying initial value return, 250ms/300ms delayed transitions, and timer cleanup on rapid keystrokes.
  • Integration Tests (transfers-filter.test.jsx):
    • Verified filtering behavior and URL query parameter sync with debounced input changes.
  • Test Selector Fix (send-money-form.test.jsx):
    • Tightened form label selection query in fillValidForm using { selector: 'select' } to ensure strict target matching for currency <select> dropdowns.
  • Package Script (package.json):
    • Updated test script in package.json to include test/hooks in npm test runs.

3. Code Quality, Formatting & ESLint Config

  • ESLint Configuration (eslint.config.js):
    • Added globals.node to languageOptions to properly recognize Node environment globals (process, fs, path) in test files.
    • Cleaned up unused variable warnings in wallet.js, wallet.test.js, and touch-targets.test.js.
  • Verification Results:
    • ESLint (npm run lint): 0 errors, 0 warnings.
    • Prettier (npm run format:check): 100% formatted.
    • Vitest (npm test): All 141 tests across 25 test suites passed cleanly.

Closes #8

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Debounce the search input on list views

1 participant