Skip to content

chore(test): add e2e test for test-tabs-system-item-ios scenario#4147

Open
LKuchno wants to merge 23 commits into
mainfrom
@lkuchno/e2e-test-tab-system-item-ios
Open

chore(test): add e2e test for test-tabs-system-item-ios scenario#4147
LKuchno wants to merge 23 commits into
mainfrom
@lkuchno/e2e-test-tab-system-item-ios

Conversation

@LKuchno

@LKuchno LKuchno commented Jun 10, 2026

Copy link
Copy Markdown
Collaborator

Description

This PR implements the Detox e2e test suite for the test-tabs-system-item-ios scenario, covering the systemItem prop on iOS tab bar items.

The test covers: static system item rendering, runtime systemItem cycling (favorites/history/search), title override cycling (custom/hidden/system), icon override cycling (custom SFSymbols vs. system fallback), and combinations of all three overrides. All test blocks are wrapped in describeIfiOS since this feature is iOS-only. The scenario.md is updated to reflect what is and isn't automated.

⚠️ Notes

The following are explicitly not automated (documented in scenario.md):

  • Validating icon vs. selectedIcon differences
  • The search systemItem detached-state / label-hiding behaviour on iOS 26
  • "Hidden title" is verified indirectly only; manual verification recommended
  • Steps 20–23 (orientation changes)

Closes https://github.com/software-mansion/react-native-screens-labs/issues/1410

Changes

  • E2E/Tabs: Add test-tabs-system-item-ios.e2e.ts - new Detox test suite
  • Test Screen: Add testID attributes to config state display labels and section headers; add tabBarItemTestID to both tab route configso enable reliable Detox targeting
  • Scenario Docs: Update scenario.md to replace "TBD" with the actual automation status, listing known gaps

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds an iOS-only Detox e2e test suite for the test-tabs-system-item-ios single-feature scenario to validate systemItem behavior and runtime overrides (systemItem/title/icon), and updates the scenario + screen to support stable test targeting.

Changes:

  • Added a new Detox e2e suite covering static rendering and runtime cycling/combination of systemItem, title overrides, and icon overrides.
  • Updated the test screen to expose stable testIDs for config state labels/section headers and tab bar items.
  • Updated scenario documentation to explicitly list what is and isn’t automated.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File Description
FabricExample/e2e/single-feature-tests/tabs/test-tabs-system-item-ios.e2e.ts New Detox suite for iOS systemItem tab bar behavior and overrides.
apps/src/tests/single-feature-tests/tabs/test-tabs-system-item-ios/index.tsx Adds testIDs for Detox targeting and tab bar item IDs; minor JSX change.
apps/src/tests/single-feature-tests/tabs/test-tabs-system-item-ios/scenario.md Documents current automation coverage and known manual gaps.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +20 to +66
describeIfiOS('Tab Bar System Item', () => {
beforeAll(async () => {
await device.reloadReactNative();
await selectSingleFeatureTestsScreen('Tabs', 'test-tabs-system-item-ios');
});

describe('Static System Item tab', () => {
it('should display the tab bar with system item titles and icons', async () => {
await expect(element(by.type('UITabBar'))).toBeVisible();
await expect(element(by.text('Static System Item'))).toBeVisible();
await expect(element(by.id('bookmark-tab-item'))).toHaveLabel(
'Bookmarks',
);
await expect(element(by.id('custom-tab-item'))).toHaveLabel('Favorites');
await expect(
element(by.id('book.fill').and(by.label('bookmark'))).atIndex(0),
).toExist();
await expect(
element(by.id('star.fill').and(by.label('favorite'))).atIndex(0),
).toExist();
});

it('tab bar item icon and title should remain the same when switching between tabs', async () => {
await element(by.id('custom-tab-item')).tap();
await expect(element(by.text('Runtime Config'))).toBeVisible();
await expect(
element(by.id('book.fill').and(by.label('bookmark'))).atIndex(0),
).toExist();
await expect(element(by.id('bookmark-tab-item'))).toHaveLabel(
'Bookmarks',
);

await element(by.id('bookmark-tab-item')).tap();
await expect(element(by.text('Static System Item'))).toBeVisible();
await expect(
element(by.id('book.fill').and(by.label('bookmark'))).atIndex(0),
).toExist();
await expect(element(by.id('bookmark-tab-item'))).toHaveLabel(
'Bookmarks',
);
});
});
});

describe('Runtime Config tab — initial state', () => {
beforeAll(async () => {
await element(by.id('custom-tab-item')).tap();
Comment on lines +2 to +6
import {
describeIfiOS,
forceTapByLabeliOS,
selectSingleFeatureTestsScreen,
} from '../../e2e-utils';
Comment thread apps/src/tests/single-feature-tests/tabs/test-tabs-system-item-ios/index.tsx Outdated
@LKuchno LKuchno requested a review from kligarski June 10, 2026 14:47
@LKuchno LKuchno added platform:ios Issue related to iOS part of the library area:tabs Issue related to bottom tabs type:chore A general maintenance task, that does not fall into other categories. type:e2e Actions related to e2e maintenance and development, especially automation. labels Jun 10, 2026
await element(by.text('system')).atIndex(1).tap();
}

describeIfiOS('Tab Bar System Item (iOS 26)', () => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we should skip running this e2e completely if iOS < 26 is used but maybe it's not necessary.

});

describe('Runtime Config tab — title override cycling', () => {
it('should update the tab bar item label after tapping custom title', async () => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
it('should update the tab bar item label after tapping custom title', async () => {
it('should update the tab bar item label after switching to custom title', async () => {

nit: I think we should focus here on the result/intention of the action, not the literal action of tapping the button

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

applies to other places as well

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

Comment on lines +393 to +395
await element(by.id('heart').and(by.label('love')))
.atIndex(0)
.tap();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:tabs Issue related to bottom tabs platform:ios Issue related to iOS part of the library type:chore A general maintenance task, that does not fall into other categories. type:e2e Actions related to e2e maintenance and development, especially automation.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants