Skip to content

test: add component interaction tests for buttons, forms, navigation (#53)#481

Open
menawar wants to merge 1 commit into
Smartdevs17:mainfrom
menawar:test/component-interaction-tests
Open

test: add component interaction tests for buttons, forms, navigation (#53)#481
menawar wants to merge 1 commit into
Smartdevs17:mainfrom
menawar:test/component-interaction-tests

Conversation

@menawar
Copy link
Copy Markdown

@menawar menawar commented May 30, 2026

Closes #53

Summary

Adds @testing-library/react-native interaction tests that simulate real user behaviour. Previously the suite had only logic/store/service tests and no component rendering or interaction tests.

24 new tests across 5 suites, all passing.

Components/screens that received new interaction tests

File What's tested
components/common/Button onPress called once; not called when disabled; not called when loading; busy/disabled accessibility state
components/common/FloatingActionButton onPress; icon/title rendering; custom accessibility label
components/home/FilterBar search changeText, clear button, filter-button press, active-filter count (badge + a11y label)
components/subscription/SubscriptionCard onPress receives the subscription; confirm-then-toggle flow via Alert; conditional toggle render/label
screens/AddSubscriptionScreen empty-name validation, invalid-price inline error, missing-price validation, valid submit calls addSubscription with entered data, cancel navigates back, dirty-form cancel prompts to discard

Acceptance criteria

  • Button onPress tested
  • Form validation tested
  • Navigation tested (goBack, discard-changes guard)
  • All new tests pass (24/24)

Shared infrastructure

  • src/test-utils.tsx — provider-wrapped render (SafeAreaProvider + NavigationContainer). Supplies concrete safe-area metrics because initialWindowMetrics is null under Jest, which would otherwise stop SafeAreaProvider from rendering its children.
  • src/__fixtures__/subscriptions.ts — typed Subscription fixtures shared across suites.

testID props added to components

None. All queries use existing testIDs, accessibility labels, placeholder text, role, or visible text. No source/component files were modified.

Tooling changes (required — were not present)

The issue assumed @testing-library/react-native was installed; it was not, nor was react-test-renderer. To make RN component tests runnable:

  • devDependencies: @testing-library/react-native@13.3.3, react-test-renderer@19.2.5
  • overrides: hermes-parser / babel-plugin-syntax-hermes-parser pinned to 0.33.3. The Expo 53 toolchain ships 0.25.1, which cannot parse react-native@0.85's Flow const type parameters; 0.33.3 is the version RN 0.85 itself declares. Without this, any native-component render throws a parse error.

These are the only changes to package.json; no other config files were touched.

Verification

  • npx jest <new suites>24/24 pass
  • Full suite: 722 passing / 728. The 9 failing suites (6 tests) are pre-existing date-dependent business-logic / network failures (e.g. taxService, slaStore, walletService) and are unchanged by this PR — the committed baseline test_output.txt already shows failing suites.
  • npx tsc --noEmit → no type errors in the new files; no any, no @ts-ignore, no snapshots.
  • eslint + prettier clean on all new files.

Coverage on the targeted files (previously 0%)

File % Stmts
Button.tsx 100
FloatingActionButton.tsx 100
FilterBar.tsx 100
SubscriptionCard.tsx 100
AddSubscriptionScreen.tsx ~58 (validation/submit/navigation paths)

🤖 Generated with Claude Code

Adds @testing-library/react-native interaction tests that simulate real
user behaviour (issue Smartdevs17#53). Until now the suite only had logic/store/
service tests and no component rendering or interaction tests.

New suites (24 tests):
- Button: onPress called once, not called when disabled/loading,
  busy/disabled accessibility state
- FloatingActionButton: onPress, icon/title rendering, accessibility label
- FilterBar: search changeText, clear button, filter press, active count
- SubscriptionCard: onPress receives the subscription, confirm-then-toggle
  flow, conditional toggle rendering/labelling
- AddSubscriptionScreen: empty-name and invalid/missing-price validation,
  valid submit calls addSubscription with the entered data, cancel
  navigates back, dirty-form cancel prompts to discard

Shared infrastructure:
- src/test-utils.tsx: provider-wrapped render (SafeAreaProvider +
  NavigationContainer); supplies concrete safe-area metrics so children
  render under Jest where initialWindowMetrics is null
- src/__fixtures__/subscriptions.ts: typed Subscription fixtures

Tooling notes (required to run RN component tests, were not present):
- devDeps: @testing-library/react-native@13.3.3, react-test-renderer@19.2.5
- overrides: hermes-parser / babel-plugin-syntax-hermes-parser pinned to
  0.33.3 so babel-preset-expo can parse react-native 0.85 Flow source
  (the Expo 53 toolchain shipped 0.25.1, which fails on RN 0.85's `const`
  type parameters)

No source/config files were modified beyond package.json. The 9
pre-existing failing suites (date-dependent business logic / network) are
unchanged.

Closes Smartdevs17#53

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 30, 2026

@menawar 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

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.

🧪 Add component interaction tests

1 participant