refactor(test): test-tabs-appearance-defined-by-selected-tab

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

@@ -3,7 +3,7 @@ import type { ScenarioGroup } from '@apps/tests/shared/helpers';
 import TestTabsSimpleNav from './test-tabs-simple-nav';
 import TestTabsPreventNativeSelection from './test-tabs-prevent-native-selection';
 import TestTabsStaleStateUpdateRejection from './test-tabs-stale-update-rejection';
-import TabBarAppearanceDefinedBySelectedTab from './test-tabs-appearance-defined-by-selected-tab';
+import TestTabsAppearanceDefinedBySelectedTab from './test-tabs-appearance-defined-by-selected-tab';
 import TestTabsTabBarColorScheme from './test-tabs-tab-bar-color-scheme';
 import TestTabsOverrideScrollViewContentInset from './test-tabs-override-scroll-view-content-inset-ios';
 import TestTabsTabBarHidden from './test-tabs-tab-bar-hidden';
@@ -26,11 +26,13 @@ import TestTabsBottomAccessory from './test-tabs-bottom-accessory-layout-ios';
 import TestTabsScreenOrientation from './test-tabs-screen-orientation';
 import TestTabsTabBarExperimentalUserInterfaceStyle from './test-tabs-tab-bar-experimental-user-interface-style-ios';
 
+export { TestTabsAppearanceDefinedBySelectedTab } from './test-tabs-appearance-defined-by-selected-tab';
+
 const scenarios = {
   TestTabsSimpleNav,
   TestTabsPreventNativeSelection,
   TestTabsStaleStateUpdateRejection,
-  TabBarAppearanceDefinedBySelectedTab,
+  TestTabsAppearanceDefinedBySelectedTab,
   TestTabsTabBarColorScheme,
   TestTabsOverrideScrollViewContentInset,
   TestTabsTabBarHidden,

apps/src/tests/single-feature-tests/tabs/test-tabs-appearance-defined-by-selected-tab/index.tsx

@@ -31,13 +31,8 @@ const DEFAULT_APPEARANCE_ANDROID: TabsScreenAppearanceAndroid = {
   },
   tabBarItemActiveIndicatorEnabled: true,
   tabBarItemActiveIndicatorColor: Colors.GreenLight40,
-  tabBarItemTitleSmallLabelFontSize: 10,
-  tabBarItemTitleLargeLabelFontSize: 16,
-  tabBarItemTitleFontFamily: 'monospace',
-  tabBarItemTitleFontStyle: 'italic',
-  tabBarItemTitleFontWeight: 700,
-  tabBarItemBadgeTextColor: Colors.RedDark120,
-  tabBarItemBadgeBackgroundColor: Colors.RedDark40,
+  tabBarItemBadgeTextColor: Colors.White,
+  tabBarItemBadgeBackgroundColor: Colors.GreenDark100,
 };
 
 const DEFAULT_APPEARANCE_IOS: TabsScreenAppearanceIOS = {
@@ -47,24 +42,49 @@ const DEFAULT_APPEARANCE_IOS: TabsScreenAppearanceIOS = {
     normal: {
       tabBarItemIconColor: Colors.BlueLight100,
       tabBarItemTitleFontColor: Colors.BlueLight40,
-      tabBarItemTitleFontSize: 12,
-      tabBarItemTitleFontFamily: 'Courier',
-      tabBarItemTitleFontStyle: 'italic',
-      tabBarItemTitleFontWeight: '700',
-      tabBarItemBadgeBackgroundColor: Colors.RedDark40,
+      tabBarItemBadgeBackgroundColor: Colors.GreenDark100,
     },
     selected: {
       tabBarItemIconColor: Colors.GreenLight100,
       tabBarItemTitleFontColor: Colors.GreenLight40,
     },
-    focused: {
+  },
+};
+
+const TAB2_APPEARANCE_IOS: TabsScreenAppearanceIOS = {
+  ...DEFAULT_APPEARANCE_IOS,
+  tabBarBackgroundColor: Colors.PurpleDark100,
+  stacked: {
+    ...DEFAULT_APPEARANCE_IOS.stacked,
+    normal: {
+      ...DEFAULT_APPEARANCE_IOS.stacked?.normal,
       tabBarItemIconColor: Colors.YellowDark100,
       tabBarItemTitleFontColor: Colors.YellowDark40,
     },
+    selected: {
+      ...DEFAULT_APPEARANCE_IOS.stacked?.selected,
+      tabBarItemIconColor: Colors.RedDark100,
+      tabBarItemTitleFontColor: Colors.RedDark80,
+      tabBarItemTitleFontStyle: 'italic',
+      tabBarItemTitleFontSize: 16,
+      tabBarItemTitleFontFamily: 'Courier',
+      tabBarItemTitleFontWeight: '700',
+    },
   },
 };
 
-export function TabScreen() {
+const TAB3_APPEARANCE_IOS: TabsScreenAppearanceIOS = {
+  ...DEFAULT_APPEARANCE_IOS,
+  stacked: {
+    ...DEFAULT_APPEARANCE_IOS.stacked,
+    normal: {
+      ...DEFAULT_APPEARANCE_IOS.stacked?.normal,
+      tabBarItemBadgeBackgroundColor: Colors.RedDark100,
+    },
+  },
+};
+
+function TabScreen() {
   const navigation = useTabsNavigationContext();
   return (
     <CenteredLayoutView>
@@ -85,7 +105,7 @@ export function TabScreen() {
   );
 }
 
-export function TabsRouteInformation() {
+function TabsRouteInformation() {
   const navigation = useTabsNavigationContext();
 
   return (
@@ -95,7 +115,7 @@ export function TabsRouteInformation() {
   );
 }
 
-export function App() {
+export function TestTabsAppearanceDefinedBySelectedTab() {
   return (
     <TabsContainer
       routeConfigs={[
@@ -139,50 +159,8 @@ export function App() {
                 type: 'templateSource',
                 templateSource: require('@assets/variableIcons/icon.png'),
               },
-              standardAppearance: {
-                ...DEFAULT_APPEARANCE_IOS,
-                tabBarBackgroundColor: Colors.PurpleDark100,
-                stacked: {
-                  ...DEFAULT_APPEARANCE_IOS.stacked,
-                  normal: {
-                    ...DEFAULT_APPEARANCE_IOS.stacked?.normal,
-                    tabBarItemIconColor: Colors.YellowDark100,
-                    tabBarItemTitleFontColor: Colors.YellowDark40,
-                  },
-                  selected: {
-                    ...DEFAULT_APPEARANCE_IOS.stacked?.selected,
-                    tabBarItemIconColor: Colors.RedDark100,
-                    tabBarItemTitleFontColor: Colors.RedDark40,
-                  },
-                  focused: {
-                    ...DEFAULT_APPEARANCE_IOS.stacked?.focused,
-                    tabBarItemIconColor: Colors.RedLight100,
-                    tabBarItemTitleFontColor: Colors.RedLight40,
-                  },
-                },
-              },
-              scrollEdgeAppearance: {
-                ...DEFAULT_APPEARANCE_IOS,
-                tabBarBackgroundColor: Colors.PurpleDark100,
-                stacked: {
-                  ...DEFAULT_APPEARANCE_IOS.stacked,
-                  normal: {
-                    ...DEFAULT_APPEARANCE_IOS.stacked?.normal,
-                    tabBarItemIconColor: Colors.YellowDark100,
-                    tabBarItemTitleFontColor: Colors.YellowDark40,
-                  },
-                  selected: {
-                    ...DEFAULT_APPEARANCE_IOS.stacked?.selected,
-                    tabBarItemIconColor: Colors.RedDark100,
-                    tabBarItemTitleFontColor: Colors.RedDark40,
-                  },
-                  focused: {
-                    ...DEFAULT_APPEARANCE_IOS.stacked?.focused,
-                    tabBarItemIconColor: Colors.RedLight100,
-                    tabBarItemTitleFontColor: Colors.RedLight40,
-                  },
-                },
-              },
+              standardAppearance: TAB2_APPEARANCE_IOS,
+              scrollEdgeAppearance: TAB2_APPEARANCE_IOS,
             },
             android: {
               icon: {
@@ -191,6 +169,11 @@ export function App() {
               },
               standardAppearance: {
                 ...DEFAULT_APPEARANCE_ANDROID,
+                tabBarItemTitleSmallLabelFontSize: 10,
+                tabBarItemTitleLargeLabelFontSize: 16,
+                tabBarItemTitleFontFamily: 'monospace',
+                tabBarItemTitleFontStyle: 'italic',
+                tabBarItemTitleFontWeight: 700,
                 tabBarBackgroundColor: Colors.PurpleDark100,
                 tabBarItemRippleColor: Colors.PurpleDark40,
                 normal: {
@@ -199,11 +182,11 @@ export function App() {
                 },
                 selected: {
                   tabBarItemIconColor: Colors.RedDark100,
-                  tabBarItemTitleFontColor: Colors.RedDark40,
+                  tabBarItemTitleFontColor: Colors.RedDark60,
                 },
                 focused: {
                   tabBarItemIconColor: Colors.RedLight100,
-                  tabBarItemTitleFontColor: Colors.RedLight40,
+                  tabBarItemTitleFontColor: Colors.RedLight60,
                 },
                 tabBarItemActiveIndicatorColor: Colors.PurpleDark120,
               },
@@ -215,31 +198,14 @@ export function App() {
           Component: TabScreen,
           options: {
             title: 'Tab3',
+            badgeValue: '123',
             ios: {
               icon: {
                 type: 'templateSource',
                 templateSource: require('@assets/variableIcons/icon_fill.png'),
               },
-              standardAppearance: {
-                ...DEFAULT_APPEARANCE_IOS,
-                stacked: {
-                  ...DEFAULT_APPEARANCE_IOS.stacked,
-                  normal: {
-                    ...DEFAULT_APPEARANCE_IOS.stacked?.normal,
-                    tabBarItemBadgeBackgroundColor: Colors.GreenDark40,
-                  },
-                },
-              },
-              scrollEdgeAppearance: {
-                ...DEFAULT_APPEARANCE_IOS,
-                stacked: {
-                  ...DEFAULT_APPEARANCE_IOS.stacked,
-                  normal: {
-                    ...DEFAULT_APPEARANCE_IOS.stacked?.normal,
-                    tabBarItemBadgeBackgroundColor: Colors.GreenDark40,
-                  },
-                },
-              },
+              standardAppearance: TAB3_APPEARANCE_IOS,
+              scrollEdgeAppearance: TAB3_APPEARANCE_IOS,
             },
             android: {
               icon: {
@@ -248,8 +214,8 @@ export function App() {
               },
               standardAppearance: {
                 ...DEFAULT_APPEARANCE_ANDROID,
-                tabBarItemBadgeTextColor: Colors.GreenDark120,
-                tabBarItemBadgeBackgroundColor: Colors.GreenDark40,
+                tabBarItemBadgeTextColor: Colors.GreenDark100,
+                tabBarItemBadgeBackgroundColor: Colors.RedDark100,
               },
             },
           },
@@ -259,4 +225,4 @@ export function App() {
   );
 }
 
-export default createScenario(App, scenarioDescription);
+export default createScenario(TestTabsAppearanceDefinedBySelectedTab, scenarioDescription);

apps/src/tests/single-feature-tests/tabs/test-tabs-appearance-defined-by-selected-tab/scenario-description.ts

@@ -1,9 +1,11 @@
 import type { ScenarioDescription } from '@apps/tests/shared/helpers';
 
 export const scenarioDescription: ScenarioDescription = {
-  name: 'Tab Bar Appearance',
+  name: 'Tab-Specific Appearance',
   key: 'test-tabs-appearance-defined-by-selected-tab',
+  details:
+    'Verifies that the tab bar dynamically updates to reflect the styling of the selected tab.',
   platforms: ['ios', 'android'],
-  e2eCoverage: 'tbd',
+  e2eCoverage: 'incomplete',
   smokeTest: true,
 };