Skip to content

Feature/fe add unit tests for transaction filter sidebar#864

Merged
emdevelopa merged 3 commits into
emdevelopa:mainfrom
Thosine-01:feature/fe-add-unit-tests-for-transaction-filter-sidebar
Jun 2, 2026
Merged

Feature/fe add unit tests for transaction filter sidebar#864
emdevelopa merged 3 commits into
emdevelopa:mainfrom
Thosine-01:feature/fe-add-unit-tests-for-transaction-filter-sidebar

Conversation

@Thosine-01
Copy link
Copy Markdown
Contributor

Closes #790

What this PR does

Adds a comprehensive unit test suite for the TransactionFilterSidebar component as part of the UX enhancement initiative. Also includes two small accessibility fixes to the component that were required to make the tests correct and meaningful.


Changes made

frontend/src/components/TransactionFilterSidebar.test.tsx

  • Replaced the existing stub test file with a full 68-test suite
  • Tests are organised into 6 clearly labelled suites
  • Uses @testing-library/react with vitest and jsdom
  • framer-motion is mocked to forward all HTML/ARIA attributes correctly so accessibility assertions are reliable

frontend/src/components/TransactionFilterSidebar.tsx

Two accessibility patches were required:

  1. Added aria-label="Clear search" to the clear-search button — it previously had no accessible label, making it untestable and inaccessible to screen readers
  2. Added aria-hidden="true" to the SyncSpinner wrapper span inside asset buttons — without this, the spinner text was concatenated into the button's accessible name (e.g. "XLMSyncing…" instead of "XLM"), which is both a test failure and an a11y bug

Test coverage breakdown

Suite What is tested Tests
1 · Rendering Desktop panel, mobile drawer, all fields, status options, asset buttons, controlled values 16
2 · Interactions Search input, clear search, status select (all 4 options), asset buttons (all 3), date inputs, Clear All button 17
3 · Pending visual feedback searchSyncPending state, isFilterPending state, combined anyPending state, aria-busy, dashed borders, opacity, hint text, aria-live 20
4 · Accessibility Input types, placeholders, aria-hidden on decorative SVGs, label linkage, group roles 7
5 · Mobile drawer Open/close via button, backdrop click, filter interactions inside drawer 5
6 · Edge cases Missing onClose prop, all flags active simultaneously, disabled+pending Clear All 3
Total 68

Test results

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 1, 2026

@Thosine-01 is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Jun 1, 2026

@Thosine-01 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@emdevelopa emdevelopa merged commit 2612450 into emdevelopa:main Jun 2, 2026
1 of 5 checks passed
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.

[Frontend] Add unit tests for Transaction Filter Sidebar

2 participants