chore(test): test-tabs-events screen with scenario#3936
chore(test): test-tabs-events screen with scenario#3936
Conversation
LKuchno
added
area:tabs
There was a problem hiding this comment.
Pull request overview
Adds a new manual test screen + scenario documentation to visually verify tab lifecycle callback ordering (onWillAppear, onDidAppear, onWillDisappear, onDidDisappear) across iOS and Android in the single-feature Tabs test suite.
Changes:
- Added
test-tabs-eventsscenario screen that shows lifecycle events via color-coded toasts. - Added a
scenario.mdwith step-by-step manual verification steps for tab transitions and edge cases. - Registered the new scenario in the Tabs single-feature test group.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| apps/src/tests/single-feature-tests/tabs/test-tabs-events/scenario.md | New manual scenario documentation for validating lifecycle event firing and ordering. |
| apps/src/tests/single-feature-tests/tabs/test-tabs-events/index.tsx | New test screen implementing 3 tabs and pushing toasts on each lifecycle callback. |
| apps/src/tests/single-feature-tests/tabs/index.ts | Registers the new test scenario in the Tabs scenario group. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| - [ ] Expected: The content area switches to show "TabB". Four toast | ||
| notifications appear in order specific platform: | ||
| - `TabB: onWillAppear` (green background) | ||
| - `TabA: onWillDisappear` (light navy background) | ||
| - `TabB: onDidAppear` (light blue background) | ||
| - `TabA: onDidDisappear` (dark navy background) | ||
|
|
There was a problem hiding this comment.
The per-transition expected toast order is described as platform-specific, but the listed sequences here match only the iOS order. On Android the expected ordering differs (per the Note section), so the Steps section should either split expected results into iOS vs Android sequences or refer back to the platform-specific order instead of listing a single sequence.
There was a problem hiding this comment.
| notifications appear in order specific platform: | ||
| - `TabB: onWillAppear` (green background) |
There was a problem hiding this comment.
Minor grammar: "in order specific platform" is ungrammatical; consider changing to something like "in a platform-specific order" (and apply the same fix in the other transition sections where this phrase is repeated).
| const TAB_CONFIGS: TabRouteConfig[] = [ | ||
| { | ||
| name: 'TabA', | ||
| Component: TabScreen, | ||
| options: { | ||
| ...DEFAULT_TAB_ROUTE_OPTIONS, | ||
| title: 'Tab A', | ||
| ...makeCallbacks('TabA'), | ||
| }, | ||
| }, | ||
| { | ||
| name: 'TabB', | ||
| Component: TabScreen, | ||
| options: { | ||
| ...DEFAULT_TAB_ROUTE_OPTIONS, | ||
| title: 'Tab B', | ||
| ...makeCallbacks('TabB'), | ||
| }, | ||
| }, | ||
| { | ||
| name: 'TabC', | ||
| Component: TabScreen, | ||
| options: { | ||
| ...DEFAULT_TAB_ROUTE_OPTIONS, | ||
| title: 'Tab C', | ||
| ...makeCallbacks('TabC'), | ||
| }, | ||
| }, | ||
| ]; |
There was a problem hiding this comment.
TAB_CONFIGS is recreated on every render of AppContents(). In this codebase other tab scenarios typically keep ROUTE_CONFIGS/TAB_CONFIGS stable (module-level const or useMemo), which avoids unnecessary work in TabsContainer (including useSanitizeRouteConfigs) and makes the component tree less noisy during re-renders (e.g., when a toast is pushed).
| @@ -30,6 +31,7 @@ const scenarios = { | |||
| TestTabsStaleStateUpdateRejection, | |||
| TestTabsTabBarMinimizeBehavior, | |||
| TestTabsTabBarControllerMode, | |||
| testTabsEvents, | |||
There was a problem hiding this comment.
Naming consistency: all other entries in this tabs scenario group are imported and registered in PascalCase (e.g., TestTabsIMEInsets, TestTabsSimpleNav). Consider renaming testTabsEvents to TestTabsEvents (and updating the scenarios key) for consistency and to keep the scenario map keys uniform.
…ario.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…on/react-native-screens into @lkuchno/test-tabs-events
…ns into @lkuchno/test-tabs-events
Description
Adds a test scenario for tab lifecycle events - onWillAppear, onDidAppear, onWillDisappear, and onDidDisappear. Each event is surfaced as a color-coded toast so that firing order can be verified visually on both platforms.
The scenario covers the happy-path transition sequence (which differs between iOS and Android), the edge case of re-tapping the already-active tab (no events should fire), rapid switching between tabs, and a full round-trip that produces a deterministic total toast count.
Closes: https://github.com/software-mansion/react-native-screens-labs/issues/1177
Changes
test-tabs-events/index.tsx
New test screen with three tabs sharing a single TabScreen component. Each tab registers all four lifecycle callbacks via makeCallbacks, which pushes a color-coded toast per event using ToastProvider.
test-tabs-events/scenario.md
Manual test scenario with five sections: baseline initial appearance, three happy-path tab transitions, re-tapping the active tab (no events expected), rapid switching, and a full round-trip. D
single-feature-tests/tabs/index.ts
Registered testTabsEvents in the tabs scenario group so the screen is reachable from the test navigator.