Skip to content

scenario.md

Latest commit

 

History

History
159 lines (80 loc) · 7.49 KB

scenario.md

File metadata and controls

159 lines (80 loc) · 7.49 KB

Test Scenario: More Navigation Controller

Details

Description: Validates the native iOS More navigation controller - the overflow mechanism UIKit creates when a tab bar has more than five tabs. Tests cover user-driven and JS-driven navigation to overflow tabs (Fifth, Sixth), correct onMoreTabSelected event lifecycle (fires only when opening the More list, not on subsequent selections within it), and iPad resize transitions between compact and regular size classes.

OS test creation version: iOS: 18.6 and 26.2

E2E test

Other: Ongoing research.

Prerequisites

  • iOS device or simulator: iPhone and iPad (iOS18.6 and iOS26.2)

Note

  • On iPad: The More tab only appears when the window is resized to an iPhone-like view. For iOS 18 and older, a Split View must be triggered to achieve this.

  • Toasts: A new toast should appear only after the steps where the "Expected" section explicitly mentions it.

  • DevTools: On the focused device, press Shift+Cmd+D and select 'Open DevTools' from the menu. To view the logs relevant to this scenario, filter the console output by TabSelected.

Steps - iPhone

Baseline

  1. Launch the app and navigate to the More navigation controller scenario. Open DevTools.
  • Expected: Tab bar shows First, Second, Third, Fourth, and More. The First tab is selected. The content area displays First as the route key.

More tab — tap interaction

  1. Tap the More tab in the tab bar.
  • Expected: The native More screen opens, listing Fifth and Sixth as available tabs. A green toast appears at the bottom with the message onMoreTabSelected. In the console, the onMoreTabSelected event should be logged with selectedScreenKey,provenance and target values corresponding to last onTabSelected event.
  1. Tap Fifth in the More screen list.
  • Expected: The Fifth tab content is shown. The route key label reads Fifth. The More tab remains selected in the tab bar. No new onMoreTabSelected event appears in the console log.
  1. Tap Third tab in the tab bar.
  • Expected: Third tab becomes active. Tab bar selection updates, and the route key label reads Third.
  1. Tap the More tab in the tab bar.
  • Expected: The Fifth tab content is displayed, and the route key label reads Fifth. The Tab Bar updates to show that the More tab is selected. No new onMoreTabSelected event appears in the console log.
  1. Tap the More tab again.
  • Expected: The native More screen opens, listing Fifth and Sixth as available tabs. New green toast appear with onMoreTabSelected message.
  1. Tap Sixth in the More screen list.
  • Expected: The Sixth tab content is shown. The route key label reads Sixth.

Navigation using buttons

  1. Tap "Select Fourth".
  • Expected: Fourth tab becomes active. Tab bar selection updates, and the route key label reads Fourth.
  1. Tap "Select Fifth".
  • Expected: Fifth tab content is shown, and the route key label reads Fifth. The More tab is selected in the tab bar. No crash or blank screen.
  1. Tap "Select First" and then tap "Select Sixth".
  • Expected: Sixth tab content is shown, and the route key label reads Sixth. The More tab is selected in the tab bar.

Round-trip navigation

  1. Tap through tabs in this order using the select buttons: First → Sixth → Second → Fifth → Third.
  • Expected: Each transition updates the route key label and tab bar selection correctly. Tabs behind More (Fifth, Sixth) show the More tab as selected. No visual glitches or stale route key labels.

Steps - iPad

Baseline - without More navigation controler displayed

  1. Open app on iPad in full size and navigate to the More navigation controller scenario. Open DevTools.
  • Expected: Tab bar shows all six tabs. The First tab is selected. The content area displays First as the route key.
  1. Navigate between tabs using tab items from tab bar.
  • Expected: Each transition updates the route key label and tab bar selection correctly. No visual glitches or stale route key labels. No onMoreTabSelected event appears in the console log.
  1. Navigate between tabs using buttons from screen.
  • Expected: Each transition updates the route key label and tab bar selection correctly. No visual glitches or stale route key labels. No onMoreTabSelected event appears in the console log.

More tab — tap interaction with app resizing

  1. Select First tab and resize app to iPhone size view.
  • Expected: Tab bar shows First, Second, Third, Fourth, and More. The First tab is selected. The content area displays First as the route key. No onMoreTabSelected event appears in the console log.
  1. Tap the More tab in the tab bar.
  • Expected: The native More screen opens, listing Fifth and Sixth as available tabs. A green toast appears at the bottom with the message onMoreTabSelected. In the console, the onMoreTabSelected event should be logged with selectedScreenKey,provenance and target values corresponding to last onTabSelected event.
  1. Tap Fifth in the More screen list.
  • Expected: The Fifth tab content is shown. The route key label reads Fifth. The More tab remains selected in the tab bar.
  1. Tap Third tab in the tab bar.
  • Expected: Third tab becomes active. Tab bar selection updates, and the route key label reads Third.
  1. Tap the More tab in the tab bar.
  • Expected: The Fifth tab content is shown. The route key label reads Fifth. Tab bar selection updates - More tab is selected. No onMoreTabSelected event appears in the console log.
  1. Tap the More tab again.
  • Expected: The native More screen opens, listing Fifth and Sixth as available tabs. New green toast appear with onMoreTabSelected message.
  1. Tap Second tab in the tab bar.
  • Expected: Second tab becomes active. Tab bar selection updates, and the route key label reads Second. In the console, the onTabSelected event should be logged with selectedScreenKey set to 'Second'.
  1. Tap "More" tab bar item and select "Sixth" from the More list.
  • Expected: Sixth tab content is shown, and the route key label reads Sixth. The More tab is selected in the tab bar. No crash or blank screen.
  1. Tap the More tab again.
  • Expected: The native More screen opens, listing Fifth and Sixth as available tabs. New green toast appear with onMoreTabSelected message.
  1. Resize app to full size.
  • Expected: The More tab disappears, and the tab bar shows all six tabs at the top of the screen. The Second tab becomes active, and the route key label reads Second. In the console, the onTabSelected event should be logged with selectedScreenKey set to 'Second', taget set to the same value as in step 11, and provenance increased by 2.
  1. Select Third tab and switch to Fifth
  • Expected: Fifth tab is selected, and the route key label reads Fifth.
  1. Resize app to iPhone size view.
  • Expected: More tab appears and becomes active, and the route key label reads Fifth.
  1. Tap the More tab again.
  • Expected: The native More screen opens, listing Fifth and Sixth as available tabs. New green toast appear with onMoreTabSelected message.
  1. Resize app to full size.
  • Expected: More tab disappear, tab bar shows all six tabs on top of the screen. Fifth tab becomes active, and the route key label reads Fifth.
⚡