Skip to content

refactor(test): expand e2e coverage for tab bar layout direction #4072

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LKuchno wants to merge 5 commits into
base: main
Choose a base branch
from
+206 −34
Open

refactor(test): expand e2e coverage for tab bar layout direction #4072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1ca1bf0
refactor(test): e2e test updated to align with updated screen and sce…
LKuchno May 20, 2026
84569af
updating scenario in e2e section
LKuchno May 20, 2026
aca74f6
refactor titles and checks order in e2e test
LKuchno May 21, 2026
bfaf30e
changing launchApp to launchAppWithAttributes and small refactor for …
LKuchno May 21, 2026
0d1bc37
removing last present device.launchApp
LKuchno May 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 205 additions & 31 deletions FabricExample/e2e/single-feature-tests/tabs/test-tabs-tab-bar-layout-direction.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { expect as jestExpect } from '@jest/globals';
import { device, expect, element, by } from 'detox';
import { AndroidElementAttributes, IosElementAttributes } from 'detox/detox';
import { selectSingleFeatureTestsScreen } from '../../e2e-utils';
import { describeIfiOS, selectSingleFeatureTestsScreen } from '../../e2e-utils';

type ElementAttributes = IosElementAttributes | AndroidElementAttributes;

Expand Down Expand Up @@ -52,9 +52,9 @@ async function launchAppWithAttributes(launchArgs?: Record<string, any>) {
});
}

describe('Tab Bar Layout Direction - system settings: LTR', () => {
beforeEach(async () => {
await device.reloadReactNative();
describe('Tab Bar Layout Direction - system/RN settings: LTR', () => {
beforeAll(async () => {
await launchAppWithAttributes();
await selectSingleFeatureTestsScreen(
'Tabs',
'test-tabs-tab-bar-layout-direction',
Expand All @@ -65,33 +65,36 @@ describe('Tab Bar Layout Direction - system settings: LTR', () => {
await expect(
element(by.id('tab-bar-layout-direction-scrollview')),
).toBeVisible();

await expect(element(by.id('is-rtl-information'))).toHaveText(
'I18nManager.isRTL == false',
);
await expect(element(by.id('react-force-rtl-picker'))).toHaveLabel(
'forceRTL: false',
);
await expect(element(by.id('react-allow-rtl-picker'))).toHaveLabel(
'allowRTL: true',
);

await scrollTo({ id: 'tab-bar-layout-direction-picker' });
await expect(element(by.id('tab-bar-layout-direction-picker'))).toHaveLabel(
'direction: inherit',
);
await expect(element(by.id('is-rtl-information'))).toHaveText(
'I18nManager.isRTL == false',
'direction: ltr',
);

await expectTab1ToBeLeftOfTab2(true);
});

it('follows system LTR settings when direction is set to inherit', async () => {
it('follows system/RN LTR settings when direction is set to inherit', async () => {
await selectDirection('inherit');
await expectTab1ToBeLeftOfTab2(true);
});

it('overrides system LTR settings and renders the tab bar in RTL order', async () => {
it('overrides system/RN LTR settings and renders the tab bar in rtl order', async () => {
await selectDirection('rtl');
await expectTab1ToBeLeftOfTab2(false);
});

it('remains in LTR order when direction is explicitly set to ltr', async () => {
it('renders the tab bar in ltr order when direction is explicitly set to ltr', async () => {
await selectDirection('ltr');
await expectTab1ToBeLeftOfTab2(true);
});
Expand All @@ -114,19 +117,16 @@ describe('Tab Bar Layout Direction - system settings: LTR', () => {
});
});

describe('Tab Bar Layout Direction - system settings: RTL', () => {
describe('Tab Bar Layout Direction - system/RN settings: RTL', () => {
beforeAll(async () => {
if (device.getPlatform() === 'ios') {
await device.launchApp({
newInstance: true,
launchArgs: {
AppleTextDirection: 'YES',
NSForceRightToLeftWritingDirection: 'YES',
I18NIsRTL: 'YES',
},
await launchAppWithAttributes({
AppleTextDirection: 'YES',
NSForceRightToLeftWritingDirection: 'YES',
I18NIsRTL: 'YES',
});
} else {
await device.launchApp({ newInstance: true });
await launchAppWithAttributes();
await selectSingleFeatureTestsScreen(
'Tabs',
'test-tabs-tab-bar-layout-direction',
Expand Down Expand Up @@ -159,37 +159,40 @@ describe('Tab Bar Layout Direction - system settings: RTL', () => {
await expect(
element(by.id('tab-bar-layout-direction-scrollview')),
).toBeVisible();

await expect(element(by.id('is-rtl-information'))).toHaveText(
'I18nManager.isRTL == true',
);
await expect(element(by.id('react-force-rtl-picker'))).toHaveLabel(
'forceRTL: false',
);
await expect(element(by.id('react-allow-rtl-picker'))).toHaveLabel(
'allowRTL: true',
);
Comment on lines +163 to 171
Copy link
Copy Markdown
Collaborator Author

@LKuchno LKuchno May 21, 2026

Choose a reason for hiding this comment

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

It's as expected, we want to set RN RTL and keep it set for this test suites. afterAll function relaunch app setting direction back to LTR.


await scrollTo({ id: 'tab-bar-layout-direction-picker' });
await expect(element(by.id('tab-bar-layout-direction-picker'))).toHaveLabel(
'direction: inherit',
);
await expect(element(by.id('is-rtl-information'))).toHaveText(
'I18nManager.isRTL == true',
'direction: rtl',
);
await expectTab1ToBeLeftOfTab2(false);
});

it('follows system RTL settings when direction is set to inherit', async () => {
await selectDirection('inherit');
await expectTab1ToBeLeftOfTab2(false);
});

it('remains in RTL order when direction is explicitly set to rtl', async () => {
await selectDirection('rtl');
it('follows system/RN RTL settings when direction is set to inherit', async () => {
await selectDirection('inherit');
await expectTab1ToBeLeftOfTab2(false);
});

it('overrides system RTL settings and renders the tab bar in LTR order', async () => {
it('overrides system RTL settings and renders the tab bar in ltr order', async () => {
await selectDirection('ltr');
await expectTab1ToBeLeftOfTab2(true);
});

it('renders the tab bar in rtl order when direction is explicitly set to rtl', async () => {
await selectDirection('rtl');
await expectTab1ToBeLeftOfTab2(false);
});

it('cycle through inherit → ltr → rtl → ltr → inherit renders the tab bar in correct order', async () => {
await selectDirection('inherit');
await expectTab1ToBeLeftOfTab2(false);
Expand All @@ -207,3 +210,174 @@ describe('Tab Bar Layout Direction - system settings: RTL', () => {
await expectTab1ToBeLeftOfTab2(false);
});
});

describeIfiOS(
'iOS only: Tab Bar Layout Direction - system settings: RTL and RN settings: LTR',
() => {
beforeAll(async () => {
await launchAppWithAttributes({
AppleTextDirection: 'YES',
NSForceRightToLeftWritingDirection: 'YES',
I18NIsRTL: 'YES',
});
await selectSingleFeatureTestsScreen(
'Tabs',
'test-tabs-tab-bar-layout-direction',
);
await element(by.id('react-allow-rtl-picker')).tap();
await expect(element(by.id('react-allow-rtl-picker'))).toHaveLabel(
'allowRTL: false',
);

await device.reloadReactNative();
await selectSingleFeatureTestsScreen(
'Tabs',
'test-tabs-tab-bar-layout-direction',
);
});

afterAll(async () => {
await launchAppWithAttributes({
AppleTextDirection: 'NO',
NSForceRightToLeftWritingDirection: 'NO',
I18NIsRTL: 'NO',
});
});

it('displays default options and renders Tab1 at the visually leftmost position (LTR)', async () => {
await expect(
element(by.id('tab-bar-layout-direction-scrollview')),
).toBeVisible();

await expect(element(by.id('is-rtl-information'))).toHaveText(
'I18nManager.isRTL == false',
);
await expect(element(by.id('react-force-rtl-picker'))).toHaveLabel(
'forceRTL: false',
);
await expect(element(by.id('react-allow-rtl-picker'))).toHaveLabel(
'allowRTL: true',
);

await scrollTo({ id: 'tab-bar-layout-direction-picker' });
await expect(
element(by.id('tab-bar-layout-direction-picker')),
).toHaveLabel('direction: ltr');

await expectTab1ToBeLeftOfTab2(true);
});

it('follows system RTL settings when direction is set to inherit', async () => {
await selectDirection('inherit');
await expectTab1ToBeLeftOfTab2(false);
});

it('overrides system RTL settings and renders the tab bar in ltr order', async () => {
await selectDirection('ltr');
await expectTab1ToBeLeftOfTab2(true);
});

it('renders the tab bar in rtl order when direction is explicitly set to rtl', async () => {
await selectDirection('rtl');
await expectTab1ToBeLeftOfTab2(false);
});

it('cycle through inherit → ltr → rtl → ltr → inherit renders the tab bar in correct order', async () => {
await selectDirection('inherit');
await expectTab1ToBeLeftOfTab2(false);

await selectDirection('ltr');
await expectTab1ToBeLeftOfTab2(true);

await selectDirection('rtl');
await expectTab1ToBeLeftOfTab2(false);

await selectDirection('ltr');
await expectTab1ToBeLeftOfTab2(true);

await selectDirection('inherit');
await expectTab1ToBeLeftOfTab2(false);
});
},
);

describeIfiOS(
'iOS only: Tab Bar Layout Direction - system settings: LTR and RN settings: RTL',
() => {
beforeAll(async () => {
await launchAppWithAttributes();
await selectSingleFeatureTestsScreen(
'Tabs',
'test-tabs-tab-bar-layout-direction',
);
await element(by.id('react-force-rtl-picker')).tap();
await expect(element(by.id('react-force-rtl-picker'))).toHaveLabel(
'forceRTL: true',
);
await device.reloadReactNative();
await selectSingleFeatureTestsScreen(
'Tabs',
'test-tabs-tab-bar-layout-direction',
);
});

afterAll(async () => {
await launchAppWithAttributes();
});

it('displays default options and renders Tab2 at the visually leftmost position (RTL)', async () => {
await expect(
element(by.id('tab-bar-layout-direction-scrollview')),
).toBeVisible();

await expect(element(by.id('is-rtl-information'))).toHaveText(
'I18nManager.isRTL == true',
);
await expect(element(by.id('react-force-rtl-picker'))).toHaveLabel(
'forceRTL: false',
);
await expect(element(by.id('react-allow-rtl-picker'))).toHaveLabel(
'allowRTL: true',
);

await scrollTo({ id: 'tab-bar-layout-direction-picker' });
await expect(
element(by.id('tab-bar-layout-direction-picker')),
).toHaveLabel('direction: rtl');

await expectTab1ToBeLeftOfTab2(false);
});

it('follows system LTR settings when direction is set to inherit', async () => {
await selectDirection('inherit');
await expectTab1ToBeLeftOfTab2(true);
});

it('overrides system LTR settings and renders the tab bar in rtl order', async () => {
await selectDirection('rtl');
await expectTab1ToBeLeftOfTab2(false);
});

it('renders the tab bar in ltr order when direction is explicitly set to ltr', async () => {
await selectDirection('ltr');
await expectTab1ToBeLeftOfTab2(true);
});

it('cycle through inherit → rtl → ltr → rtl → inherit renders the tab bar in correct order', async () => {
await selectDirection('inherit');
await expectTab1ToBeLeftOfTab2(true);

await selectDirection('rtl');
await expectTab1ToBeLeftOfTab2(false);

await selectDirection('ltr');
await expectTab1ToBeLeftOfTab2(true);

await selectDirection('rtl');
await expectTab1ToBeLeftOfTab2(false);

await selectDirection('inherit');
await expectTab1ToBeLeftOfTab2(true);
});
},
);
4 changes: 1 addition & 3 deletions .../tests/single-feature-tests/tabs/test-tabs-tab-bar-layout-direction/scenario.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,14 @@ Both platforms validate `inherit`, `ltr`, and `rtl` prop values.

## E2E test

Other: Covers first two manual scenarios for LTR/RTL configurations:
Yes: Covers all scenarios for LTR/RTL configurations:

- iOS: The system RTL direction is set by app configuration setting
`AppleTextDirection`, `NSForceRightToLeftWritingDirection` and `I18NIsRTL`
to `YES` during the app launch sequence.
- Android: Via React Native - RTL direction must be triggered using the
`forceRTL` toggle located within the Layout Direction screen.

E2E tests for iOS specific scenarios have to be implemented.

Scenarios where RTL is enabled at the device level by setting a system-wide
RTL language are NOT covered by E2E tests.

Expand Down
Loading