chore(test): e2e test for test-tabs-general-appearance-android

FabricExample/e2e/single-feature-tests/tabs/test-tabs-general-appearance-android.e2e.ts

@@ -0,0 +1,201 @@
+import { device, expect, element, by } from 'detox';
+import {
+  describeIfAndroid,
+  selectSingleFeatureTestsScreen,
+} from '../../e2e-utils';
+
+async function selectLabelVisibilityMode(
+  mode: 'auto' | 'selected' | 'labeled' | 'unlabeled',
+) {
+  await element(
+    by.id('general-appearance-android-label-visibility-picker'),
+  ).tap();
+  await element(by.id(`tabbaritemlabelvisibilitymode-${mode}`)).tap();
+  await expect(
+    element(by.id('general-appearance-android-label-visibility-picker')),
+  ).toHaveLabel(`tabBarItemLabelVisibilityMode: ${mode}`);
+  await element(
+    by.id('general-appearance-android-label-visibility-picker'),
+  ).tap();
+}
+
+describeIfAndroid(
+  'Tab Bar General Appearance (Android) - tabBarItemLabelVisibilityMode',
+  () => {
+    beforeAll(async () => {
+      await device.reloadReactNative();
+      await selectSingleFeatureTestsScreen(
+        'Tabs',
+        'test-tabs-general-appearance-android',
+      );
+      await element(by.id('general-appearance-android-tab-label')).tap();
+    });
+
+    it('auto mode shows label only on the selected tab', async () => {
+      await expect(
+        element(by.id('general-appearance-android-label-visibility-picker')),
+      ).toHaveLabel('tabBarItemLabelVisibilityMode: auto');
+
+      await expect(
+        element(
+          by
+            .text('Label')
+            .withAncestor(by.id('general-appearance-android-tab-label')),
+        ),
+      ).toBeVisible();
+      await expect(
+        element(
+          by
+            .text('Default')
+            .withAncestor(by.id('general-appearance-android-tab-default')),
+        ),
+      ).not.toExist();
+      await expect(
+        element(
+          by
+            .text('Ripple')
+            .withAncestor(by.id('general-appearance-android-tab-ripple')),
+        ),
+      ).not.toExist();
+      await expect(
+        element(
+          by
+            .text('Indicator')
+            .withAncestor(by.id('general-appearance-android-tab-indicator')),
+        ),
+      ).not.toExist();
+    });
+
+    it('labeled mode makes all tab bar item titles visible', async () => {
+      await selectLabelVisibilityMode('labeled');
+
+      await expect(
+        element(by.id('general-appearance-android-tab-default')),
+      ).toBeVisible();
+      await expect(
+        element(by.id('general-appearance-android-tab-label')),
+      ).toBeVisible();
+      await expect(
+        element(by.id('general-appearance-android-tab-ripple')),
+      ).toBeVisible();
+      await expect(
+        element(by.id('general-appearance-android-tab-indicator')),
+      ).toBeVisible();
+    });
+
+    it('should fallback to default auto mode and persist custom label mode settings across tab switches', async () => {
+      await element(by.id('general-appearance-android-tab-default')).tap();
+
+      await expect(
+        element(
+          by
+            .text('Default')
+            .withAncestor(by.id('general-appearance-android-tab-default')),
+        ),
+      ).toBeVisible();
+      await expect(
+        element(
+          by
+            .text('Label')
+            .withAncestor(by.id('general-appearance-android-tab-label')),
+        ),
+      ).not.toExist();
+      await expect(
+        element(
+          by
+            .text('Ripple')
+            .withAncestor(by.id('general-appearance-android-tab-ripple')),
+        ),
+      ).not.toExist();
+      await expect(
+        element(
+          by
+            .text('Indicator')
+            .withAncestor(by.id('general-appearance-android-tab-indicator')),
+        ),
+      ).not.toExist();
+
+      await element(by.id('general-appearance-android-tab-label')).tap();
+
+      await expect(
+        element(by.id('general-appearance-android-tab-default')),
+      ).toBeVisible();
+      await expect(
+        element(by.id('general-appearance-android-tab-label')),
+      ).toBeVisible();
+      await expect(
+        element(by.id('general-appearance-android-tab-ripple')),
+      ).toBeVisible();
+      await expect(
+        element(by.id('general-appearance-android-tab-indicator')),
+      ).toBeVisible();
+    });
+
+    it('unlabeled mode hides all tab bar item titles', async () => {
+      await selectLabelVisibilityMode('unlabeled');
+
+      await expect(
+        element(
+          by
+            .text('Label')
+            .withAncestor(by.id('general-appearance-android-tab-label')),
+        ),
+      ).not.toExist();
+      await expect(
+        element(
+          by
+            .text('Default')
+            .withAncestor(by.id('general-appearance-android-tab-default')),
+        ),
+      ).not.toExist();
+      await expect(
+        element(
+          by
+            .text('Ripple')
+            .withAncestor(by.id('general-appearance-android-tab-ripple')),
+        ),
+      ).not.toExist();
+      await expect(
+        element(
+          by
+            .text('Indicator')
+            .withAncestor(by.id('general-appearance-android-tab-indicator')),
+        ),
+      ).not.toExist();
+    });
+
+    it('selected mode shows label only on the selected tab', async () => {
+      await selectLabelVisibilityMode('selected');
+
+      await expect(
+        element(
+          by
+            .text('Label')
+            .withAncestor(by.id('general-appearance-android-tab-label')),
+        ),
+      ).toBeVisible();
+
+      await expect(
+        element(
+          by
+            .text('Default')
+            .withAncestor(by.id('general-appearance-android-tab-default')),
+        ),
+      ).not.toExist();
+      await expect(
+        element(
+          by
+            .text('Ripple')
+            .withAncestor(by.id('general-appearance-android-tab-ripple')),
+        ),
+      ).not.toExist();
+      await expect(
+        element(
+          by
+            .text('Indicator')
+            .withAncestor(by.id('general-appearance-android-tab-indicator')),
+        ),
+      ).not.toExist();
+    });
+  },
+);

apps/src/tests/single-feature-tests/tabs/index.ts

@@ -18,6 +18,7 @@ import TestTabsSpecialEffectsScrollToTop from './test-tabs-special-effects-scrol
 import TestTabsTabBarExperimentalUserInterfaceStyle from './test-tabs-tab-bar-experimental-user-interface-style-ios';
 import TestTabsLifecycleEvents from './test-tabs-lifecycle-events';
 import TestTabsItemTitle from './test-tabs-item-title';
+import TestTabsGeneralAppearance from './test-tabs-general-appearance-android';
 
 const scenarios = {
   TestTabBottomAccessory,
@@ -38,6 +39,7 @@ const scenarios = {
   TestTabsTabBarExperimentalUserInterfaceStyle,
   TestTabsLifecycleEvents,
   TestTabsItemTitle,
+  TestTabsGeneralAppearance,
 };
 
 const TabsScenarioGroup: ScenarioGroup<keyof typeof scenarios> = {